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

Описание

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

Пример использования:
<img srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1280w.jpg 1280w" sizes="(max-width: 480px) 100vw, 640px" src="image-640w.jpg" alt="Адаптивное изображение">

Синтаксис и параметры:

Компонент Пример Описание
URL изображения image-320w.jpg Путь к файлу изображения
Дескриптор ширины 320w Реальная ширина изображения в пикселях
Дескриптор плотности 1.5x Плотность пикселей (для ретина-дисплеев)

Примеры для разных сценариев:

<!-- Для ретина-дисплеев --> <img srcset="standard.jpg 1x, retina.jpg 2x" src="standard.jpg" alt="Изображение для ретина-экранов"> <!-- Адаптивное изображение с разными размерами --> <img srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1280w" sizes="(max-width: 480px) 100vw, 640px" src="medium.jpg" alt="Адаптивное изображение"> <!-- Современные форматы с фолбэком --> <picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Современные форматы изображений"> </picture>

Рекомендации по использованию:

  • Всегда указывайте атрибут src как фолбэк
  • Используйте sizes для адаптивных изображений
  • Оптимизируйте изображения для каждого размера
  • Для ретина-дисплеев используйте 2x плотность
  • Тестируйте на реальных устройствах

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

<img srcset="small.webp 320w, medium.webp 640w, large.webp 1280w" sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw" src="medium.jpg" alt="Оптимизированное изображение" loading="lazy" decoding="async">

Ошибки, которых следует избегать:

<!-- Плохо: отсутствует src --> <img srcset="image-320w.jpg 320w" alt="Нет фолбэка"> <!-- Плохо: несоответствие размеров --> <img srcset="tiny.jpg 2000w, huge.jpg 500w" src="huge.jpg" alt="Неправильные дескрипторы"> <!-- Плохо: избыточные варианты --> <img srcset="img1.jpg 100w, img2.jpg 101w, img3.jpg 102w" src="img1.jpg" alt="Слишком похожие варианты">

Ограничения и совместимость:

  • Поддерживается всеми современными браузерами
  • Не поддерживается в IE11
  • Для сложных сценариев используйте элемент <picture>
  • Требует точного указания размеров изображений

Примечание: Атрибут srcset - мощный инструмент для адаптивной загрузки изображений. Для максимальной эффективности сочетайте его с современными форматами изображений (WebP, AVIF), lazy loading и правильной настройкой серверного сжатия.