Адаптивные изображения с помощью атрибутов srcset и sizes

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

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

Но с появлением элемента <picture> ситуация начинает исправляться. В нем есть два атрибута, которые являются ключевыми для использования адаптивных изображений — srcsetи соответствующих sizes.

Атрибут srcset

Атрибут srcset позволяет использовать комплект исходных файлов изображения, которые могут быть использованы при рендеринге страницы в браузере. Для этого нужно задать список изображений, разделенных запятыми, и юзер-агент определяет, какое из них отобразить, в зависимости от типа и особенностей устройства.

При перечислении изображений мы предоставляем две типа данных о каждом изображении

  • Путь к файлу изображения
  • Плотность пикселей или ширина  изображения

Чтобы задать плотность пикселей , добавим xк числу плотности изображение. Например —

<img src="myimage-one.png"
     srcset="myimage-two.png 2x, myimage-three.png 3x, myimage-four.png 4x">

Предполагается, что изображение, установленное по умолчанию с тегом src имеет атрибут srcset, равный 1x.

Когда спецификация атрибута srcset была представлена в 2012 году, у нас была возможность использовать только изображения с разной плотностью пикселей, как показано выше. Однако спецификация 2014 г. ввела значение ширины, что позволило указывать ширину разным изображениям.

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

<img src="myimage-one.png"
     srcset="myimage-two.png 100w, myimage-three.png 500w, myimage-four.png 1000w">

Только при использовании ширины в атрибуте srcset мы можем сопровождать его атрибутом sizes.

Атрибут sizes

Атрибут sizes позволяет явно определить размер изображения, который должен быть использован, в зависимости от условий media.

<img src="myimage-one.png"
     srcset="myimage-two.png 100w, myimage-three.png 500w, myimage-four.png 1000w"

     sizes="<media condition> <width>,
            <media condition> <width>,
            <optional default image width>">

Media условия

Медиа условия — это не то же самое, что медиа-запрос. Это часть медиа-запроса. Они не позволяет нам указывать типы медиа, например, screenили print, но принимает условия, которые мы обычно добавляем к типу медиа.

Допустимыми медиа условиями могут быть либо —

  • Прямое медиа условие, например (min-width: 900px)
  • Меди условие с отрицанием, например ( not (orientation: landscape) )
  • Комбинация медиа условий, например (orientation: landscape) and (min-width: 900px)
  • Выбор одного из условий, например ( (orientation: portrait) or (max-width: 500px) )

Ширина

Указанная ширина может быть почти любым значением длины, например em, rem, пиксели или ширина вьюпорта.

Однако процентные значения не допускаются, чтобы избежать путаницы. 
Если требуется относительная величина, в качестве альтернативы рекомендуется использовать vw.

Общий вид

Объединяя пример использования srcsetи sizes —

<img src="myimage-one.png"
     srcset="myimage-two.png 100w, myimage-three.png 500w, myimage-four.png 1000w"

     sizes="(min-width: 900px) 1000px,
            (max-width: 900px) and (min-width: 400px) 50em,
            ( not (orientation: portrait) ) 300px,
            ( (orientation: landscape) or (min-width: 1000px) ) 50vw, 
            100vw">

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

Поддержка браузерами

Атрибуты srcset и sizes относительно хорошо поддерживаются современными браузерами:

Data on support for the srcset feature across the major browsers from caniuse.com

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

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

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

Scroll to top