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

Описание

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

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

<picture> <source media="(min-width: 1200px)" srcset="large.jpg" sizes="50vw"> <source media="(min-width: 800px)" srcset="medium.jpg" sizes="75vw"> <img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w" sizes="100vw" alt="Пример изображения"> </picture>

Синтаксис sizes:

Формат Пример Описание
Фиксированный размер sizes="300px" Изображение всегда будет занимать 300px
Относительный размер sizes="50vw" 50% ширины вьюпорта
Медиа-запросы sizes="(min-width: 800px) 50vw, 100vw" Условные размеры для разных экранов
Расчетные значения sizes="calc(100vw - 40px)" Использование calc()

Пример с медиа-запросами:

<img src="fallback.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" sizes="(max-width: 600px) 90vw, (max-width: 1200px) 50vw, 30vw" alt="Адаптивное изображение">

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

  1. Браузер определяет текущие условия (размер экрана, плотность пикселей)
  2. Анализирует медиа-условия в sizes
  3. Вычисляет требуемую ширину изображения
  4. Выбирает наиболее подходящий вариант из srcset
  5. Загружает оптимальное изображение

Рекомендации:

  • Всегда используйте sizes с w-дескрипторами в srcset
  • Указывайте реалистичные размеры, соответствующие макету
  • Порядок медиа-запросов важен - от узких к широким или наоборот
  • Тестируйте на реальных устройствах с разными DPR
  • Используйте инструменты DevTools для проверки выбранного изображения

Отладка в браузере:

// Проверка выбранного изображения console.log(document.querySelector('img').currentSrc); // В Chrome DevTools: // 1. Откройте вкладку Network // 2. Установите throttling для эмуляции разных устройств // 3. Проверьте, какое изображение загружается

Ошибки и решения:

  • Проблема: Загружается слишком большое изображение
    Решение: Проверьте медиа-запросы и расчеты в sizes
  • Проблема: Не учитывается плотность пикселей
    Решение: Добавьте варианты с x-дескриптором
  • Проблема: Layout shift при загрузке
    Решение: Укажите явные размеры в CSS или атрибутах width/height