Генерація мініатюр зображень: вирішуємо проблему LCP та ваги сторінок

Генерація мініатюр зображень: вирішуємо проблему LCP та ваги сторінок

Сайт з великою кількістю зображень гальмує? Кожна сторінка завантажує оригінали 4000x3000 пікселів — LCP зашкалює, користувачі йдуть. Наш досвід показує, що автоматична генерація мініатюр на сервері — єдиний спосіб утримати Core Web Vitals в нормі без ручної обробки кожного файлу. Ми реалізуємо рішення за 2–3 дні під ключ: налаштування черг, формати WebP/AVIF, кешування на CDN. Це знижує обсяг переданих даних на 40–60% та покращує LCP на 30–50%, що безпосередньо впливає на конверсію.

Як працює генерація мініатюр в черзі?

Асинхронна генерація — стандарт для сучасних проєктів з високим навантаженням на завантаження. Після того, як користувач завантажив оригінал до S3 або локального сховища, в чергу (Laravel Job, BullMQ, або AWS SQS) відправляється задача. Вона створює кілька розмірів: thumb (200x200) для списків, medium (600x400) для карток, large (1200x800) для галерей. Користувач не чекає — відповідь приходить одразу, а мініатюри з'являються через секунди. При цьому черга не блокує веб-сервер: обробка відбувається у фоновому процесі.

Чому варто обрати WebP/AVIF?

Сучасні формати стиснення з втратами дають 25–50% економії розміру без помітного падіння якості. Для браузерів, які не підтримують AVIF, автоматично віддається WebP через елемент <picture>. Це знижує LCP на 30–50%. AVIF (на основі AV1) забезпечує найкраще стиснення, але потребує більше ресурсів CPU для кодування. WebP — універсальний вибір, підтримуваний 96% браузерів.

Як обрати стратегію генерації: черга vs лінива генерація?

Для сайтів з високою частотою завантажень (фотогалереї, маркетплейси) асинхронна черга — єдиний варіант: вона не блокує відповідь та дозволяє масштабувати обробку горизонтально. Лінива генерація через Glide підходить для проєктів з рідкісними завантаженнями або коли розміри мініатюр заздалегідь невідомі. Вона генерує зображення за першим запитом та кешує його. Однак при першому зверненні користувач чекає генерації. Ми допомагаємо обрати стратегію на основі ваших метрик: кількість завантажень на день, середній розмір зображень, бюджет на інфраструктуру.

Що входить в нашу роботу

• Аудит поточної системи зберігання та обробки зображень
• Вибір стратегії: черга або лінива генерація
• Реалізація генерації мініатюр з потрібними розмірами та форматами
• Налаштування кешування (CDN, Cache-Control)
• Інтеграція з існуючим API та сховищем (S3, хмарний сервер)
• Документація по використанню та підтримці

Чому Sharp справляється швидше конкурентів?

Бібліотека Sharp (на базі libvips) виконує операції в 4–5 разів швидше, ніж ImageMagick або GD для типових задач. Це досягається за рахунок роботи із зображенням в оперативній пам'яті без проміжних файлів та ефективного використання кешу процесора. Для Node.js-проєктів Sharp — стандарт де-факто. Для PHP-проєктів рекомендуємо Intervention Image з чергами або Glide для лінивої генерації.

Формати та оптимізація: порівняння

// Вибір формату за підтримкою браузера const output = sharp(buffer) .resize(800) .toFormat(supportsAvif ? 'avif' : supportsWebp ? 'webp' : 'jpeg', { quality: supportsAvif ? 60 : supportsWebp ? 80 : 85, }); 

AVIF дає до 50% економії відносно JPEG при тій самій якості. WebP підтримується всіма сучасними браузерами. Для максимальної сумісності використовуйте <picture> з кількома форматами.

Laravel: Intervention Image + черга

// Модель з автоматичною генерацією мініатюр class Image extends Model { const SIZES = [ 'thumb' => [200, 200], 'medium' => [600, 400], 'large' => [1200, 800], ]; } // Job для асинхронної генерації class GenerateImageThumbnails implements ShouldQueue { use Dispatchable, InteractsWithQueue, Queueable; public function __construct(private Image $image) {} public function handle(): void { $originalPath = Storage::disk('s3')->path($this->image->path); $img = \Intervention\Image\Facades\Image::make($originalPath); foreach (Image::SIZES as $size => [$width, $height]) { $resized = clone $img; $resized->fit($width, $height); // crop по центру $thumbPath = str_replace('original/', "{$size}/", $this->image->path); Storage::disk('s3')->put($thumbPath, $resized->encode('webp', 85)->__toString()); } $this->image->update(['processed' => true]); } } // Контролер завантаження public function store(Request $request): JsonResponse { $path = Storage::disk('s3')->putFile('original', $request->file('image')); $image = Image::create([ 'path' => $path, 'user_id' => auth()->id(), 'processed' => false, ]); GenerateImageThumbnails::dispatch($image); return response()->json(['id' => $image->id]); } 

Node.js: Sharp

Sharp — найшвидша Node.js-бібліотека для обробки зображень (на базі libvips).

import sharp from 'sharp'; import { S3Client, GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3'; const SIZES = { thumb: { width: 200, height: 200 }, medium: { width: 600, height: 400 }, large: { width: 1200, height: 800 }, } as const; async function generateThumbnails(s3Key: string): Promise<Record<string, string>> { const s3 = new S3Client({ region: 'eu-west-1' }); // Завантажити оригінал const { Body } = await s3.send(new GetObjectCommand({ Bucket: process.env.S3_BUCKET!, Key: s3Key, })); const buffer = Buffer.from(await (Body as any).transformToByteArray()); const results: Record<string, string> = {}; await Promise.all( Object.entries(SIZES).map(async ([name, { width, height }]) => { const thumbnail = await sharp(buffer) .resize(width, height, { fit: 'cover', position: 'centre' }) .webp({ quality: 85 }) .toBuffer(); const thumbKey = s3Key.replace('original/', `${name}/`).replace(/\.[^.]+$/, '.webp'); await s3.send(new PutObjectCommand({ Bucket: process.env.S3_BUCKET!, Key: thumbKey, Body: thumbnail, ContentType: 'image/webp', CacheControl: 'public, max-age=31536000', })); results[name] = thumbKey; }) ); return results; } 

Лінива генерація через Glide (PHP)

Glide генерує мініатюри за запитом з підписаним URL:

// Маршрут для зображень Route::get('/img/{path}', function (Request $request, string $path) { $server = League\Glide\ServerFactory::create([ 'source' => Storage::disk('s3')->getDriver(), 'cache' => Storage::disk('local')->getDriver(), 'cache_path_prefix' => '.cache', 'base_url' => '/img', 'max_image_size' => 2000 * 2000, ]); // Перевірка підпису URL League\Glide\Signatures\SignatureFactory::create(config('app.key')) ->validateRequest('/img/' . $path, $request->all()); return $server->getImageResponse($path, $request->all()); })->where('path', '.*'); // Генерація підписаного URL $url = (new League\Glide\Urls\UrlBuilderFactory) ->create('/img', config('app.key')) ->getUrl('uploads/photo.jpg', ['w' => 400, 'h' => 300, 'fit' => 'crop']); 

Строки реалізації

Генерація мініатюр в черзі (Laravel Job або BullMQ Worker) зі збереженням в S3: 2–3 дні. З lazy generation через Glide та CDN-кешуванням: 3–4 дні. Складні проєкти з інтеграцією кількох CMS — до 5 днів. Вартість розраховується індивідуально залежно від складності та стеку. Зв'яжіться з нами, щоб отримати консультацію та точні строки. Замовте аудит та оптимізацію зображень — ми підберемо оптимальну стратегію для вашого проєкту.

Наші інженери мають 5+ років досвіду в оптимізації високонавантажених сайтів. Вже понад 30 проєктів з подібною архітектурою успішно працюють в продакшені. Отримайте консультацію — ми оцінимо ваш проєкт та запропонуємо рішення під ключ, гарантуючи зниження LCP на 30–50% після впровадження.