Руководство для начинающих по адаптивным изображениям в HTML

Адаптивное изображение — это изображение, которое адаптируется к различным характеристикам устройства. Если все сделано правильно, адаптивные изображения могут улучшить производительность и удобство сайта для пользователей.

В этой статье рассказывается, как можно создавать адаптивные изображения в HTML с помощью исходный набор и элемент изображения.

Почему вы должны использовать адаптивные изображения?

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

Согласно с Статистика, более 90 процентов пользователей Интернета по всему миру выходят в Интернет с помощью своего мобильного телефона. Большинство веб-страниц в Интернете содержат изображения, и эти изображения являются одним из показателей, используемых для измерения веб-производительности. Чтобы повысить производительность, вам нужно оптимизировать изображения, сделав их адаптивными.

Как создавать адаптивные изображения в HTML

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

Связанный: Как сделать ваш сайт отзывчивым и интерактивным с помощью CSS и JavaScript

Использование srcset

Стандарт HTML позволяет указать только один файл изображения. Если вы хотите отображать разные изображения в зависимости от размера устройства, вам следует использовать исходный набор.

Синтаксис:

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

 src="милый кот.jpg"
 alt="Милый кот">

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

Использование srcset с размерами

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

Теперь вы можете переписать тег выше следующим образом.

размеры = "(максимальная ширина: 600 пикселей) 480 пикселей,
 800 пикселей"
 src="милый кот.jpg"
 alt="Милый кот">

размеры состоит из медиа-условия, в этом примере это (max-width: 600px), которое представляет область просмотра ширина, пробел и ширина слота (480 пикселей), указывающая пространство, которое изображение заполнит, если условие мультимедиа истинный.

Связанный: Как использовать медиа-запросы в HTML и CSS для создания адаптивных веб-сайтов

Здесь браузер сначала проверит ширину устройства и сравнит ее с состоянием мультимедиа. Если условие истинно, он проверит ширину слота и загрузит изображение из исходный набор той же ширины или следующего большего размера.

Обратите внимание, что вы также включаете источник который предоставляет изображение для возврата в браузерах, которые не поддерживают исходный набор а также размеры.

исходный набор также позволяет вам обслуживать изображения с разным разрешением, используя x-дескрипторы.

 src="милый-кот-низкий.jpg"
 alt="Милый кот">

В этом примере, если разрешение устройства составляет два пикселя устройства на CSS или более, браузер загрузит изображение cute-cat-high1.jpg.

Аппаратные и программные пиксели

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

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

 src="милый-кот-низкий.jpg"
 alt="Милый кот">

С использованием

это HTML-элемент, который содержит несколько элементы, содержащие разные исходные файлы и элемент. Пока делает изображения отзывчивыми, показывая разные размеры одного и того же изображения, позволяет фактически изменить отображаемое изображение.

Синтаксис:

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

Как и в первом подходе, содержит атрибут мультимедиа, который можно использовать для предоставления условия мультимедиа. Например, браузер отобразит «cute-cat-480w.jpg», если ширина области просмотра составляет 639 пикселей или меньше. То исходный набор содержит путь к файлу изображения, который вы хотите отобразить, и источник задает изображение по умолчанию.

Связанный: 7 новых возможностей CSS для создания адаптивного веб-сайта

Резервный вариант для формата изображения WebP

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

Зачем создавать адаптивные изображения в HTML, а не в CSS?

CSS предлагает надежные варианты обработки адаптивных изображений. Так почему бы не использовать его? Браузер предварительно загружает изображения перед анализом CSS. Таким образом, прежде чем JavaScript вашего сайта определит ширину области просмотра, чтобы внести соответствующие изменения в изображения, исходные изображения уже были предварительно загружены. В связи с этим лучше обрабатывать адаптивные изображения с помощью HTML.

Стремитесь к наилучшему возможному качеству изображения

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

Принципы адаптивного веб-дизайна

Веб-дизайнеры уже много лет отстаивают адаптивный дизайн, но что это такое и как с его помощью создавать превосходные веб-страницы?

Читать дальше

Об авторе