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

Зображення складають близько 50% ваги сторінки. Їх оптимізація — найшвидший спосіб прискорити сайт.

---

Навіщо оптимізувати?

• 53% мобільних користувачів залишають сайт, якщо він вантажиться довше 3 секунд (дані Google)
• Затримка в 1 секунду = 7% втрати конверсії
• Core Web Vitals (LCP, CLS) безпосередньо впливають на позиції в пошуку Google

---

Крок 1: правильний формат

• WebP — найкращий вибір для всіх веб-зображень (на 25–35% менше JPEG)
• PNG — скриншоти, прозорість, логотипи
• JPEG — фотографії за відсутності підтримки WebP
• SVG — іконки, логотипи
• AVIF — формат нового покоління, використовуйте з запасним варіантом

---

Крок 2: стиснення

TinyImg — безкоштовно, приватно, миттєво.

---

Крок 3: адаптивні зображення

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Опис" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Опис" width="800" height="600" />
</picture>

---

Крок 4: ліниве завантаження

<img src="image.webp" loading="lazy" alt="Опис" width="800" height="600" />

Ніколи не застосовуйте ліниве завантаження до зображень у верхній частині сторінки. Завжди вказуйте ширину та висоту — це запобігає зсувам макету (CLS).

---

Крок 5: вказуйте розміри

<img src="photo.webp" alt="Фото" width="800" height="600" />

img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

---

Крок 6: використовуйте CDN

Cloudflare (безкоштовно), Cloudinary, imgix, Vercel.

---

Крок 7: вимірюйте результат

• LCP: менше 2,5 с
• CLS: менше 0,1
• Сумарна вага зображень: менше 500 КБ

Інструменти: PageSpeed Insights, Lighthouse, WebPageTest.

---

Чек-лист

• Формат WebP
• Стиснення через TinyImg
• srcset + sizes
• Lazy load для зображень нижче згину
• Атрибути width і height
• CDN
• Аудит PageSpeed

Почніть з TinyImg.