Оптимізація зображень у вебі: формати, адаптивність і ліниве завантаження

Коротко: Зображення зазвичай найбільша частина вебсторінки; сучасні формати (WebP, AVIF), відповідні розміри (srcset), ліниве завантаження та фіксовані розміри пришвидшують завантаження й запобігають зсувам макета.

Докладніше: Фотографія в 4 МБ у картці завширшки 300 пікселів — марнотратство. Оптимізація зображень покращує LCP (найбільший видимий елемент), заощаджує обсяг даних і корисна для SEO та довкілля.

Подробиці

Правильний формат

• JPEG: фотографії, підтримується скрізь.
• PNG: графіка з прозорістю, різкими краями (для фотографій великий).
• WebP: приблизно на 25–35 % менший, прозорість, анімація.
• AVIF: часто ще менший (HDR), створюється повільніше.
• SVG: логотипи, значки, діаграми (вектор, масштабований, стилізується через CSS; уникайте скриптів із невідомих SVG).
• GIF: для анімацій краще MP4/WebM або анімований WebP.

Якості 70–85 зазвичай достатньо; видаляйте метадані (EXIF/GPS) (конфіденційність).

Адаптивні зображення

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="800" height="533" alt="Description" loading="lazy" decoding="async">
<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Description" width="800" height="533">
</picture>

srcset/sizes дають змогу браузеру вибирати за шириною екрана та щільністю пікселів; <picture> доставляє формати та художнє кадрування (інше обрізання на телефонах).

Ліниве завантаження та макет

• loading="lazy" завантажує зображення лише коли прокручування наближається; найважливіше зображення вгорі (LCP) не ліниве, а з fetchpriority="high"/preload.
• Указуйте width і height (або aspect-ratio), щоб не було зсуву макета (CLS).
• Тексти alt для доступності; декоративні зображення alt="".
• Заповнювачі (blur hash/домінантний колір) для відчуття швидкості.
• Фонові зображення в CSS: image-set(); iframe/відео теж ліниво.

Інструменти та доставка

• Next.js next/image, Astro, Nuxt Image: автоматично створюють розміри/формати, з кешем.
• Sharp, Squoosh, cwebp, avifenc, ImageMagick у збірці/скрипті.
• CDN для зображень (Cloudinary, imgix, Vercel Image Optimization): розмір/формат через URL.
• Кешування: довгий Cache-Control із хешем в імені файлу; використовуйте CDN.
• Перевірка: Lighthouse, WebPageTest, мережа в DevTools (розмір і відображуваний розмір).
• Права: дотримуйтеся прав на зображення/ліцензії, фотографії людей лише з дозволу. Зображення вікі/сторінок: стискайте до завантаження.

Див. також: WebP, Lighthouse і Core Web Vitals, CDN