Адаптивные изображения: picture, srcset и форматы (AVIF, WebP)

Адаптивные изображения: <picture>, srcset и современные форматы (AVIF, WebP)

В современном вебе изображения составляют до 60% от общего веса страницы. Неоптимизированные картинки — главная причина медленной загрузки сайтов. В этой статье мы разберём, как правильно реализовать адаптивные изображения с помощью современных технологий, чтобы не потерять в качестве и производительности.

1. Проблема адаптивных изображений

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

• Избыточный вес — большие файлы на мобильных устройствах
• Неоптимальное качество — растягивание маленьких изображений на десктопах
• Потеря релевантности — одинаковое изображение для разных контекстов
• Низкая производительность — долгая загрузка и отрисовка

Современные решения предлагают три основных подхода:

1. Адаптивные размеры с srcset
2. Условная загрузка с <picture>
3. Современные форматы (WebP, AVIF)

2. Атрибут srcset и sizes

Атрибут srcset позволяет указать браузеру набор изображений разных размеров, а sizes — как они будут отображаться в разных условиях.

Базовый пример:

<img 
  src="image-800w.jpg" 
  srcset="image-400w.jpg 400w,
          image-800w.jpg 800w,
          image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
          (max-width: 1200px) 50vw,
          800px"
  alt="Пример адаптивного изображения"
>

Как это работает:

• srcset — список изображений с их реальной шириной (400w = 400px ширины)
• sizes — медиаусловия и соответствующий размер изображения в вьюпорте
• Браузер выбирает оптимальное изображение, учитывая:
  • Размер экрана
  • Плотность пикселей
  • Настройки сети

Практический совет

Для ретиновых экранов (2x, 3x) добавьте дескрипторы плотности:

srcset="image-400w.jpg 1x, image-800w.jpg 2x"

3. Элемент <picture> для арт-дирекшна

Тег <picture> позволяет полностью контролировать выбор изображения в разных условиях.

Пример с разными форматами:

<picture>
  <source 
    type="image/avif" 
    srcset="image.avif 1x, image@2x.avif 2x"
  >
  <source 
    type="image/webp" 
    srcset="image.webp 1x, image@2x.webp 2x"
  >
  <img 
    src="image.jpg" 
    srcset="image@2x.jpg 2x"
    alt="Пример picture с современными форматами"
  >
</picture>

Пример с разными композициями (арт-дирекшн):

<picture>
  <source 
    media="(min-width: 1200px)" 
    srcset="image-wide.jpg"
  >
  <source 
    media="(min-width: 800px)" 
    srcset="image-standard.jpg"
  >
  <img 
    src="image-mobile.jpg" 
    alt="Разные композиции для разных экранов"
  >
</picture>

Ключевые преимущества <picture>:

• Поддержка разных форматов изображений
• Возможность полностью менять изображение для разных условий (арт-дирекшн)
• Гибкое управление качеством и производительностью
• Постепенная деградация — всегда работает стандартный <img>

4. Современные форматы: WebP и AVIF

Современные форматы изображений могут сократить размер файлов на 30-50% без потери качества.

Сравнение форматов:

5. Оптимизация производительности

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

1. Оптимальные breakpoints

Используйте реалистичные размеры на основе статистики:

sizes="(max-width: 480px) 100vw,
  (max-width: 1024px) 50vw,
  800px"

2. Ленивая загрузка

Атрибут loading="lazy" для изображений вне вьюпорта:

<img 
  src="image.jpg" 
  srcset="..." 
  loading="lazy" 
  alt="Пример lazy loading"
>

3. Оптимизация CLS

Всегда указывайте width и height для предотвращения сдвигов:

<img 
  src="image.jpg" 
  width="800" 
  height="600"
  alt="Пример с фиксированными размерами"
>

4. CDN и сжатие

• Используйте CDN с автоматической оптимизацией (Cloudinary, Imgix)
• Включайте сжатие Brotli или Gzip на сервере
• Настраивайте кэширование (Cache-Control: max-age=31536000)

Поддержка браузеров

Перед внедрением современных технологий проверьте актуальную поддержку:

• <picture> и srcset: 95% глобальной поддержки (нет в IE)
• WebP: 98% (нет в IE, Safari < 14)
• AVIF: 85% (полная поддержка в Chrome, Firefox, Edge; частичная в Safari)

Всегда предоставляйте fallback в формате JPEG/PNG внутри <picture>.

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

Конвертация в WebP/AVIF:

• Squoosh.app — онлайн-инструмент от Google
• Sharp — Node.js библиотека для пакетной обработки
• ImageMagick — консольная утилита

Автоматизация:

• Webpack + image-loader — автоматическая конвертация во время сборки
• gulp-responsive — генерация разных размеров
• Cloudinary/Imgix — облачная оптимизация "на лету"

Анализ:

• Lighthouse — выявление неоптимизированных изображений
• WebPageTest — оценка реальной производительности
• ImageKit.io analyzer — детальный анализ качества

Лучшие практики

1. Всегда используйте srcset для основных изображений
2. Внедряйте <picture> для современных форматов
3. Предоставляйте fallback в JPEG/PNG
4. Оптимизируйте каждое изображение индивидуально
5. Тестируйте на реальных устройствах
6. Мониторьте производительность после внедрения

Полезные ресурсы

• MDN: Responsive images
• Web.dev: The picture element
• AVIF.io — инструменты для работы с AVIF
• Squoosh — онлайн-оптимизатор изображений

Правильная реализация адаптивных изображений может значительно улучшить производительность вашего сайта. Комбинируя современные форматы, элемент <picture> и атрибут srcset, вы сможете обеспечить оптимальное качество изображений при минимальном размере файлов.