Как правильно работать с отзывчивыми изображениями
Отзывчивые изображения уже давно стали частью современного вэба. В этой статье разберем как создавать такие изображения использую srcset
Если вы работаете с отзывчивыми изображениями (изображениями в HTML, имеющими различные версии для различных ситуаций) и для этого используете разные версии одной и той же картинки, то всё, что вам нужно, — атрибут srcset в <img>. Посмотрите, какой простой синтаксис:
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
Кроме того, тут не только проще синтаксис, но и работает это лучше, чем <picture> с <source> и явными атрибутами типа media (поговорим об этом немного позже). Кроме того, в будущем всё может стать куда лучше, когда в браузерах появятся настройки и улучшения.
Прим. перев. Оригинальная статья написана довольно давно, современные браузеры уже поддерживают эту технологию.
При использовании srcset браузер сам выбирает, какое изображение подойдёт больше
В примере выше мы просто сообщаем браузеру, какие изображения доступны и какого они размера. Всю работу по выбору наиболее подходящего из них делает браузер.
Мэтт Маркус продемонстрировал, как браузер находит наиболее подходящее изображение. Так, например, при использовании устройства с шириной экрана 320 пикселей (1х) и набора картинок: small.jpg (шириной 500 px), medium.jpg (1000 px) и large.jpg (2000 px), браузер будет размышлять следующим образом:
Давай-ка я кое-что посчитаю:500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25Окей, раз я использую дисплей 1х, 1.5625 подойдёт мне лучше всего. Оно немного большевато, но лучше, чем все остальные, которые ещё больше.
Теперь другой браузер посещает сайт. У него такой же дисплей, но плотность пикселей больше в 2 раза. Браузер проделает те же вычисления, но сделает выбор по-другому:
Раз уж используется 2х дисплей, мне придётся откинуть вариант с 1.5625, потому что такое изображение для меня слишком маленькое и, скорее всего, будет плохо выглядеть. Поэтому выберу картинку с показателем 3.125.
Удобно, не правда ли? Вы позволяете браузеру самому выбрать наиболее подходящую картинку, вместо того, чтобы пытаться сделать это самостоятельно.
Браузеры со временем станут умнее
Уже существует множество плюсов при использовании srcset, к тому же со временем всё станет ещё лучше. Думайте о srcset как о подсказке или просто дополнительной информации, которая поможет браузеру выбрать изображение. В идеале он сможет делать то, что считает нужным, например, выбирать изображения, основываясь на предпочтениях пользователя, или управлять потреблением трафика.
При использовании <picture> с явными источниками браузер делает так, как вы ему скажете, а не принимает решения сам. Конечно, можно заставить <picture> действовать так же, как и srcset, но получится более громоздко и не будет пространства для дальнейшего улучшения.
Поговорим ещё о sizes
Теперь разберём атрибут sizes. Он является необязательным и имеет значение по умолчанию sizes="100vw". Это значит, что картинка будет занимать всю ширину окна.
Конечно, можно задать всё вручную. Использовать sizes, чтобы точно соответствовать макету CSS и сообщать браузеру, насколько большой должна быть картинка на каждом размере экрана в соответствии с указаниями в дизайне. На самом деле, это может оказаться сложно и даже немного опасно, потому что перенос CSS составляющей в разметку обычно добром не кончается. В идеале всё автоматизируется или переносится на сторону сервера.
Некоторые «типичные» атрибуты sizes могут быть полезными. Возможно, что-то вроде этого разумно использовать на стандартных сайтах-блогах:
sizes="(min-width: 800px) 50vw, 100vw"
Пояснение: «Если окно браузера больше 800 пикселей, то изображение будет отображаться примерно на половину окна. Если окно меньше, изображение будет занимать всю ширину».
Почему мы говорим об этом?
Подавляющее большинство отзывчивых изображений используются не в «художественных целях». Для художественного оформления отлично подойдёт и <picture>. В большинстве случаев отзывчивые изображения будут использоваться так: «У меня есть несколько версий этой картинки. Вот они — выберите нужную».
Это очень запутанная тема. О ней нужно думать и писать, чтобы идея отзывчивых изображений укоренилась в умах фронтенд-разработчиков.
Тим Евко создал WordPress-плагин для отзывчивых изображений. Он использует возможности WordPress для создания уменьшенных версий изображений. При щелчке по нужному изображению выводится код для вставки отзывчивого изображения. На данный момент плагин использует <picture>, потому что фронтенд-разработчики используют его чаще, чем srcset. Тим Евко в данном материале пытается разобраться, как он может улучшить свой плагин.
Когда нам этого ожидать?
На самом деле, будущее уже здесь, и все современные браузеры умеют работать с srcset. Некоторые из них в том числе позволяют пользователю самому выбрать качество загружаемых изображений, тем самым снижая потребление трафика.