Адаптивные изображения: srcset и sizes

Фото, отображаемое шириной 400 пикселей на мобильном, не должно быть 1600 пикселей в ширину. Но без разметки адаптивных изображений каждый пользователь скачивает один и тот же большой файл. Атрибуты srcset и sizes решают эту проблему: они сообщают браузеру, какие варианты изображений доступны и насколько широко каждый из них будет отображаться, позволяя ему выбрать оптимальный файл для загрузки.

Проблема: одно изображение для всех экранов

Без адаптивных изображений вы стоите перед выбором: отдавать большой файл (быстро на десктопе, медленно на мобильных) или маленький файл (быстро на мобильных, размытый на Retina-десктопе). Ни то, ни другое не оптимально. Разметка адаптивных изображений позволяет отдавать оба варианта и предоставлять выбор браузеру.

srcset с дескрипторами ширины (w)

Самый распространённый паттерн. Укажите несколько ширин изображения, и браузер выберет на основе ширины экрана и плотности пикселей:

<img
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w,
          photo-1600.webp 1600w"
  src="photo-800.webp"
  alt="Description"
  width="800" height="600"
>

Дескриптор w. это фактическая ширина в пикселях данного файла изображения, а не точка останова CSS. Браузер использует это значение вместе с шириной экрана и соотношением пикселей устройства для выбора наиболее эффективного варианта.

Атрибут sizes

Без sizes браузер считает, что изображение занимает 100% ширины окна просмотра. Для изображения в боковой панели шириной 300 пикселей на десктопе это заставляет браузер скачивать файл, намного больший, чем нужно. sizes сообщает браузеру, какой ширины будет изображение на каждой точке останова:

<img
  srcset="photo-300.webp 300w,
          photo-600.webp 600w,
          photo-900.webp 900w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         300px"
  src="photo-600.webp"
  alt="Description"
  width="600" height="400"
>

Читайте sizes сверху вниз: на экранах уже 768 пикселей изображение занимает 100% окна просмотра. На экранах до 1200 пикселей, 50% окна просмотра. На всех остальных (более широких) экранах. ровно 300 пикселей.

srcset с дескрипторами плотности пикселей (x)

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

<img
  srcset="logo.webp 1x, [email protected] 2x, [email protected] 3x"
  src="logo.webp"
  alt="Company logo"
  width="200" height="60"
>

Браузер скачивает версию 2x на Retina-дисплеях, 3x на экранах с очень высокой плотностью пикселей и 1x везде остальном.

Комбинирование с <picture> для согласования форматов

Объедините <picture> для переключения форматов с srcset для адаптивного изменения размеров:

<picture>
  <source
    type="image/avif"
    srcset="photo-400.avif 400w, photo-800.avif 800w, photo-1200.avif 1200w"
    sizes="(max-width: 768px) 100vw, 800px"
  >
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 768px) 100vw, 800px"
  >
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 768px) 100vw, 800px"
    alt="Description"
    width="800" height="600"
    loading="lazy"
  >
</picture>

Какие размеры изображений генерировать?

Практический стартовый набор для большинства контентных изображений:

• 400 пикселей: мобильные устройства (маленькие экраны, 1x)
• 800 пикселей: мобильные Retina (2x), небольшие планшеты
• 1200 пикселей: десктоп, планшеты Retina
• 1600 пикселей: большой десктоп, широкие изображения

Для баннеров и полноширинных изображений добавьте вариант 2400 пикселей для больших Retina-дисплеев.