От автора: cегодня я расскажу про атрибут sizes и самую сложную часть в новой спецификации. Атрибут sizes довольно странный… Он выглядит странно, ведет себя странно, однако он является той недостающей частью спецификации, которая собирает все в единое целое. Данный атрибут – это ключ к пониманию синтаксиса адаптивных изображений.
Что необходимо запомнить: с точки зрения дизайнера в атрибут sizes вкладываются намерения к изображению по отношению к текущему слою. Это значит, что без математики дело не обойдется.
По умолчанию браузеры не знает ни размера, ни разрешения изображения. Как обычно, чтобы узнать информацию об изображении, браузеру требуется его загрузить, и только затем свериться с CSS стилями. Браузер вообще может не прогрузить изображение, если на странице полдюжины его вариантов (с разной шириной, разрешением и соотношением сторон). Теги и атрибуты, о которых мы уже выше упоминали, решают большинство из этих проблем:
<picture> работает с соотношением сторон и фокусировкой изображения
W и x отвечают за ширину и разрешение соответственно
Осталось выяснить «А как же это изображение будет вести себя по отношению к остальному контенту на странице?». Не зная ответа на вопрос, браузер делает самый лучший выбор из всего массива возможных.
Альтернативные изображения не нужны
Начнем с простейшего примера. В большинстве макетов баннеров изображение занимает 100% ширины, т.е. 100vw. К примеру, у нас два изображения salton-large.jpg и salton-small.jpg. Первой шириной 1500px и второе 750px. Чтобы определить, какое изображение отобразить, воспользуемся w дескриптором:
|
1 2 3 4 5 |
<header> <img src="salton-small.jpg" srcset="salton-small.jpg 750w, salton-large.jpg 1500w" alt="The sun setting on the Salton Sea"> </header> |
С помощью CSS можно указать, как изображение будет вести себя в контейнере:
|
1 |
header img { width: 100%; height: auto; } |
… но все это ничего не говорит браузеру о соотношении изображения с размером окна браузера. Видимая область окна браузера позволит определить размер изображения, а, следовательно, какое из двух использовать. В простом примере все легко: в стилях указывается, чтобы изображение занимало всю ширину окна браузера. Указать это можно с помощью атрибута sizes:
|
1 2 3 4 5 |
<header> <img src="salton-small.jpg" srcset="salton-small.jpg 750w, salton-large.jpg 1500w" sizes="100vw" alt="The sun setting on the Salton Sea"> </header> |
Sizes не использует единицы измерения vw, но часто такой подход очень полезен. Для тех, кто не знаком с данными единицами измерения, я приготовил статью.
Теперь у браузера есть вся необходимая информация, чтобы определить, какое из двух изображений использовать: сперва, браузер опознает устройство и определит плотность пикселей, затем от w дескриптора получит реальные размеры обеих изображений. Дальше, чтобы определить подходящее изображение под данный размер окна на устройстве, последуют вычисления – возможно, будет учитываться даже пропускная способность канала. Sizes работает только в сочетании с w дескриптором и не используется вместе с x дескриптором.
Немного усложним задачу: наше изображение находится внутри резинового контейнера со свойством max-width: 750px. Теперь, изображению не обязательно растягиваться на всю ширину экрана: на мобильных устройствах, скорее всего, так и будет, а на десктопных версиях нет. Чтобы браузер понял нашу задумку, воспользуемся медиа условием – форма встроенных медиа запросов:
|
1 2 3 4 5 6 |
<header> <img src="salton-small.jpg" srcset="salton-small.jpg 750w, salton-large.jpg 1500w" sizes="(min-width: 750px) 750px, 100vw" alt="The sun setting on the Salton Sea"> </header> |
На русский язык значения медиа условия можно перевести так: «Если размер окна не менее 750px, то изображение имеет ширину 750px. В противном случае изображение растягивается на 100% ширины.»
Разве это не смешивает разметку и стили?
На этом сайте и любом другом приличном сайте о front-end разработке вы увидите постоянные призывы отделять HTML от CSS. Это делается по известным причинам, но атрибут sizes, похоже, опять все перемешал. И к несчастью, другого способа нет: браузер всегда сначала загружает HTML и любые изображения. Единственный способ заставить браузер отложить загрузку всех изображений это добавление в разметку атрибута sizes и медиа условий.
А нужен ли мне атрибут sizes?
Все это может загрузить вас, посеяв сомнение относительно необходимости использования данного атрибута. Атрибут sizes работает странным образом: вместо четких задач браузеру, он посылает директивы и подсказки. На этот вопрос существует два ответа:
Если вы используете w дескриптор, то вам нужно использовать и атрибут sizes – это часть спецификации. Без этого изображения в браузере будут отображаться странно. Тем более, что не нужно делать что-то сложнее нашего первого примера.
Не нужно использовать атрибут sizes везде. Весьма заманчиво применять новую технологию под все изображения. Но реальность такова, что данный атрибут необходимо применять только там, где с его помощью можно предоставить пользователям изображение лучшего качества под разные размеры экранов.
Данный атрибут можно сочетать как с w дескриптором, так и тегом picture. Примеры я приберег к финальной статье о расширенных возможностях адаптивных изображений, которая выйдет чуть позже.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
