Адаптивный дизайн стал жизненно важным в эпоху мобильного просмотра, и изображения стали основным источником разочарования для дизайнеров, которые хотят повысить скорость и функциональность своих сайтов. Вскоре, однако, все это изменится, так как элемент <picture> в HTML5 взлетит, начиная с конца этого года.
Новый элемент <picture> будет действовать как фильтр для существующего тега <img>. Это позволит старым браузерам по-прежнему загружать изображения <img>, даже если они не распознают тег <picture>, но также позволит новым браузерам фильтровать контент на основе различных условий. По словам Скотта Гилбертсона в его посте «Полное руководство по элементу» :
<picture>Элемент выглядит немного как HTML5<audio>и<video>теги. Фактический<picture>тег действует как элемент контейнера для<source>элементов, который затем указывает на фактические изображения, которые вы хотите загрузить.Большая разница в том, что на
<picture>самом деле не загружает ваше изображение. Для этого вам нужен<img>тег. Таким образом, браузер оценивает все различные атрибуты, которые вы указали в своем<picture>блоке, выбирает лучшее изображение, а затем загружает изображение<img>внутрь вашего<picture>тега.
Тег <picture> будет полезен в ряде случаев : например, настройка загружаемого изображения в зависимости от разрешения экрана пользователя. Гилбертсон демонстрирует на следующем примере:
Допустим, мы пытаемся создать более адаптивную версию моей страницы книги «Адаптивный веб-дизайн» . Допустим, у нас есть два изображения обложки книги
cover1x.jpg— это изображение с нормальным разрешением иcover2x.jpgто же изображение, но с гораздо более высоким разрешением.Давайте продолжим и сделаем все для будущего , добавив третье изображение,
cover4x.jpgдля обработки тех мониторов 4K +, которые находятся на расстоянии всего нескольких лет от каждого рабочего стола. Таким образом, с тремя изображениями в трех разрешениях наш<picture>код будет выглядеть так:<picture> <source srcset=”cover1x.jpg 1x, cover2x.jpg 2x, cover4x.jpg 4x”> <img src=”cover1x.jpg” alt=”Responsive Web Design cover”> </picture>Здесь у нас есть простой
<picture>тег с одним<source>тегом и<img>тегом, который дублирует старые браузеры. Внутри<source>тега мы использовалиsrcsetатрибут, чтобы сказать браузеру (или «пользовательскому агенту» в спецификации), если плотность пикселей на экране равна 1x, а затем загрузитьcover1x.jpg; если плотность экрана равна 2x, загрузите изображение с более высоким разрешениемcover2x.jpg. Наконец, если плотность экрана 4x, захватитеcover4x.jpg.
Тем не менее, в браузере есть последнее слово, по которому загружается изображение, поскольку оно может содержать больше информации о потребностях и предпочтениях пользователя. Гилбертсон объясняет:
Может случиться так, что, несмотря на наличие экрана с высоким разрешением, пользователь явно дал указание браузеру (через настройку предпочтений) не загружать большие изображения через 3G.
Разрешение экрана, в конце концов, является лишь одним из факторов при выборе подходящего изображения для загрузки. Как разработчики, у нас нет (и никогда не будет) всей информации, которую делает браузер, поэтому окончательное решение остается за браузером. Как я уже говорил, это хорошо; именно так и должно быть.
Элемент <picture> должен работать в стабильных версиях Firefox и Chrome к концу этого года, включая мобильные версии этих браузеров. Opera, вероятно, поддержит его и в то время.
Дополнительную информацию можно найти в «Полном руководстве по элементу» Гилбертсона . Гилбертсон также написал статью для Ars Technica об истории разработки тега .
Элемент <picture> должен решить многие из текущих проблем с адаптивными изображениями и обеспечить более быстрые и интуитивно понятные веб-страницы.