При развертывании веб-сайта разработчики обычно используют одно и то же изображение для всех размеров экрана, что не является хорошей практикой, поскольку нельзя полагаться на браузер при изменении размера. В такой ситуации вступают в силу адаптивные изображения, гарантирующие загрузку изображения с подходящим размером и качеством для соответствующего устройства, тем самым увеличивая скорость загрузки страницы.
Как повысить скорость загрузки страницы с помощью адаптивных изображений?
Чтобы повысить скорость загрузки страницы с помощью адаптивных изображений, рассмотрите следующие методологии:
Пример 1. Увеличьте скорость загрузки страницы с помощью адаптивных изображений с использованием атрибута «srcset».
Самый удобный подход к применению адаптивных изображений — использовать « исходный набор Атрибут », накопленный в « <изображение> ' ярлык. Этот атрибут позволяет программисту указывать различные размеры изображения, и браузер автоматически выбирает наиболее подходящее изображение с учетом размера экрана пользователя. Ниже приводится демонстрация:
ДОКТИП html >
< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< заголовок >/ заголовок >
голова >
< тело >
< изображение источник '=' 'F:\JOB TECHNICAL ARTICLES\imgre.png' все '=' «Отзывчивое изображение»
исходный набор '=' 'F:\JOB TECHNICAL ARTICLES\imgre.png 400w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
/>
тело >
HTML >
В этом коде:
- « исходный набор Включен атрибут, который каждый раз содержит путь к изображению и разную ширину.
- Таково, что изображение « F:\JOB TECHNICAL ARTICLES\imgre.png 400w » представляет путь изображения, имеющий ширину « 400 » пикселей.
- На основе этой информации браузер анализирует наиболее подходящее изображение для загрузки в зависимости от размера экрана пользователя, так что на меньших экранах отображаются меньшие изображения, тем самым экономя пропускную способность.
Выход
Пример 2. Увеличьте скорость загрузки страницы с помощью адаптивных изображений, указав различную плотность пикселей.
В этом примере путь к изображению будет указан вместе с различной плотностью пикселей для дисплеев с высоким разрешением. Этого можно достичь с помощью « исходный набор Атрибут », показанный ниже:
ДОКТИП html >< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< заголовок >/ заголовок >
голова >
< тело >
< изображение источник '=' 'F:\JOB TECHNICAL ARTICLES\imgre.png' все '=' «Отзывчивое изображение» исходный набор '=' 'F:\JOB TECHNICAL ARTICLES\imgre.png 1x, F:\JOB TECHNICAL ARTICLES\imgre.png 1.5x, F:\JOB TECHNICAL ARTICLES\imgre.png 2x'
/>
тело >
HTML >
В этом фрагменте кода трижды укажите путь к изображению с различной плотностью пикселей. Дело в том, что браузер выбирает наиболее подходящее изображение, чтобы обеспечить высочайшее качество на различных экранах.
Примечание: « 1x Пиксель — это значение по умолчанию, поэтому пользователь может выбирать, ассоциировать его с путем к изображению или нет.
Выход
Пример 3. Увеличьте скорость загрузки страницы с помощью адаптивных изображений, используя атрибут «размеры».
В некоторых ситуациях может существовать ограничение, при котором фактический размер изображения на экране отличается от ширины экрана. Для решения этой проблемы « размеры Атрибут «может использоваться для включения размера изображения в соответствии с медиа-запросами или фиксированного размера. Ниже приведена демонстрация кода:
ДОКТИП html >< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< заголовок >/ заголовок >
голова >
< тело >
< изображение источник '=' 'F:\JOB TECHNICAL ARTICLES\imgre.png' все '=' «Отзывчивое изображение» исходный набор '=' 'F:\JOB TECHNICAL ARTICLES\imgre.png 50w, F:\JOB TECHNICAL ARTICLES\imgre.png 800w, F:\JOB TECHNICAL ARTICLES\imgre.png 1200w'
размеры '=' «(макс. ширина: 800 пикселей) 100vw, 800 пикселей»
/>
тело >
HTML >
В этом блоке кода « размеры Атрибут «объединяет медиазапросы и размеры. Он таков, что заставляет браузер выбирать размер изображения в соответствии с шириной экрана пользователя. Это гарантирует, что изображение(я) не превысит целевую максимальную ширину.
Выход
Важные соображения при использовании атрибута «размеры»
Существуют некоторые ограничения в использовании « размеры Атрибут ” также указан ниже:
- При использовании нескольких медиа-запросов в « размеры » убедитесь, что выбран первый истинный медиа-запрос. Кроме того, убедитесь, что медиа-запросы упорядочены от наиболее конкретных к наименее конкретным.
- Атрибут «размеры» не поддерживает процентные размеры, поскольку браузер не знает, насколько шириной будет что-то, указанное в процентах, пока он не узнает ширину родительского элемента.
Пример 4. Увеличьте скорость загрузки страницы с помощью адаптивных изображений с помощью элемента «
« <изображение> » позволяет программисту отображать и развертывать несколько изображений на экранах разных размеров. Это полезно в тех случаях, когда содержимое различается в зависимости от устройства. Ниже приведена демонстрация кода:
ДОКТИП html >< HTML >
< голова >
< мета кодировка '=' 'utf-8' >
< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >
< заголовок >/ заголовок >
голова >
< тело >
< картина >
< источник СМИ '=' '(макс. ширина: 100 пикселей)' исходный набор '=' 'F:\JOB TECHNICAL ARTICLES\imgbanner.png' />
< изображение источник '=' 'F:\JOB TECHNICAL ARTICLES\imgre.png' все '=' «Отзывчивое изображение» />
картина >
тело >
HTML >
Согласно этим строкам кода:
- Укажите « <изображение> ” элемент, который накапливает “ <источник> ” для разных изображений и позвольте браузеру выбрать подходящее в зависимости от размера экрана пользователя.
- Кроме того, если ни один из « <источник> элементы подходят под размер экрана, изображение указано в поле « <изображение> Тег ” служит запасным вариантом.
- В результате в непредвиденном случае добавляется альтернативное изображение, тем самым сохраняя повышенную скорость загрузки страницы.
Выход
Заключение
Скорость загрузки страницы можно повысить с помощью адаптивных изображений, используя параметр « исходный набор Атрибут «, определяющий различную плотность пикселей, используя атрибут « размеры » или через атрибут « <изображение> элемент. « <изображение> «Элементный подход» можно рассматривать, если ни один из других подходов не сработал, поскольку он добавляет альтернативное изображение в непредвиденном случае без дополнительных опций для того же изображения.