«
»
WEB

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

Согласно данным из архива HTTP , 64% веса страницы сайта в среднем составляют изображения. Поскольку мобильный трафик превосходит трафик настольных компьютеров, теперь стало еще более важно оптимизировать изображения для устройств разных размеров.

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

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

Короче говоря, мы хотим, чтобы браузер загружал правильное изображение на основе:

  1. Размеры
    области просмотра Независимо от того, является ли область просмотра шириной 1280 пикселей или 640 пикселей или 320 пикселей
  2. Размер изображения относительно области просмотра.
    Занимает ли изображение 100% доступной ширины, или 50%, или 33%. В приведенном выше примере баннера полной ширины изображение занимает 100% доступной ширины.

Теперь, когда мы определили проблему, есть несколько способов получить решение:

Мы будем говорить о srcsetи sizesатрибуты в этой статье.

Прежде чем обсуждать фактическую реализацию, давайте поговорим о том, что вам известно как разработчику на момент написания кода, и о том, что известно браузеру на момент фактического рендеринга изображений.

Как разработчик, вы знаете две вещи, которые браузер не знает во время запуска загрузки изображения (что происходит до разбора CSS):

  1. Размер изображения относительно области просмотра.
    Это зависит от макета, который вы пытаетесь создать на своем сайте, как обсуждалось выше в примере полноразмерного баннера.
  2. URL разных размеров изображения
    Теперь, когда вам нужны разные изображения для разных размеров области просмотра, каждое изображение должно быть доступно индивидуально по уникальному URL

С другой стороны, как разработчик, вы не имеете ни малейшего представления о реальных размерах окна просмотра. Это то, что доступно только браузерам во время реального рендеринга.

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

Это то , что srcsetи sizesатрибуты все!

srcsetАтрибут сообщает браузеру URL – адрес различных размеров конкретного изображения и ширина каждого изображения, используя wпараметр

srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"

В приведенном выше примере мы в основном говорим браузеру, что у нас есть 3 размера изображения. large.jpgимеет ширину medium.jpg1024 пикселей, ширину small.jpg640 пикселей и ширину 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вы можете получить огромный список потенциальных исходных файлов изображений, поэтому вы должны использовать хорошую стратегию для выбора точек останова, чтобы сделать разметку простой.

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

Источник записи: https://blog.imagekit.io/how-to-deliver-responsive-images-to-browsers-across-multiple-devices-30cfae17390e

Связанные записи
WEBПолезные сайты

9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

Contact Form 7WEBWEB - PHPWordPressВсе для functions.phpПлагины

Как заставить Wordpress отправлять почту из Amazon EC2 с помощью SES

Chrome AppsGoogleGoogle ChromeWEBWordPressПолезные сайты

Как улучшить английский язык при написании в WordPress или автоматическая проверка грамматики в браузере.

LinuxWEBWEB - PHPWordPressВсе для разработки плагиновВсе для разработки шаблонов

Определите минимальную версию PHP для вашего кода?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *