Адаптивное изображение — это изображение, которое адаптируется к различным характеристикам устройства, на котором оно отображается. Если все сделано правильно, адаптивные изображения могут повысить производительность веб-сайта и разнообразить ваш пользовательский опыт.
В этой статье рассказывается, как можно создавать адаптивные HTML-изображения с помощью srcset и элемент Картина. Проверять Код на ходу: лучшие приложения для редактирования HTML для Android.
Почему вы должны использовать адаптивные изображения?
Когда инженер-программист создавал веб-страницы, он не думал о том, как браузеры обрабатывают адаптивные изображения. Ведь зачастую пользователи заходили в Сеть только с настольных или портативных компьютеров. Конечно, сегодня это не так.
в соответствии с Statista Более 90 процентов пользователей Интернета в мире просматривают веб-страницы с помощью своих мобильных телефонов. Большинство веб-страниц содержат изображения, и эти изображения являются одним из показателей, используемых для измерения веб-производительности. Чтобы повысить производительность, вам нужно улучшить изображения, сделав их отзывчивыми. Проверять Лучшие популярные инструменты веб-разработки, которые использует каждый профессионал.
Как создавать адаптивные HTML-изображения
Адаптивный веб-дизайн означает, что не только макеты могут меняться в зависимости от характеристик используемого устройства, но и контент. Например, на мониторах с высоким разрешением (2x) также требуется графика высокого разрешения для обеспечения уровня резкости. Изображение со значением ширины 50% может хорошо работать только тогда, когда браузер имеет ширину 800 пикселей, но оно будет иметь большое влияние на узкий телефон, и проблема потребления высокой пропускной способности все еще будет существовать, когда размер будет уменьшен до размера маленького. экраны.
Особенности товара IMG большое значение; Поскольку он помогает загружать, декодировать и отображать контент, современные браузеры совместимы с рядом различных форматов изображений. Встраивание изображений, которые работают на разных устройствах, не то же самое, что и для настольных компьютеров, и требуется лишь несколько незначительных изменений, чтобы произвести хорошее впечатление.
Вы можете работать с адаптивными изображениями под двумя углами — либо представляя одно и то же изображение в разных размерах, либо представляя разные изображения в соответствии с характеристиками дисплея. вы можете использовать или . Эти два параметра обрабатывают адаптивные изображения по-разному, но все они отображают одно изображение из определенных вариантов в зависимости от набора правил.
использовать srcset
Функция позволяет вам Стандартный HTML, указав только один файл изображения. Если вы хотите отобразить другое изображение в зависимости от размера устройства, вы должны использовать srcset.
синтаксис:
<img srcset=”” src=”” alt=””>
Функция позволяет вам srcset Предоставляя дополнительные исходные файлы, браузер выберет изображение, которое выглядит оптимальным для используемого размера экрана.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” src=”cute-cat.jpg” alt=”A cute cat”>
Выдумал srcset Он состоит из трех частей: имя файла изображения, в котором указывается путь к исходному изображению, область и внутренняя или истинная ширина изображения.
Используйте srcset с размерами
Проблема заключается в использовании srcset В этом вы не можете контролировать, какое изображение браузер выбирает для отображения. Объединение srcset и размеров решает эту проблему. Размеры определяются набором медиатерминов, указывающих, что изображение имеет оптимальный размер.
Теперь вы можете повторно ввести тег выше следующим образом.
<img srcset=”cute-cat.jpg 480w, cute-cat.jpg 800w” sizes=”(max-width: 600px) 480px, 800px” src=”cute-cat.jpg” alt=”A cute cat”>
Размеры состоят из состояния мультимедиа, в этом примере (max-width: 600 пикселей), которое представляет ширину порта, площадь и ширину слота (480 пикселей) с объемом пространства, которое изображение заполнит, если медиа состояние истинно.
Здесь браузер сначала проверит рендеринг устройства и сравнит его с состоянием носителя. Если условие истинно, он проверит ширину апертуры и загрузит изображение srcset Та же ширина или следующее большее изображение.
Обратите внимание, что вы также включаете SRC Который предоставляет изображение для ссылки на браузеры, которые не поддерживают srcset и размеры.
Разрешаю тебе srcset Также представляет изображения в разных разрешениях с помощью дескрипторов. x.
<img srcset=”cute-cat-high.jpg, cute-cat-high1.jpg 1.5x, cute-cat-high2.jpg 2x” src=”cute-cat-low.jpg” alt=”A cute cat”>
В этом примере, если устройство имеет разрешение 1 пикселя на CSS или более, браузер загрузит изображение cute-cat-highXNUMX.jpg.
Атрибут srcset улучшает поведение элемента img, упрощая предоставление нескольких файлов изображений для различных аппаратных функций. Как и в случае с image-set, исходная функция CSS, srcset Браузер имеет право выбрать лучшее изображение на основе характеристик устройства, например, используя изображение 2x на экране 2x и, возможно, в будущем изображение 1x на устройстве 2x при использовании сети с ограниченной пропускной способностью.
Аппаратные и программные пиксели
Проблема с этим решением заключается в том, что изображения реагируют только с точки зрения плотности пикселей устройства. Это отношение аппаратных пикселей к программным или CSS пикселям. Аппаратный пиксель — это фактическая точка света на экране, а программный пиксель или пиксель CSS — это единица измерения. Плотность пикселей определяет разрешение устройства.
При рендеринге адаптивных изображений учитывайте не только разрешение; Размер экрана тоже имеет значение. В противном случае вы можете в конечном итоге загружать большие изображения или чрезвычайно пиксельные изображения без необходимости.
<img srcset=”cute-cat-high1–480w.jpg 1.5x, cute-cat-high2–640w.jpg 2x” src=”cute-cat-low.jpg” alt=”A cute cat”>
Использование
Атрибут Это HTML-элемент, который содержит множество элементов. который содержит различные исходные файлы и элемент . делая Изображения отвечают, предлагая разные размеры одного и того же изображения, что позволяет вам фактически изменить отображаемое изображение.
синтаксис:
<picture> <source media=”” srcset=””> <source media=”” srcset=””> <img src=”” alt=””> </picture>
Рассмотрим ситуацию, когда у вас есть большое пейзажное фото. Изображение отображается и выглядит пропорционально на рабочем столе, но на мобильных устройствах оно настолько сжимается, что элементы изображения становятся маленькими. Не отвечающее изображение способствует плохому взаимодействию с пользователем. используя атрибут . , вы можете указать своему браузеру переключаться на крупный план при использовании мобильного телефона.
<picture> <source media=”(max-width: 639px)” srcset=”cute-cat-480w.jpg”> <source media=”(min-width: 640px)” srcset=”cute-cat-640w.jpg”> <img src=”elva-640w.jpg” alt=”A cute cat”> </picture>
Как и в первом методе, атрибут .содержит содержит атрибут мультимедиа, который можно использовать для предоставления состояния мультимедиа. Например, браузер отобразит «cute-cat-480w.jpg», если область просмотра составляет 639 пикселей или меньше. сохранить атрибут srcset Путь к файлу изображения, который вы хотите отобразить, указан SRC изображение по умолчанию.
Назад к WebP Формат изображения
Другая вещь, с которой вы имеете дело, - это функция Хорошо сделать резервную копию для современных форматов изображений, таких как WebP. Изображения WebP обладают высокой производительностью, часто имеют небольшой размер и обеспечивают быструю работу в Интернете. Таким образом, вы можете решить использовать их на своих веб-сайтах. Проблема, с которой вы можете столкнуться, заключается в том, что не все браузеры поддерживают изображения WebP. с .темой Вы не столкнетесь с этой проблемой, так как ваш браузер может загрузить альтернативное изображение, если он не поддерживает WebP.
<picture> <source type=”image/webp” srcset=”cute-cat.webp”> <img src=”cute-cat.jpg” alt=”A cute cat.”> </picture>
Почему вы должны создавать изображения гребней в HTML, а не в CSS?
CSS предоставляет мощные возможности для обработки адаптивных изображений. Почему бы вам не использовать его тогда? Веб-браузер предварительно загружает изображения перед анализом CSS. Таким образом, прежде чем javascript вашего сайта обнаружит область просмотра для внесения соответствующих изменений в изображения, исходные изображения будут предварительно загружены. По этой причине лучше всего работать с адаптивными изображениями в HTML.
Стремитесь к максимально возможному качеству изображения
Вы видели, как можно создавать адаптивные HTML-изображения с атрибутом . و В этой статье. Доставка адаптивных изображений обычно требует учета размера и разрешения изображения, поскольку они относятся к размеру экрана. При неправильном выполнении может пострадать качество изображения. Обязательно выберите изображение, которое наилучшим образом использует минимум ресурсов. Проверять Как открывать и конвертировать изображения HEIC на Android.
