Srcset: что это и как использовать

Srcset — HTML-атрибут для адаптивных изображений. Позволяет браузеру выбрать оптимальный размер изображения для каждого устройства и плотности экрана.

Что такое Srcset

Srcset — HTML-атрибут тега <img>, позволяющий указать несколько версий изображения разных размеров. Браузер автоматически выбирает наиболее подходящее изображение на основе ширины viewport, плотности пикселей экрана и скорости сети.

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

Синтаксис Srcset

Pixel Density Descriptor (x)

Для поддержки Retina/HiDPI экранов:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Логотип"
/>

1x — стандартные экраны
2x — Retina дисплеи (Mac, iPhone)
3x — экраны с высокой плотностью (некоторые Android)

Width Descriptor (w)

Для изображений разных размеров по ширине:

<img
  src="hero.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w,
          hero-1600.jpg 1600w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 1024px) 50vw,
         1200px"
  alt="Hero image"
/>

Атрибут sizes

sizes — обязателен при использовании w дескриптора. Говорит браузеру, какую ширину займёт изображение в viewport:

sizes="
  (max-width: 480px) 100vw,    /* на мобильных — 100% ширины viewport */
  (max-width: 1024px) 50vw,    /* на планшетах — 50% ширины viewport */
  800px                         /* на десктопе — 800px */
"

Без sizes браузер предполагает 100vw, что приводит к загрузке слишком больших изображений.

Пример с WebP и фолбэком

<picture>
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 768px) 100vw, 50vw"
    alt="Описание фото"
    width="800"
    height="600"
  />
</picture>

Как браузер выбирает изображение

Получает список изображений в srcset
Смотрит текущую ширину viewport
Смотрит плотность пикселей устройства (window.devicePixelRatio)
Применяет правила из sizes
Учитывает скорость соединения (в Chrome)
Выбирает наиболее подходящее изображение

Next.js Image компонент

Next.js автоматически генерирует srcset:

import Image from 'next/image';

<Image
  src="/photo.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Photo"
/>
// Автоматически создаст srcset с несколькими размерами

Проверка изображений на reChecker

Используйте Проверку изображений для анализа изображений на вашем сайте. Инструмент покажет:

Изображения без srcset для адаптивного отображения
Изображения без атрибута sizes
Размеры и форматы изображений
Рекомендации по оптимизации

FAQ

Srcset работает без sizes? При w дескрипторе — браузер предполагает sizes="100vw", что обычно неоптимально. При x дескрипторе — sizes не нужен.

Нужно ли вручную генерировать все размеры изображений? Для продакшена используйте инструменты автоматической обработки: Next.js Image, imgix, Cloudinary, Thumbor. Они генерируют нужные размеры динамически.

Кеширует ли браузер выбранное изображение? Да. После выбора и загрузки браузер кеширует изображение. При повторном посещении оно берётся из кеша.