Проблема адаптивных (отзывчивых) изображений будоражит умы веб-разработчиков уже давно. Это задача, когда нужно показывать большую картинку на больших экранах и маленькую на маленьких. Такая проблема решается через HTML атрибуты srcset и sizes, а также тег <picture>. Ниже рассмотрим их подробнее

• srcset — это замена атрибута src — он приоритетнее, чем ! src
• src атрибут должен быть всегда указан! Это нужно для поисковых роботов.
• src будет использован, только если браузер не поддерживает . srcset
• Firefox и Chrome обрабатывают srcset чуть-чуть по-разному, но общая логика сохраняется. Важно: разные браузеры могут по-разному обрабатывать изображения. Например, Firefox может автоматически уменьшать размер картинки при уменьшении ширины экрана, а Chrome, если загрузил больший размер, будет использовать его и на меньших разрешениях. Алгоритмы выбора подходящего размера изображения также могут немного отличаться.

srcset — содержит сет УРЛов на картинки (через запятую), чтобы браузер мог выбрать наиболее подходящий вариант в зависимости от параметров экрана устройства, с которого просматривается страница.

В srcset можно указать один или несколько URL.

В srcset подразумевается указывать разные размеры одной и той же картинки. Можно указать и разные, но логика его работы подразумевает одну и ту же картинку.

Каждая строка в списке должна содержать УРЛ и дескриптор. Если никакой дескриптор не указан, то берется по умолчанию — 1x.

Дескриптор может быть двух типов:

• Физическая ширина картинки в пикселях (actual width). Например 600w, 1000w.
• Плотность пикселей устройства (display density) — DPR (device pixel ratio), например 2x, 3x.

Дескриптор — это инструкция для браузера. Он помогает браузеру выбрать правильный URL из набора изображений, потому что браузер заранее ничего не знает о картинке, которая находится по этому URL. Благодаря дескриптору браузер понимает, какая у картинки ширина или для какого DPR она подходит.

Синтаксис srcset имеет следующий вид:

Как это работает на примере:

В этом примере картинка full.jpg не будет использоваться, потому что есть атрибут srcset — браузер выберет наиболее подходящее изображение из srcset.

Какую картинку выберет браузер?

• Если у вашего устройства DPR=1:
• image-640.jpg - если ширина экрана > 0px и <= 640px.
• image-960.jpg - если ширина экрана > 640px и <= 960px.
• image-1200.jpg - если ширина экрана > 960px.
• Если у вашего устройства DPR=2 (подходящая картинка будет в 2 раза больше ее физической ширины):
• image-640.jpg - если ширина экрана > 0px и <= 320px (640/2).
• image-960.jpg - если ширина экрана > 320px и <= 480px (960/2).
• image-1200.jpg- если ширина экрана > 480px.

Как это работает на примере:

Какую картинку выберет браузер?

• image-640.jpg— если DPR устройства = 1.
• image-1280.jpg — если DPR устройства = 2.
• image-1920.jpg — если DPR устройства = 3.

На самсунгах и других смартфонах, часто DPR доходит до 4!

Примеры поиграться:

https://imagekitio.github.io/responsive-images-guide/srcset-density.html (DPR) →

Если изображение занимает только часть ширины экрана, использовать srcset без sizes — плохая идея. Браузер не знает, как выглядит макет страницы, и будет думать, что картинка занимает всю ширину экрана. В итоге он загрузит изображение большего размера, чем нужно.

Так стоп! Что? Браузер не знает о лейауте?

Можно подумать, что браузер может узнать ширину картинки из CSS-стилей. Но есть нюанс: на момент парсинга тега IMG CSS-стили еще не обработаны, а макет страницы не построен. Если браузер будет ждать, пока все стили будут применены, это задержит загрузку изображений.

Если для картинки не указаны никакие размеры в css, то sizes также ограничит размер картинки, как это делает атрибут width.

Если мы используем для картинки CSS-свойство max-width: 100%, оно перебивает значение атрибута sizes.

Что это значит? Если ширина картинки, указанная в sizes, больше ширины ее родительского элемента, то ширина картинки будет равна ширине родительского элемента (из-за max-width: 100%).

sizes— это дополнение к srcset, которое помогает браузеру выбрать оптимальный размер изображения.

sizes содержит список элементов (через запятую), где каждый элемент описывает размер изображения по отношению к ширине экрана (области просмотра).

Использование sizes дает браузеру дополнительную информацию, чтобы правильно выбрать подходящую картинку из srcset и начать ее загрузку, как только он увидит тег <img>, не дожидаясь, парсинга css стилей.

Синтаксис:

Обратите внимание, что у последнего размера нет медиа-условия — это значение по умолчанию. Оно будет использоваться, когда ни одно из предыдущих медиа-условий не подошло.

Будьте внимательнее к порядку объявления проверок, потому что браузер игнорирует все следующие проверки после первой успешной.

Элементы в sizes могут иметь:

• медиа-условие — например, (max-width: 300px) — оно описывает ширину области просмотра. (max-width: 300px) означает, что указанный размер подходит для ширины экрана от 0 до 300 CSS пикселей (включительно). Это похоже на медиа-запрос, но с некоторыми ограничениями. Вы не можете использовать screen или print.
• Ширина картинки для указанного медиа-условия. Для указания ширины можно использовать разные велечины (px, em, vw), только не %. Подробнее о единицах измерения ниже.

Рассмотрим такой пример:

• Если ширина области просмотра превышает 900px, картинка занимает фиксированную ширину 225px.
• До 900px картинка занимает 33vw, т. е. 33% от ширины окна просмотра.
• До 700px, картинка занимает 50vw, т. е. 50% от ширины окна просмотра.
• До 400px, картинка занимает 100vw, т. е. всю ширину окна просмотра.

На основе этих данных браузер выберет одну из картинок из сета srcset (включая все проверки с DPR — см описание srcset).

Вот пример: https://imagekitio.github.io/responsive-images-guide/srcset-sizes.html →

Ниже показан весь список возможных единиц измерения, которые можно использовать в атрибуте sizes.

При загрузке страницы, браузер начинает загрузку изображений до загрузки и интерпретации CSS и JavaScript. Такая техника уменьшает время загрузки страницы, в среднем, на 20%. Но она не подходит для создания адаптивных изображений, для этого и был создан srcset атрибут.

Например, невозможно было бы загрузить элемент <img>, затем определить ширину экрана при помощи JavaScript и динамически изменить URL картинки. Изначальное изображение было бы уже загружено (или было бы отправлено к загрузке) к моменту загрузки его меньшей версии.

Ссылка на оригинал статьи — https://wp-kama.ru/id_13564/atributy-scrset-sizes.html →