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

Что такое 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>

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

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

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. Они генерируют нужные размеры динамически.

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