Srcset и размеры: адаптивные изображения

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

Эти новые атрибуты доступны уже некоторое время. Однако до конца понять его мне не удалось. Есть отличные статьи, объясняющие этот новый синтаксис. Но я не мог уложить это в голове. И особенно я пропустил в этих статьях, как можно применить srcset и sizes к реальным проблемам.

Вот почему я написал эту статью о srcset и sizes. Он поставляется с примером общего макета веб-сайта: страница с боковой панелью. Я надеюсь, что это поможет вам лучше понять srcset и sizes и как применить их к проектам вашего веб-сайта.

Зачем использовать srcset и размеры?

Начнем с самого начала. Зачем вообще использовать srcset и sizes? Я вижу два преимущества:

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

С помощью srcset и sizes можно предлагать несколько размеров одного и того же изображения. Браузер выполняет вычисления (да!) и выбирает наилучший размер для отображения пользователю. Браузерная поддержка srcset и sizes хороша, а запасной вариант идеален. Подробнее о поддержке браузеров в конце этой статьи.

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

Браузер учитывает не только ширину экрана (ширину области просмотра), но и плотность пикселей. Независимо от того, просматривает ли пользователь ваш веб-сайт на экране настольного компьютера с низким разрешением или на экране планшета с высоким разрешением, браузер выбирает наилучший размер.

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

Я думаю, у нас достаточно причин познакомиться с srcset и sizes.

Как работает srcset и размеры

Пример тега <img> с новыми атрибутами srcset и sizes:

<img alt="image alt text" src="medium.jpg" srcset="small.jpg 240w, medium.jpg 300w, large.jpg 720w" sizes=“(min-width: 960px) 720px, 100vw">

Чтобы было немного легче читать:

<img 
   alt="image alt text" 
   src="medium.jpg" 
   srcset=" 
      small.jpg 240w, 
      medium.jpg 300w, 
      large.jpg 720w
   " 
   sizes=" 
      (min-width: 960px) 720px, 
      100vw 
   "
>

Давайте пройдемся по каждой части.

alt="image alt text"

Как и в случае с каждым тегом <img>, вы просто используете альтернативный текст.

src="medium.jpg"

Знакомый способ указать местоположение вашего изображения. Браузеры, которые не поддерживают srcset и sizes, будут использовать src.

srcset="small.jpg 240w, medium.jpg 300w, large.jpg 720w"

Здесь начинается волшебство. С помощью scrset вы указываете список изображений разных размеров. В этом примере у нас есть три размера одного и того же изображения. За именем файла каждого изображения вы указываете ширину в пикселях (w ширины). Например, small.jpg 240w означает, что это изображение имеет ширину 240 пикселей.

sizes="(min-width: 960px) 540px, 100vw"

С помощью sizes вы указываете размер изображения и ситуацию, в которой оно должно отображаться. Это делается с помощью комбинации медиа-запроса и ширины изображения. Для меня sizes было самой сложной частью для понимания. Но я думаю, что он также и самый мощный.

Приведенный выше код для sizes делает следующее:

если ширина области просмотра равна 960 пикселям или больше, чем показывать изображение шириной 540 пикселей,
если ширина области просмотра меньше 960 пикселей, то показывать изображение шириной, равной ширине области просмотра (100vw означает 100 % ширины области просмотра).

Теперь вы можете заметить, что в нашем примере srcset нет изображения шириной 540 пикселей. Это не проблема. Браузер выберет лучшее доступное изображение большего размера. В этом случае large.jpg будет использоваться с шириной 720 пикселей.

Экраны HD и Retina

На «обычных» экранах использование ширины области просмотра кажется достаточным для выбора правильного размера изображения. Но с экранами HD и Retina вы хотите отображать изображения большего размера. И вуаля, вот и srcset и sizes! При использовании srcset и sizes браузер также учитывает плотность пикселей экрана.

Чтобы вычислить плотность пикселей экрана, браузеры используют pixel-device-ratio. pixel-device-ratio из 1 означает, что один пиксель устройства соответствует одному пикселю CSS. pixel-device-ratio из 2 означает, что два пикселя устройства соответствуют одному пикселю CSS.

Например, iPad Air 2 имеет разрешение экрана 2048 на 1536 пикселей (источник: Википедия). pixel-device-ratio этого iPad равно 2. Это означает, что для браузера размер экрана составляет 1024 на 768 пикселей.

Давайте посмотрим, работает ли все это на реальном примере.

Пример: страница с боковой панелью

Для этого примера я выбрал обычный макет веб-сайта: страница с боковой панелью. Я рассмотрю три ситуации: просмотр этой страницы на мобильном телефоне, планшете и компьютере.

Кроме того, применяется следующее:

ширина содержимого страницы 67%, сайдбара 33%
на мобильных устройствах боковая панель отображается под контентом,
мобильный телефон и планшет имеют pixel-device-ratio из 2

Обычный макет сайта: страница с боковой панелью. Прекрасный пример использования srcset и размеров.

Медиа-запросы в этом примере основаны на устройствах. Для ваших проектов рекомендуется основывать медиа-запросы на макете сайта.

Мобильный

Когда этот макет просматривается на мобильном устройстве, мы получаем следующий результат:

ширина области просмотра – 320 пикселей,
pixel-device-ratio is 2,
поэтому количество фактических пикселей составляет 320 пикселей x 2 = 640 пикселей,
боковая панель отображается под контентом на всю ширину экрана,
поэтому нам нужно изображение шириной 640 пикселей,
а sizes установлен на `100vw`

Наш предварительный HTML для srcset и sizes:

srcset="small.jpg 640w" 
sizes="100vw"

планшет

На планшете получаем следующий результат:

ширина области просмотра – 768 пикселей,
pixel-device-ratio is 2,
количество фактических пикселей: 768px x 2 = 1536px,
боковая панель отображается справа от содержимого,
ширина контента 67%,
ширина изображения составляет 67% от 1536 пикселей = 1030 пикселей,
sizes можно установить как: (min-width: 1536px) 1030px
это означает что-то вроде: если ширина области просмотра 1536 пикселей или выше, показать изображение шириной 1030 пикселей

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

Это приводит наш HTML к:

srcset="
   small.jpg 640w, 
   large.jpg 1030w 
" 
sizes="
   (min-width: 1536px) 1030px, 
   100vw
"

Рабочий стол

Последняя ситуация, когда мы хотим загрузить правильный размер изображения, — рабочий стол. Я выбрал дисплей с разрешением 1366 x 768 пикселей. Что является распространенным решением на данный момент (см. статистику w3schools.com).

Это приводит к:

ширина области просмотра составляет 1366 пикселей,
pixel-device-ratio равно 1,
Ширина пикселя CSS составляет 1366 пикселей x 1 = 1366 пикселей,
ширина контента и изображения 67%,
ширина изображения составляет 67% от 1366 пикселей = 916 пикселей,
для sizes получаем: (min-width: 1366px) 916px,

Добавляя это к нашим srcset и sizes, мы получаем:

srcset="
   small.jpg 640w, 
   medium.jpg 916w,
   large.jpg 1030w
" 
sizes="
   (min-width: 1366px) 916px,
   (min-width: 1536px) 1030px,
   100vw 
"

Чтобы завершить тег <img> для этого примера, добавим атрибуты alt и src.

<img 
   alt="alt text image" 
   src="medium.jpg" 
   srcset=" 
      small.jpg 640w, 
      medium.jpg 916w, 
      large.jpg 1030w 
   " 
   sizes=" 
      (min-width: 1366px) 916px, 
      (min-width: 1536px) 1030px, 
      100vw
   " 
>

Таким образом, этот код делает следующее:

он показывает small.jpg при просмотре на мобильных устройствах,
он показывает medium.jpg при просмотре на компьютере,
он показывает большой.jpg при просмотре на планшете

Я думаю, что это хорошо сделано!

Поддержка браузера для srcset и размеров

Браузерная поддержка srcset и sizes хорошая, но не отличная. Во всем мире ок. 83% браузеров поддерживают srcset и sizes. Он не поддерживается Internet Explorer, Opera Mini и более ранними версиями Android. Но помните, запасной вариант идеален! Если srcset и sizes не поддерживаются, браузер будет использовать атрибут src.