От автора: использование изображений и анимации в пользовательских интерфейсах стало обычным делом в современных веб-приложениях. Хотя эти разработки ориентированы на улучшение взаимодействия с пользователем вашего приложения, все может иметь неприятные последствия, если эти изображения не реагируют на все устройства.
Как разработчики, мы должны выполнять все необходимые требования. Но в большинстве случаев мы упускаем некоторые мелочи, которые могут иметь огромное значение, поскольку мы ищем решения на более высоком уровне.
Выбор между тегом picture и тегом img может быть таким крошечным решением, но вы сможете улучшить как пользовательский интерфейс, так и производительность, если сделаете правильный выбор. В этой статье рассмотрим разницу между тегами picture и img и что делает тег picture более полезным, чем img.
Почему тега img недостаточно для современных веб-приложений?
Как мы все знаем, тег img был одним из основных элементов HTML в течение значительного периода, и не было никаких сомнений в его простоте и удобстве использования.
Однако с развитием устройств с различными размерами экрана, разрешениями и сложными требованиями пользователей, начали возникать вопросы о его быстродействии и способности использоваться в приложениях с несколькими устройствами.
Все эти вопросы можно сгруппировать в два основных аспекта:
Переключение разрешения — проблемы с обслуживанием изображений меньшего размера для устройств с узким экраном.
Художественное направление — проблема отображения разных изображений на экранах разного размера.
Теперь давайте посмотрим, как были решены эти проблемы и какие дополнительные функции тега picture.
Переключение разрешения с использованием атрибутов srcset и sizes
Как я упоминал ранее, современные веб-дизайнеры часто используют изображения с высоким разрешением, чтобы привлечь внимание пользователей. Но, как разработчики, мы должны быть очень осторожны при выборе правильного элемента HTML.
Предположим, вы используете простой тег img для изображений с высоким разрешением. В этом случае одно и то же изображение используется на каждом устройстве, на котором работает ваше приложение, и это действительно приведет к проблемам с производительностью на устройствах с более низким разрешением экрана, таких как мобильные устройства.
Это может привести к увеличению времени загрузки изображений и частичной загрузке изображений сверху вниз.
Проблема с загрузкой изображений сверху вниз
Этот вопрос можно легко решить с помощью тега picture, используя атрибуты srcset и sizes.
<picture> <source srcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w" sizes="(min-width: 1280px) 1200px, (min-width: 768px) 400px, 100vw"> <img src="medium-car-image.jpg" alt="Car"> </picture>
Атрибут srcset принимает несколько изображений с соответствующей шириной в пикселях, и браузер использует эти значения для выбора между предоставленными изображениями. В приведенном выше примере есть 3 версии одного и того же изображения в 3 разных размерах.
Атрибут sizes определяет пространство, которое изображение будет занимать на экране. В приведенном выше примере изображение будет занимать 1200 пикселей, если минимальная ширина экрана составляет 1280 пикселей.
При этом рекомендуется не использовать тег picture только для переключения разрешения, поскольку то же самое может быть достигнуто с помощью обновленной версии тега img (который имеет больше поддержки браузера).
<img srcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w" sizes="(min-width: 1280px) 1200px, (min-width: 768px) 400px, 100vw" src="medium-car-image.jpg" alt="Car">
Но в большинстве случаев нам нужно одновременно обрабатывать и переключение разрешения, и художественное направление, и тег picture — лучшее решение. Итак, давайте посмотрим, как мы можем разрешить художественное направление с помощью тега picture.
Художественное направление с использованием медиа-атрибута
Основная идея художественного направления — отображать разные изображения в зависимости от размеров экрана устройства. В большинстве случаев изображение, которое великолепно выглядит на больших экранах, может обрезаться или выглядеть маленьким при переключении на мобильный.
Мы можем решить эту проблему, предоставив разные версии изображения для разных размеров экрана. Эти разные версии могут быть альбомными, портретными или любой другой версией одного и того же изображения.
С тегом picture мы можем легко добиться переключения разрешения, используя несколько тегов source внутри тега picture.
<picture> <source ....> <source ....> <source ....> </picture>
Затем мы можем использовать атрибут media для определения различных медиа-условий, в которых будут использоваться эти источники. Мы также можем использовать атрибуты srcset и sizes таким же образом, как мы обсуждали в предыдущем разделе.
В следующем примере показан полный пример использования художественного направления и переключения разрешения с помощью тега picture.
<picture> <source media="(orientation: landscape)" srcset="land-small-car-image.jpg 200w, land-medium-car-image.jpg 600w, land-large-car-image.jpg 1000w" sizes="(min-width: 700px) 500px, (min-width: 600px) 400px, 100vw"> <source media="(orientation: portrait)" srcset="port-small-car-image.jpg 700w, port-medium-car-image.jpg 1200w, port-large-car-image.jpg 1600w" sizes="(min-width: 768px) 700px, (min-width: 1024px) 600px, 500px"> <img src="land-medium-car-image.jpg" alt="Car"> </picture>
Если ориентация экрана — альбомная, браузер будет показывать изображения из первого набора изображений, а если ориентация — книжная, браузер будет использовать второй набор. В дополнение к этому, вы можете использовать атрибут media с параметрами max-width и min-width:
<picture> <source media="(max-width: 767px)" ....> <source media="(min-width: 768px)" ....> </picture>
Последний тег img предназначен для обратной совместимости с браузерами, которые не поддерживают теги picture.
Использование с частично поддерживаемыми типами изображений
С быстрым развитием технологий ежедневно появляются разные типы современных изображений. Некоторые из этих типов, такие как webp, svg и avif обеспечивают более высокий уровень взаимодействия с пользователем.
С другой стороны, в некоторых браузерах есть ограничения на эти современные типы изображений, и все будет иметь неприятные последствия, если мы не будем использовать совместимые типы изображений.
Но мы можем легко решить эту проблему, используя тег picture, поскольку он позволяет нам включать в него несколько источников.
<picture> <source srcset="test.avif" type="image/avif"> <source srcset="test.webp" type="image/webp"> <img src="test.png" alt="test image"> </picture>
Приведенный выше пример включает в себя три типа изображений из avif, webp и png форматов. Сначала браузер попытается использовать avif, а в случае неудачи — webp. Если браузер не поддерживает оба из них, он будет использовать изображение png.
С тегом picture все стало еще интереснее, когда Chrome объявил, что «DevTools предоставит две новые эмуляции во вкладке «Рендеринг» для имитации частично поддерживаемых типов изображений».
Начиная с Chrome 88, вы можете использовать Chrome DevTools для проверки совместимости браузера с типами изображений.
Использование Chrome DevTools для эмуляции совместимости изображений
Заключение
Хотя мы говорим о том, почему тег picture более полезен, чем тег img, я уверен, что тег img не умер и будет использоваться впредь.
Если мы будем с умом использовать атрибуты srcset и size, мы сможем получить от тега img максимум. Например, мы можем разрешить переключение разрешения только с помощью тега img.
С другой стороны, мы можем использовать тег picture, чтобы легко достичь переключения разрешения и художественного направления, используя медиа-запросы и другие предоставленные атрибуты.
Возможность работы с частично поддерживаемыми типами изображений и поддержка Chrome DevTools могут быть признаны дополнительными плюсами для тега picture.
Однако у обоих этих элементов есть свои плюсы и минусы. Поэтому мы должны тщательно продумать и использовать наиболее подходящий элемент, исходя из наших требований.
Спасибо за внимание!!!
Автор: Chameera Dulanga
Источник: //blog.bitsrc.io
Редакция: Команда webformyself.