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

Коротко: Изображения обычно самая большая часть веб-страницы; современные форматы (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