Интересное в HTML. Тег <img> атрибут srcset

Поехали

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

URL изображений в атрибуте srcset указываются через запятую, и рядом с каждым из URL необходимо указать дескриптор, который помогает браузеру определить какое изображение использовать при рендере веб-страницы.

Пример:

<img src="fallback.jpg" srcset="img-100x100.jpg 100w, img-500x500.jpg 500w">

Атрибут srcset всегда используется в сочетании с атрибутом src. т.к. атрибут src является обязательным. В данном случае fallback.jpg будет использован только тогда, когда srcset не может отработать нормально.

Разберемся чуть подробнее с форматом

img-100x100.jpg 100w

На первом месте стоит URL изображения. Далее располагается дескриптор отделенный пробелом. Дескриптор бывает двух видов [число]w или [число]x

[чиcло]w - явно указывает реальную ширину данного изображения. Браузер не может знать реальную ширину изображения до тех пор пока его не загрузит, поэтому и нужна такая возможность указывать браузеру эту величину заранее.

[чиcло]x - указывает DPR (device pixel ratio) при котором следует использовать это изображение. DPR - это величина которая отражает сколько физических пикселей приходится на один виртуальный пиксель.

И все таки как это работает?

По факту, браузер пытается подобрать такую плотность пикселей изображения которая обеспечит наилучшее восприятие контента. Считает он это очень нехитрым способом.

Допустим мы открываем картинку в браузере на iPhone 12 на всю ширину экрана.

<img src="fallback.jpg" srcset="img-540x540.jpg 500w, img-800x800.jpg 800w, img-1440x1440.jpg 1440w">

У IPhone 12 DPR равен 3, т.е. на один виртуальный пиксель приходится 3 физических.

iPhone 12 в ширину имеет 360 виртуальных пикселей и 1080 физических. Браузер делает следующее вычисление:

Проверяет img-540x540.jpg 500w
500 физ. пикселей / 360 вирт. пикселей = 1,39 это меньше 3 DPR, не подходит

Проверяет img-800x800.jpg 800w
800 физ. пикселей / 360 вирт. пикселей = 2,2 это меньше 3 DPR, не подходит

Пробует img-1440x1440.jpg 500w
1440 физ. пикселей / 360 вирт. пикселей = 4 это больше 3 DPR, это подходит

В итоге браузер выбирает изображение с шириной 1440 пикселей которое, очевидно, при DPR=3 будет смотреться лучше всего

Спасибо за ваше внимание)

Больше контента в моем Telegram канале https://t.me/dakotovblog