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

Описание

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

Пример использования:
<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 600px) 480px, (max-width: 1000px) 768px, 1200px" src="large.jpg" alt="Адаптивное изображение">

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

Компонент Пример Описание
Медиа-запрос (max-width: 600px) Условие для определенного размера экрана
Размер изображения 480px Ширина изображения при выполнении условия
Размер по умолчанию 1200px Используется, если ни одно условие не выполнено

Практические примеры:

<!-- Простой пример --> <img srcset="small.jpg 500w, large.jpg 1000w" sizes="(max-width: 800px) 500px, 1000px" src="large.jpg" alt="Пример изображения"> <!-- Пример с несколькими условиями --> <img srcset="mobile.jpg 320w, tablet.jpg 768w, desktop.jpg 1024w" sizes="(max-width: 480px) 320px, (max-width: 900px) 768px, 1024px" src="desktop.jpg" alt="Сложное адаптивное изображение"> <!-- Пример с относительными единицами --> <img srcset="col-1.jpg 300w, col-2.jpg 600w, col-4.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 25vw" src="col-4.jpg" alt="Изображение для сетки">

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

  • Всегда используйте с атрибутом srcset
  • Указывайте src как fallback для старых браузеров
  • Тестируйте на реальных устройствах с разными разрешениями
  • Сочетайте с loading="lazy" для оптимизации загрузки

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

<!-- Плохо: sizes без srcset --> <img src="image.jpg" sizes="100vw" alt="Неправильное использование"> <!-- Плохо: несоответствие размеров --> <img srcset="small.jpg 300w, big.jpg 600w" sizes="(max-width: 300px) 600px, 300px" src="big.jpg" alt="Обратная логика размеров">

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

  • Используйте современные форматы изображений (WebP, AVIF)
  • Указывайте реальные размеры изображений в srcset
  • Для фиксированных размеров используйте абсолютные значения (px)
  • Для адаптивных макетов - относительные (vw, %)

Примечание: Правильное использование атрибутов sizes и srcset может значительно улучшить производительность загрузки изображений на вашем сайте, особенно для мобильных пользователей. Всегда проверяйте результат в инструментах разработчика браузера.