Атрибут srcset тега <source>

Описание

Атрибут srcset для элемента <source> позволяет указать набор вариантов изображений с разными характеристиками (разрешение, плотность пикселей), из которых браузер выбирает наиболее подходящий вариант для текущих условий отображения.

Пример использования:

<picture> <source srcset="image-large.webp 1x, image-large@2x.webp 2x" type="image/webp"> <source srcset="image-large.jpg 1x, image-large@2x.jpg 2x" type="image/jpeg"> <img src="image-large.jpg" alt="Описание изображения"> </picture>

Синтаксис srcset:

Формат Пример Описание
Плотность пикселей (x-дескриптор) image.jpg 1x, image@2x.jpg 2x Для экранов с разной плотностью пикселей
Ширина изображения (w-дескриптор) image-400.jpg 400w, image-800.jpg 800w Для адаптивных изображений с sizes

Пример с адаптивными изображениями:

<picture> <source media="(min-width: 1200px)" srcset="hero-large.webp 1x, hero-large@2x.webp 2x" type="image/webp"> <source media="(min-width: 800px)" srcset="hero-medium.webp 1x, hero-medium@2x.webp 2x" type="image/webp"> <source srcset="hero-small.webp 1x, hero-small@2x.webp 2x" type="image/webp"> <img src="hero-fallback.jpg" srcset="hero-fallback.jpg 1x, hero-fallback@2x.jpg 2x" alt="Главное изображение"> </picture>

Оптимальные практики:

  1. Всегда указывайте атрибут type для форматов изображений
  2. Используйте w-дескрипторы вместе с атрибутом sizes
  3. Предоставляйте fallback-изображение в теге <img>
  4. Оптимизируйте изображения для каждого варианта
  5. Тестируйте на различных устройствах и разрешениях

Пример с w-дескрипторами:

<picture> <source srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" type="image/webp"> <img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" alt="Адаптивное фото"> </picture>

Поддержка браузерами:

  • Поддерживается всеми современными браузерами
  • Для IE11 и старых браузеров используйте fallback через <img>
  • Браузеры автоматически выбирают оптимальное изображение

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

  • Используйте формат WebP для современных браузеров
  • Минимизируйте количество вариантов (обычно 3-5 вариантов достаточно)
  • Указывайте точные размеры для уменьшения layout shift
  • Используйте lazy loading для изображений вне viewport