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

Изображения составляют около 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.