Атрибут imagesizes тега <link>

Описание

Атрибут imagesizes для тега <link> используется вместе с rel="preload" и as="image" для предварительной загрузки адаптивных изображений с оптимальным размером. Он указывает браузеру, какие размеры изображения потребуются в различных условиях отображения.

Пример использования:
<!-- Предзагрузка адаптивного изображения --> <link rel="preload" as="image" href="large.jpg" imagesrcset="large.jpg 1200w, medium.jpg 800w, small.jpg 400w" imagesizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px">

Синтаксис и значения:

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

Обязательные сочетания атрибутов:

  • Всегда используется с rel="preload" и as="image"
  • Требует наличия атрибута imagesrcset
  • Может использоваться с media для дополнительного уточнения

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

<link rel="preload" as="image" href="hero-large.jpg" imagesrcset="hero-small.jpg 600w, hero-medium.jpg 900w, hero-large.jpg 1200w" imagesizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px" media="(min-width: 300px)">

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

  • Используйте для критически важных изображений "выше сгиба"
  • Соответствие между imagesizes и CSS-размерами изображения
  • Оптимизируйте imagesrcset для реально используемых размеров
  • Проверяйте в DevTools > Network, что загружается правильная версия

Ошибки и проверка:

<!-- Неправильно: отсутствует imagesrcset --> <link rel="preload" as="image" href="img.jpg" imagesizes="100vw"> <!-- Неправильно: несоответствие с CSS --> <!-- HTML: imagesizes="400px" --> <!-- CSS: width: 800px --> <!-- Правильно: полное соответствие --> <link rel="preload" as="image" href="img.jpg" imagesrcset="img-400.jpg 400w, img-800.jpg 800w" imagesizes="(max-width: 600px) 400px, 800px">

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

  • Сокращает время отображения LCP (Largest Contentful Paint)
  • Позволяет браузеру выбрать оптимальный размер изображения
  • Уменьшает трафик за счет загрузки только нужного размера
  • Особенно полезно для адаптивных дизайнов

Примечание: Атрибут imagesizes - мощный инструмент для оптимизации загрузки изображений в современных браузерах. Для комплексного решения рассмотрите использование элементов <picture> вместе с предзагрузкой и lazy loading.