Статьи

Адаптивные изображения и элемент изображения

Адаптивный дизайн стал жизненно важным в эпоху мобильного просмотра, и изображения стали основным источником разочарования для дизайнеров, которые хотят повысить скорость и функциональность своих сайтов. Вскоре, однако, все это изменится, так как элемент <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> должен решить многие из текущих проблем с адаптивными изображениями и обеспечить более быстрые и интуитивно понятные веб-страницы.