От автора: в нашем взаимосвязанном мире, где у людей множество различных устройств, плавность работы веб-сайта на всех устройствах должна быть в приоритете. Число просмотров вашего сайте не складывается только лишь с одного устройства с определенным разрешением. И чтобы сайт хорошо работал с любым разрешением экрана, он должен быть адаптивным.
Если вы слышали про адаптивный веб-дизайн (RWD), то, скорее всего, вы знаете про тонкости, с которыми приходится сталкиваться (и то как Bootstrapрешает их!). Важной составляющей адаптивного сайта являются адаптивные изображения. В этой статье мы узнаем, что такое адаптивные изображения на сайте. Рассмотрим создание адаптивных изображений с помощью атрибута srcset.
Что такое адаптивные изображения?
Простыми словами, адаптивные изображения это изображения, которые отображаются наилучшим образом на различных устройствах. Лучшая форма это:
Когда вы хотите, чтобы изображение отлично отображалось на экранах разных физических размеров. К примеру, вам надо показать одно и то же изображение на 13.5 дюймовом экране ноутбука и на 5 дюймовом экрана смартфона (окно браузера на весь экран).
Когда вы хотите, чтобы изображение отлично смотрелось на экранах с разным разрешением (или плотность пикселей на разных устройствах).
Когда вы хотите, чтобы изображение отлично смотрелось в разных форматах (JPEG XR, к примеру), конечно, если браузер поддерживает формат. Формат можно выбрать из-за большей степени сжатия.
Адаптивные блоки поддерживаются в большинстве современных браузеров, в том числе в Microsoft Edge (начиная с Windows Insider Build 10547). Поддержку свойства srcset в различных браузерах можно посмотреть здесь.
Как сделать изображения адаптивными
Существует масса способов сделать изображения адаптивными. Один из старых способов – с помощью скрипта (не рекомендуется). Но с ним связаны некоторые проблемы. Первая проблема – если изображение загружается через скрипт, но сам скрипт расположен ниже загружаемого изображения, то можно получить два изображения. Вторая проблема – если в разметке не прописано изображение, и оно загружается только через JS, то есть шанс, что изображение вообще не загрузится, если в браузере отключен JS.
Отсюда вытекает то, что нам нужен лучший способ для создания адаптивных изображений. И к счастью, он существует! В этом методе используются атрибуты: srcset, sizes, picture
Атрибут srcset
Перед тем, как я объясню принцип работы атрибута srcset, важно понять несколько терминов:
Соотношение логических и физических пикселей на устройстве
Соотношение логических и физических пикселей это количество пикселей экрана устройства на один пиксель CSS. Тут есть еще два ключевых термина:
Плотность пикселей устройства (число физических пикселей на дюйм): У устройств с большим разрешением будет большая плотность пикселей, а следовательно, на одном уровне масштабирования у такого устройства будет большее соотношение логических пикселей к физическим. К примеру, у смартфона Lumia 950 большее разрешение, чем у бюджетной Lumia 630. Значит, у первой люмии соотношение логических пикселей к физическим выше.
Уровень масштабирования браузера: На одном и том же устройства больший уровень масштабирования означает большее количество физических пикселей на один пиксель CSS, а следовательно, и большее соотношение логических и физических пикселей. К примеру, рассмотрим такую фигуру:
Если приблизить картинку в браузере (Ctrl + Plus), число CSS пикселей для блока DIV не изменится, а вот количество физических пикселей увеличится. Т.е. увеличится число физических пикселей на один CSS пиксель. Если вы хотите отобразить изображение или его часть с помощью метода соотношения логических и физических пикселей, вам понадобится атрибут srcset:
|
1 2 3 |
<img src="images/space-needle.jpg" srcset="images/space-needle.jpg 1x, images/space-needle-2x.jpg 2x, images/space-needle-hd.jpg 3x"> |
Дескриптор X в атрибуте srcset задает соотношение логических и физических пикселей.
Значение 1 – используется изображение space-needle.jpg.
Значение 2 – используется изображение space-needle-2x.jpg.
Значение 3 – используется изображение space-needle-3x.jpg.
Атрибут src используется для старых браузеров, которые не поддерживают новый атрибут. Данный способ отлично работает. С помощью X Дескриптора вы получите абсолютно такое же изображение на устройствах с одинаковым соотношением логических пикселей к физическим – даже если изображение отображается на 13.5 дюймовом ноутбуке и 5 дюймовом смартфоне.
Теперь предположим, что мы хотим отображать изображение разных размеров на больших и маленьких экранах. Тут нам поможет w дескриптор в атрибуте srcset и новый атрибут sizes. W дескриптор: описывает ширину изображения. Пример:
|
1 2 3 |
<img src="images/space-needle.jpg" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w"> |
Из кода следует, что ширина первого изображения 200px, второго 400px, третьего 600px. Если ширина экрана пользователя составляет 150 CSS пикселей, то это приравнивается к X дескриптору:
|
1 2 3 |
<img src="images/space-needle.jpg" srcset="images/space-needle.jpg 1.33x, images/space-needle-2x.jpg 2.67x, images/space-needle-hd.jpg 4x"> |
(Не забывайте, что соотношение логических и физических пикселей это всего лишь количество пикселей устройства на один CSS пиксель)
Атрибут sizes
Если вам нужно отобразить изображение разных размеров (разные высота и ширина) на различных экранах, тут вам поможет атрибут sizes вместе с w дескриптором атрибута srcset. Еще раз рассмотрим пару примеров:
Пример 1
Вы хотите, чтобы изображение занимало половину ширины области просмотра. Код:
|
1 2 3 |
<img src="images/space-needle.jpg" sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w"> |
Теперь браузер сам решит, какое изображение загрузить, основываясь на ширине окна браузера и соотношении пикселей на устройстве. К примеру: если ширина браузера составляет 500 CSS пикселей, изображение будет занимать 250px в ширину (50vw). То же самое можно получить и таким способом:
|
1 2 |
srcset="images/space-needle.jpg 0.8x, images/space-needle-2x.jpg 1.6x, images/space-needle-hd.jpg 2.4x" |
Для экранов 1.5x браузер загрузит изображение images/space-needle-2x.jpg, так как соотношение пикселей равно 1.6x (наиболее подходящее для экранов 1.5x).
Пример 2
Вы хотите, чтобы изображение занимало половину ширины области просмотра, если ширина браузера больше 40em. Если ширина браузера равна или меньше 40em, изображение должно занимать всю ширину области просмотра. Код:
|
1 2 3 |
<img src="images/space-needle.jpg" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w"> |
Принцип схож с медиа запросами. Если область просмотра в ширину равна 39em, выражение (max-width: 40em) возвращает true, и выполняется 100vw. Изображение занимает всю ширину области просмотра. Т.е. если ширина окна браузера составляет 500 CSS пикселей, то изображение будет 500px в ширину. Того же можно добиться и другим способом:
|
1 2 3 |
<img src="images/space-needle.jpg" sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 0.4x, images/space-needle-2x.jpg 0.8x, images/space-needle-hd.jpg 1.2x"> |
Похож на первый способ. Браузер определяет, какое изображение больше подходит под заданный размер экрана. Если ширина области просмотра 41em, то выражение (max-width: 40em) обращается в false, и выполняется 50vw. Изображение занимает половину ширины области просмотра. Следующим мы рассмотрим элемент picture, но сначала вспомним все, что мы узнали 🙂
Решением последней задачи будет элемент picture!
Тег picture
Как было замечено выше, тег picture используется в тех случаях, когда необходимо отобразить разные изображения под разные размеры экрана. Тег picture представляет собой контейнер для других элементов, с помощью которого можно контролировать загрузку изображений. Рассмотрим пример:
|
1 2 3 4 5 6 7 8 9 10 11 |
<picture> <source media="(max-width: 20em)" srcset="images/small/space-needle.jpg 1x, images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x"> <source media="(max-width: 40em)" srcset="images/medium/space-needle.jpg 1x, images/medium/space-needle-2x.jpg 2x, images/medium/space-needle-hd.jpg 3x"> <img src="space-needle.jpg" alt="Space Needle"> </picture> |
Если в первом source медиа запрос в атрибуте media возвращает true, то при максимальной ширине просмотра в 20em загрузится соответствующее изображение из папки images/small. Все изображения в атрибуте srcset это дубли одного и того же изображения, но под разные разрешения.
Сам по себе тег picture ничего не отображает. Даже тег source отдельно от атрибута srcset ничего не отобразит. Тег source должен содержать атрибут srcset и необязательные атрибуты sizes, media и type. В конце обязательно добавьте внутрь тега picture изображение img.
Выбор подходящего изображения можно делать и по поддерживаемым форматам в браузере. Такой способ отлично подходит, если какой-то формат отлично сохраняет четкость изображения. К примеру, JPEG-XR формат, имеющий меньший вес файла по сравнению с обычным JPG. Поддерживается в Microsoft Edge и IE9+. Протестировать данный формат можно с помощью атрибута type в теге source:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<picture> <source media="(max-width: 30em)" type="image/vnd.ms-photo" srcset="images/small/space-needle.jxr 1x, images/small/space-needle-2x.jxr 2x, images/small/space-needle-hd.jxr 3x"> <source media="(max-width: 30em)" type="image/jpg" srcset="images/small/space-needle.jpg 1x, images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x"> <img src="space-needle.jpg" alt="Space Needle"> </picture> |
Будет выбрано нужное изображение только при выполнении двух атрибутов media и type. Если браузер не распознает ни один формат, будет взято обычное изображение из тега img.
Собираем все вместе
После осмысления принципа работы адаптивных изображений, рассмотрим заключительный пример, использующий все три способа вместе – srcset, sizes и picture.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title> Responsive images are here! </title> </head> <body style="width:100%"> <picture> <source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw" srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 138w"> <source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw" srcset="stick-figure.png 416w, stick-figure-hd.png 416w"> <img src="stick-original.png" alt="Human"> </picture> </body> </html> |
В этом примере вы используем тег picture с двумя source. Первый срабатывает, если максимальная ширина области просмотра равна 700px. Далее атрибут sizes решает, какое изображение загрузить в зависимости от размера экрана. Принцип работы ничем не отличается от атрибута sizes. Т.е. если максимальная ширина 500px (от 0px до 500px), изображение займет половину области просмотра. Картинка выбирается в зависимости от соотношения пикселей. Но если ширина области просмотра больше 500px (но <=700px, т.к. мы находимся в первом source), то изображение займет всего 1/10 часть области просмотра.
Схожим образом будет выбран второй source в случае, если максимальная ширина составляет 1400px (т.е. ширина варьируется от 701px до 1400px). Атрибут sizes проверяет область просмотра. Если ее ширина составляет 701px-1000px, изображение займет всю область. Если же ширина находится в пределах 1001px-1400px, то изображение займет половину ширины области просмотра. В качестве проверки всех возможных случаев, я просто изменял размер окна браузера. В реальном мире на ваш сайт будут заходить с различных устройств. Вот именно тогда вы и почувствуете всю мощь адаптивных изображений. Вот что у меня получилось:
Область просмотра окна браузера в пределах от 1001px до 1400px: ширина изображения – половина от размера окна
Область просмотра окна браузера в пределах от 701px до 1000px: ширина изображения – все окно
Область просмотра окна браузера в пределах от 501px до 700px: ширина изображения – 1/10 окна браузера
Область просмотра окна браузера в пределах от 0px до 500px: ширина изображения – половина окна браузера
Почти у цели!
Адаптивные изображения позволяют вам, как разработчику, предоставить лучший сервис для ваших клиентов на всех устройствах. Самое время интегрировать их на ваш веб-сайт. Надеюсь, вам было приятно читать данную статью!
Автор: Saurabh Kirtani
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Комментарии (1)