Оптимизация изображений для веба в 2025: формат, размер, lazy-loading

Изображения — это 50–70 % веса типичной веб-страницы. Грамотная оптимизация ускоряет сайт в 2–4 раза, поднимает Core Web Vitals и напрямую влияет на позиции в Google. Эта статья — практический чек-лист, что и как сжимать.

Шаг 1. Выбрать правильный формат

Подробное сравнение PNG, JPG, WEBP и AVIF — в отдельной статье «PNG vs JPG vs WEBP vs AVIF». Краткая таблица:

Шаг 2. Подобрать правильное разрешение

Не больше, чем нужно. Если CSS-блок шириной 600 px, картинка должна быть 1200 px (×2 для retina) — и не больше. Грузить 4000 px вместо нужных 1200 — это +220 % веса без выигрыша в качестве.

Используйте srcset для разных устройств:

<img
  src="/photo-800.jpg"
  srcset="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Описание"
  width="800"
  height="600"
  loading="lazy"
/>

Браузер сам выберет нужный размер под размер экрана и плотность пикселей. Для retina iPhone возьмёт 1600w, для бюджетного Android — 400w.

Шаг 3. Сжать с правильным качеством

• JPG: качество 80–85 для фотографий — оптимум. 90+ — избыточно. Меньше 70 — артефакты заметны.
• WEBP: качество 75–80 даёт визуальный эквивалент JPG-90 при размере 30–40 % меньше.
• AVIF: качество 50–60 даёт визуальный эквивалент JPG-90.
• PNG: прогоните через pngquant или TinyPNG — обычно −60–80 % размера без видимых потерь.

Шаг 4. Использовать тег <picture>

Тег <picture> — стандартный способ давать AVIF новым браузерам и WEBP/JPG старым:

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

Браузер выбирает первый поддерживаемый формат. Chrome/Firefox с поддержкой AVIF возьмут AVIF (минимальный вес), Safari старее 16.4 — WEBP, доисторический IE — JPG.

Шаг 5. Lazy-loading

Современный способ — атрибут loading="lazy":

<img src="/photo.jpg" loading="lazy" alt="..." width="800" height="600" />

Шаг 6. Указывать width и height

Без атрибутов width/height браузер не знает, сколько места резервировать под картинку — и при её загрузке макет «прыгает». Это плохо для метрики CLS (Cumulative Layout Shift). Всегда указывайте оба атрибута, даже для responsive.

Шаг 7. Удалить EXIF-метаданные

Фотографии с телефона содержат EXIF: модель камеры, дату съёмки, GPS-координаты. Это может занимать 10–50 КБ и часто содержит приватную информацию (где живёт автор фото). Все нормальные image-оптимизаторы удаляют EXIF автоматически.

Влияние на SEO и Core Web Vitals

• LCP(Largest Contentful Paint) — время до отображения главной картинки. Цель — <2.5 с. Оптимизация образа главной картинки даёт самый большой эффект.
• CLS(Cumulative Layout Shift) — насколько «прыгает» макет при загрузке. Цель — <0.1. Атрибуты width/height фиксят это.
• INP (Interaction to Next Paint) — отзывчивость. Тяжёлые картинки блокируют main-thread и портят INP.

Чем измерять

• Google PageSpeed Insights — главный инструмент.
• Lighthouse в Chrome DevTools — то же, но локально.
• WebPageTest — детальный анализ с водопадом загрузки.
• Squoosh от Google — сравнить, как картинка выглядит при разных уровнях сжатия.

Инструменты для оптимизации

• Локально: ImageMagick, Sharp (Node.js), pngquant, mozjpeg, libvips.
• GUI: ImageOptim (macOS), FileOptimizer (Windows).
• Онлайн: TinyPNG, Squoosh, наш «Сжать PDF/изображения».
• Автоматизация: Vercel Image Optimization, Cloudflare Images, Imgix, Next.js <Image>.

Часто задаваемые вопросы

Связанные статьи

• PNG vs JPG vs WEBP vs AVIF — сравнение форматов
• Лучшие сервисы для сжатия PDF
• Сжать изображение / PDF