Согласно данным из архива HTTP , 64% веса страницы сайта в среднем составляют изображения. Поскольку мобильный трафик превосходит трафик настольных компьютеров, теперь стало еще более важно оптимизировать изображения для устройств разных размеров.
В идеале вы хотели бы обслуживать изображения, размер которых изменяется в соответствии с размерами области просмотра пользователя. Без средств для этого вам иногда придется отправить изображение большего размера, чем требуется на самом деле. Это означает, что пользователь должен загрузить больше данных, чем он должен загружать, что, в свою очередь, замедляет загрузку страницы. Это пустая трата времени, пропускной способности и денег, которая влияет на общее восприятие пользователей и, следовательно, на конверсию на вашем сайте.
Допустим, вы хотите иметь полноразмерный баннер в верхней части вашего сайта. Изображение баннера шириной 1280 пикселей будет хорошо работать на настольном устройстве для этой цели. Но это же изображение слишком велико, чтобы использовать его в качестве баннера полной ширины на мобильном устройстве с широким экраном 320 пикселей.
Короче говоря, мы хотим, чтобы браузер загружал правильное изображение на основе:
- Размеры
области просмотра Независимо от того, является ли область просмотра шириной 1280 пикселей или 640 пикселей или 320 пикселей - Размер изображения относительно области просмотра.
Занимает ли изображение 100% доступной ширины, или 50%, или 33%. В приведенном выше примере баннера полной ширины изображение занимает 100% доступной ширины.
Теперь, когда мы определили проблему, есть несколько способов получить решение:
- Использование клиентских подсказок (DPR, Width и Viewport-Width) – очень малая поддержка
- Использование
srcset
иsizes
атрибутыimg
тега HTML – поддерживаются всеми основными браузерами
Мы будем говорить о srcset
и sizes
атрибуты в этой статье.
Прежде чем обсуждать фактическую реализацию, давайте поговорим о том, что вам известно как разработчику на момент написания кода, и о том, что известно браузеру на момент фактического рендеринга изображений.
Как разработчик, вы знаете две вещи, которые браузер не знает во время запуска загрузки изображения (что происходит до разбора CSS):
- Размер изображения относительно области просмотра.
Это зависит от макета, который вы пытаетесь создать на своем сайте, как обсуждалось выше в примере полноразмерного баннера. - URL разных размеров изображения
Теперь, когда вам нужны разные изображения для разных размеров области просмотра, каждое изображение должно быть доступно индивидуально по уникальному URL
С другой стороны, как разработчик, вы не имеете ни малейшего представления о реальных размерах окна просмотра. Это то, что доступно только браузерам во время реального рендеринга.
Итак, если мы каким-то образом передадим две части информации, которые мы знаем как разработчик, в браузер, то в браузере будет вся информация, необходимая для выбора и загрузки соответствующего изображения.
Это то , что srcset
и sizes
атрибуты все!
srcset
Атрибут сообщает браузеру URL – адрес различных размеров конкретного изображения и ширина каждого изображения, используя w
параметр
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
В приведенном выше примере мы в основном говорим браузеру, что у нас есть 3 размера изображения. large.jpg
имеет ширину medium.jpg
1024 пикселей, ширину small.jpg
640 пикселей и ширину 320 пикселей.
sizes
Атрибут сообщает браузеру о том , как изображение будет выложена на нашем сайте. Использует length
параметр
sizes="[media query] [length], [media query] [length] ..."
Из указанного списка sizes
браузер просматривает каждый мультимедийный запрос, пока не находит тот, который оценивается как true, и использует length
указанный для этого медиа-запроса в качестве окончательной ширины изображения, подлежащего визуализации.
Без этой дополнительной информации о стиле, указанной в sizes
, браузеру пришлось бы ждать загрузки и анализа CSS. Благодаря этому sizes
атрибуту мы просто заранее предоставляем эту важную информацию.
Как только ширина изображения, которое должно быть отображено, была определена из sizes
атрибута, браузер выбирает наиболее подходящее изображение из списка, указанного с помощью srcset
атрибута, и начинает загружать это изображение.
Мы создали демонстрационную страницу , чтобы проиллюстрировать использование srcset
и sizes
атрибутов с использованием URL на основе преобразования ImageKit в. Страница доступна здесь . С преобразованием ImageKit на основе URL вам не нужно создавать ресурсы различного размера и управлять ими на своем сервере. Вы можете создавать их на лету и внедрять адаптивные изображения. Все, что вам нужно сделать, это определить, какие размеры вам нужны, и просто написать разметку.
Давайте посмотрим на код из нашего примера , который демонстрирует использование srcset
и sizes
атрибутов.
Здесь мы предоставляем 3 разных URL изображения и ширину каждого изображения через srcset
атрибут. Три изображения имеют ширину 500px, 800px и 1024px, что получается с помощью преобразования ширины tr:w-
в URL.
Затем мы использовали sizes
атрибут, чтобы указать окончательную ширину визуализированного изображения. Со значением (min-width: 1024px) 1024px, 100vw
мы фактически указали два набора медиа-запроса и длины. Первый набор утверждает, что когда ширина области просмотра равна или превышает 1024 пикселя, тогда изображение занимает ровно 1024 пикселя. В других случаях (т. Е. Когда ширина области просмотра меньше 1024 пикселей), изображение занимает 100% ширины области просмотра (определяется с помощью 100vw
).
Если вы проверите демонстрационную страницу и измените размер окна, вы заметите:
- При разрешении 400 пикселей браузер использует изображение шириной
500 пикселей /tr:w-500/responsive_images_srcset_sizes_assets/big/1.jpeg. - При разрешении 700px браузер использует изображение шириной 800px
/tr:w-800/responsive_images_srcset_sizes_assets/big/1.jpeg - Выше 800 пикселей браузер использует изображение шириной 1024
пикселя /tr:w-1024/responsive_images_srcset_sizes_assets/big/1.jpeg
Браузер автоматически выбирает лучшее изображение на основе фактической ширины области просмотра, плотности пикселей (и, возможно, на основании ограничений полосы пропускания или предпочтений пользователя ).
Обратите внимание, что при использовании srcset
и sizes
вы можете получить огромный список потенциальных исходных файлов изображений, поэтому вы должны использовать хорошую стратегию для выбора точек останова, чтобы сделать разметку простой.
Ниже приведены несколько ссылок, которые я лично нашел полезными. Вы можете просмотреть их, чтобы узнать больше об адаптивных изображениях.
- Основы о srcset и размерах
- Почему это нормально, чтобы оставить размеры полностью
- Адаптивные изображения: если вы просто меняете разрешение, используйте srcset
Источник записи: https://techblog.sdstudio.top/kak-dostavljat-adaptivnye-izobrazhenija-na-neskolko-ustrojstv/
Источник записи: https://blog.imagekit.io