Серверна оптимізація зображень: WebP, AVIF, стиснення

Уявіть: ви завантажуєте на сайт зображення 10 МБ, а відвідувач з мобільним інтернетом іде, не дочекавшись завантаження. Важкі картинки — головна причина поганого LCP (Largest Contentful Paint) і високого показника відмов. Ми стикалися з цим десятки разів: клієнт скаржиться на повільний сайт, а винні неоптимізовані JPEG з метаданими EXIF по 500 КБ кожен. Серверна оптимізація зображень вирішує цю проблему докорінно: автоматичне стиснення з втратами і без, конвертація в сучасні формати WebP та AVIF, динамічна зміна розміру — все це знижує обсяг переданих даних на 40–70% без втрати якості. Оптимізація зображень безпосередньо впливає на Core Web Vitals, особливо LCP та CLS, що підвищує позиції в пошуковій видачі. У нашій практиці грамотний пайплайн зменшив LCP з 4,2 с до 1,1 с для інтернет-магазину з тисячами товарів. Згідно з Wikipedia, WebP — формат зображень, що забезпечує чудове стиснення.

Як серверна оптимізація зображень прискорює завантаження сайту?

При завантаженні зображення на сервер запускається пайплайн: бібліотека Sharp або Intervention Image змінює розмір до заданих максимальних ширин (400, 800, 1200, 1920 пікселів), конвертує в WebP та AVIF, видаляє EXIF-дані. Потім згенеровані файли кешуються на CDN з довгим терміном життя. Браузер отримує маленький файл у підтримуваному форматі — сторінка завантажується миттєво. На відміну від клієнтської оптимізації (стиснення через JavaScript), серверний підхід не навантажує пристрій користувача і однаково ефективний для будь-якого трафіку.

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

AVIF краще за стисненням, WebP — за сумісністю. Оптимальна стратегія — генерувати обидва формати і передавати через <picture> з srcset.

Наш стек для серверної оптимізації

У Node.js проектах використовуємо бібліотеку Sharp — вона забезпечує високу пропускну здатність і мінімальне споживання пам'яті. Для PHP-застосунків застосовуємо Intervention Image у зв'язці з Imagick. Приклади коду реалізовано нижче.

Node.js: Sharp pipeline

import sharp from 'sharp'; interface OptimizeOptions { maxWidth?: number; quality?: number; format?: 'webp' | 'avif' | 'jpeg'; } async function optimizeImage(inputBuffer: Buffer, options: OptimizeOptions = {}): Promise<Buffer> { const { maxWidth = 1920, quality = 80, format = 'webp' } = options; return sharp(inputBuffer) .resize(maxWidth, undefined, { withoutEnlargement: true, fit: 'inside', }) .toFormat(format, { quality, effort: 4, // баланс скорость/размер }) .withMetadata({ orientation: undefined }) // убрать EXIF rotation .toBuffer(); } // Middleware для lazy оптимизации app.get('/images/:key', async (req, res) => { const { key } = req.params; const { w, q = '80', f = 'webp' } = req.query; // Проверить кэш const cacheKey = `${key}:${w}:${q}:${f}`; const cached = await s3.getObject({ Key: `optimized/${cacheKey}.${f}` }).catch(() => null); if (cached) { return res.type(`image/${f}`).send(await streamToBuffer(cached.Body)); } // Получить оригинал const original = await s3.getObject({ Key: `originals/${key}` }); const buffer = await streamToBuffer(original.Body); // Оптимизировать const optimized = await optimizeImage(buffer, { maxWidth: w ? parseInt(w as string) : 1920, quality: parseInt(q as string), format: f as 'webp' | 'avif' | 'jpeg', }); // Сохранить в кэш await s3.putObject({ Key: `optimized/${cacheKey}.${f}`, Body: optimized, ContentType: `image/${f}`, CacheControl: 'public, max-age=31536000', }); res.type(`image/${f}`).send(optimized); }); 

PHP: оптимізація при завантаженні

use Intervention\Image\Facades\Image; class ImageOptimizationService { const FORMATS = ['webp', 'avif']; const SIZES = [400, 800, 1200, 1920]; public function process(UploadedFile $file): array { $image = Image::make($file->getPathname()); // Убрать EXIF и повернуть по ориентации $image->orientate()->stripExif(); $paths = []; foreach (self::SIZES as $width) { if ($image->width() < $width) continue; $resized = clone $image; $resized->resize($width, null, fn($c) => $c->aspectRatio()->upsize(false)); foreach (self::FORMATS as $format) { $quality = $format === 'avif' ? 60 : 82; $key = "images/{$width}w/{$this->generateKey()}.{$format}"; Storage::disk('s3')->put( $key, $resized->encode($format, $quality)->__toString(), ['CacheControl' => 'public, max-age=31536000'] ); $paths[$format][$width] = $key; } } return $paths; } } 

HTML: responsive images з srcset

// Blade хелпер для отображения оптимизированных изображений function responsive_img(array $paths, string $alt, string $sizes = '100vw'): string { $avifSrcset = collect($paths['avif'] ?? [])->map(fn($path, $width) => Storage::disk('s3')->url($path) . " {$width}w" )->join(', '); $webpSrcset = collect($paths['webp'] ?? [])->map(fn($path, $width) => Storage::disk('s3')->url($path) . " {$width}w" )->join(', '); $fallback = Storage::disk('s3')->url(end($paths['webp'])); return <<<HTML <picture> <source type="image/avif" srcset="{$avifSrcset}" sizes="{$sizes}"> <source type="image/webp" srcset="{$webpSrcset}" sizes="{$sizes}"> <img src="{$fallback}" alt="{$alt}" loading="lazy" decoding="async"> </picture> HTML; } 

Зверніть увагу на атрибут alt: він повинен містити ключове слово, наприклад «оптимізоване зображення товару», що також допомагає SEO.

Nginx: конвертація WebP на льоту

# Отдавать WebP если браузер поддерживает map $http_accept $webp_suffix { "~*webp" ".webp"; default ""; } server { location ~* \.(jpg|jpeg|png)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; expires 1y; add_header Cache-Control "public, immutable"; } } 

Процес роботи

1. Аналіз — аудит поточних зображень: середній розмір, формати, метадані. Визначаємо точки зростання.
2. Проектування пайплайну — обираємо стратегію: on‑the‑fly (Nginx + ImageMagick) або pre‑process при завантаженні. Проектуємо систему кешування.
3. Реалізація — пишемо код оптимізації, налаштовуємо обробник завантаження, додаємо srcset для responsive images.
4. Тестування — перевіряємо візуальну якість, метрики Core Web Vitals, швидкість віддачі. Використовуємо Lighthouse та PageSpeed Insights.
5. Деплой — розгортаємо на сервері, підключаємо CDN (Cloudflare, AWS CloudFront), налаштовуємо моніторинг.

Що входить в роботу

• Інтеграція пайплайну оптимізації (Sharp/Intervention) у ваш бекенд.
• Генерація кількох розмірів (400, 800, 1200, 1920 px) для responsive images.
• Конвертація в WebP та AVIF з оптимальною якістю.
• Стріппінг метаданих (EXIF) для додаткової економії.
• Налаштування кешування через CDN з long‑lived Cache-Control.
• Документація з використання хелперів (Blade, Twig, JSX).
• Підтримка після впровадження — 14 днів моніторингу.

Чек-лист для оцінки поточного пайплайну:

• використання сучасних форматів (WebP/AVIF);
• застосування стриппінгу метаданих;
• генерація різних розмірів для responsive;
• налаштування кешування на CDN;
• використання lazy loading та async decoding.

Терміни реалізації

Вартість розраховується індивідуально під ваш проект — залежить від стеку, кількості точок завантаження та вимог до кешування. При середньому обсязі трафіку економія може бути суттєвою. Зв'яжіться з нами для оцінки, і ми запропонуємо оптимальне рішення.

Замовте реалізацію серверної оптимізації зображень під ключ — ваш сайт стане значно швидшим. За 7+ років роботи ми оптимізували зображення для більш ніж 50 проектів — від невеликих блогів до високонавантажених інтернет-магазинів. Гарантуємо зниження розміру картинок мінімум на 40% при збереженні якості.