Выведется ли изображение на веб странице при использовании данного кода в современных браузерах
В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые имеются в HTML для их реализации. Responsive images - только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему CSS.
Требования: | Предполагается, что вы уже знакомы с основами HTML и умеете добавлять статичные изображения на веб-страницу. |
---|---|
Цель: | Узнать, как использовать такие элементы, как srcset и чтобы обеспечить работу гибких изображения на веб-сайтах. |
Почему адаптивные изображения?
Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий. Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователем, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:
Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:
- Содержимому тега main задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.
- Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
- Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.
Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!
Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как art direction problem.
Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.
Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.
Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.
Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. Технологии отзывчивых изображений были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (resolution switching), или разные изображения с отдельными областями основного изображения (art direction).
Как сделать изображения отзывчивыми?
В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML . Как показано на примере выше - изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. CSS больше подходит для адаптивного дизайна чем HTML, об этом поговорим в следующем модуле о CSS.
Разные разрешения: Разные размеры
Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент обычно позволяет указать только один путь к файлу:
Однако есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).
Атрибуты srcset и sizes кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:
srcset включает названия изображений, среди которых браузер выберет нужное и их размеры. Перед каждой запятой части значения в таком порядке:
- Название изображения ( elva-fairy-480w.jpg .)
- Пробел.
- Актуальная ширина картинкив пикселах ( 480w ) — заметьте, что здесь используется w вместо px , как вы могли ожидать. Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать Cmd + I , чтобы вывести информацию на экран).
sizes определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:
- Медиа-условие ( (max-width:480px) ) — вы можете больше узнать об этом в CSS topic, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".
- Пробел.
- Ширину слота (в оригинале "width of the slot"), занимаемую изображением, когда медиа-условие истинно. ( 440px )
Note: Для ширины слота, вы можете указать абсолютные значения ( px , em ) или значение относительно окна просмотра ( vw ), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.
Итак, с такими атрибутами, браузер сделает следующее:
- Посмотрит на ширину экрана устройства.
- Попытается определить подходящее медиа-условие из списка в атрибуте sizes .
- Посмотрит на размер слота к этому медиавыражению.
- Загрузит изображение из списка из srcset , которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота.
И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px , тогда будет загружено изображение elva-fairy-480w.jpg , так как свойство ширины ( 480w ) наиболее близко значение 440px . Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.
Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута src .
Полезные инструменты разработчика
Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера ( not-responsive.html ), затем открывал Responsive Design View (Tools > Web Developer > Responsive Design View), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.
А дальше вы можете проверить работает ли srcset если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (Tools > Web Developer > Network) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.
Переключения разрешений: Одинаковый размер, разные разрешения
Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):
В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):
В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset . Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg . 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.
Художественное оформление
Подводя итоги, проблема художественного оформления заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент позволяет нам применять именно такое решение.
Возвращаясь к нашему оригинальному примеру not-responsive.html, мы имеем изображение которое очень нуждается в художественном оформлении:
- Элемент принимает атрибут media , который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента . Если ширина составит 800px и более — второго.
- Атрибут srcset содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с выше, может принимать атрибуты srcset и sizes с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента
- Вы всегда должны использовать элемент , с src и alt , прямо перед , иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент ) или браузер не поддерживает элемент
Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:
Примечание: вам следует использовать атрибут media только при художественном оформлении; когда вы используете media , не применяйте медиа-условия с атрибутом sizes .
Почему это нельзя сделать посредством CSS и JavaScript?
Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как srcset . Например, вы не могли бы загрузить элемент , потом определить ширину вьюпорта при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.
Смело используйте современные форматы изображений
Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.
позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута type , браузер сразу определит файлы такого типа как неподдерживаемые:
- Не используйте атрибут media , если вам не нужно художественное оформление.
- В элементе можно указывать путь к изображениям только того типа, который указан в type .
- Как и в предыдущих примерах, при необходимости вы можете использовать srcset и sizes .
Активное обучение: реализация собственных адаптивных изображений
Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя и srcset .
- Напишите простую HTML-разметку.
- Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
- Используйте элемент для работы с художественно оформленной картинкой.
- Обозначьте несколько разных размеров для этой картинки.
- Используйте srcset / size для описания переключения при смене размеров вьюпорта
Примечание: Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.
Заключение
Это все для отзывчивых изображений - мы надеемся, вам понравилось играть с этими новыми технологиями. Напомним, что мы здесь обсуждали две различные проблемы:
- Художественное оформление: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов - например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью элемента.
- Переключение разрешений: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях , а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью векторной графики (SVG изображений), и srcset и sizes атрибуты.
Это так же подводит нас к окончанию целого модуля "Мультимедиа и встраивание"! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше - это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!
Спецификация по отзывчивым изображениям — это фантастический документ, в котором описано множество вариантов использования таких изображений. Но опыт подсказывает мне, что чаще всего при работе с ними нужно знать лишь о том, как отдавать клиенту копии одного и того же изображения разного размера, выбирая их в зависимости от ширины области просмотра страницы. Мы называем это «переключением разрешения». Для решения этой задачи можно воспользоваться атрибутами srcset и sizes .
Вывод отзывчивых изображений предусматривает применение достаточно сложной логики. Сюда, кроме прочего, входит определение того, изображение какого размера будет выведено, а также выяснение того, работает ли пользователь с экраном высокого разрешения. К счастью, браузеры лучше, чем люди, умеют определять то, какие именно изображения лучше всего подходят каждому конкретному пользователю. Всё, что нам нужно — это дать им некоторые подсказки. Атрибут srcset даёт браузеру список графических ресурсов, из которых он может выбирать наиболее подходящее изображение. Атрибут sizes позволяет сообщить браузеру о том, изображение какого размера нужно показать в том или ином случае.
И, кстати, пользуясь отзывчивыми изображениями можно не беспокоиться о браузерной поддержке этой технологии. Интересующие нас атрибуты пользуются прекрасной поддержкой браузеров. И, кроме того, в нашем распоряжении имеется резервный механизм, предназначенный для старых браузеров вроде IE11.
Как тег «общается» с браузером
Вот как тег сообщает браузеру о том, какое изображение нужно выбрать.
«Разговор» тега и браузера
Здесь тег сообщает браузеру следующее: «При таком размере экрана я буду выводиться в примерно следующем размере (указывает на атрибут sizes ). Можешь взять любое из этих изображений, которые имеют следующую ширину (указывает на атрибут srcset ). Поэтому, пожалуйста, выбери то изображение, которое сейчас подходит лучше всего».
Атрибут srcset
Атрибут srcset даёт браузеру набор графических ресурсов, из которых он может выбирать самый подходящий. Здесь же находятся сведения о размере каждого из предлагаемых изображений.
Атрибут srcset
В атрибуте src содержится резервный вариант изображения, предназначенный для браузеров, не понимающих атрибута srcset . В srcset содержатся URL изображений и сведения об их ширине. Браузер выберет из предоставленного ему набора изображений то, что подходит лучше всего. Причём, если у пользователя имеется дисплей с повышенной плотностью пикселей (Retina-дисплей) — браузер это учтёт при выборе изображения.
Атрибут srcset содержит список URL изображений, за которыми следуют сведения о ширине изображений. Пары URL-ширина разделены запятыми. Элементы списка выглядят примерно так: image.jpg 1000w . Такая запись сообщает браузеру о том, что изображение image.jpg имеет 1000 пикселей в ширину.
Описывая набор изображений таким способом, мы сообщаем браузеру следующее: «Я даю тебе список изображений и доверяю тебе выбор самого подходящего».
Браузер выберет наилучшее изображение, руководствуясь сложным набором критериев, в которые входит то, изображение какого размера выводится у пользователя, то, каков текущий размер области просмотра, и то, имеется ли у пользователя дисплей высокого разрешения.
Браузер достаточно интеллектуален для того чтобы знать, что на настольном дисплее низкого разрешения, в том случае, если ширина выводимого изображения составляет 800 пикселей, нужно выбрать из списка то изображение, ширина которого составляет, как минимум, 800 пикселей.
Браузер, кроме того, знает о том, что если изображение шириной 320 пикселей выводится на дисплее высокого разрешения, нужно выбрать файл изображения, которое имеет в ширину, как минимум, 640 пикселей. В результате нам не нужно беспокоиться об 1x- и 2x-графических ресурсах. Всё, что нужно сделать — это дать браузеру хороший набор изображений и позволить ему делать своё дело.
Как описывать изображения, подходящие для разных экранов?
Атрибут sizes
Атрибут srcset — это прекрасный инструмент. Но когда браузер читает HTML-код страницы, он не знает о том, используется ли, например, CSS-стиль, который устанавливает размер изображения в 50% от ширины экрана.
Именно тут в игру вступает атрибут sizes . С его помощью мы можем дать браузеру подсказку о том, в каком размере будет выводиться изображение после применения к нему CSS.
Атрибут sizes
- 100vw — размер, используемый по умолчанию в том случае, когда ни одно из условий не выполняется. Он указывается последним в списке, который имеется в атрибуте sizes .
- 1023px — ширина окна.
- 780px — ширина изображения при выполнении указанного условия.
В атрибуте sizes содержится список медиа-условий, разделённых запятыми. Медиа-условия — это подмножество медиа-запросов. Тут нельзя указывать тип среды, к которой применимо условие ( print или screen ), но можно использовать медиа-запросы, относящиеся к ширине области просмотра.
Каждая запись списка содержит ширину окна области просмотра и соответствующую ей ширину изображения. Элемент списка имеет вид (min-width: 1023px) 780px . Подобная запись сообщает браузеру о том, что если ширина области просмотра составляет 1023 пикселя (или больше), то нужно использовать изображение шириной 780 пикселей.
Здесь, кроме того, можно использовать относительные единицы измерения ширины. Например — что-то вроде 50vw . Это сообщает браузеру о том, что ширина изображения будет составлять 50% ширины области просмотра. Тут, в более сложных ситуациях, можно даже использовать функцию calc . Например, конструкция вида calc(50vw — 2rem) сообщает браузеру о том, что ширина изображения будет составлять 50% ширины области просмотра за вычетом 2rem . Возможно, ширина задана именно так для учёта ширины какого-нибудь отступа или какой-нибудь границы.
Последний элемент списка не снабжён медиа-условием. Если внести в список ширину и не указать медиа-условие, соответствующее значение будет рассматриваться как значение, используемое по умолчанию, то есть — в том случае, если ни одно из других условий не выполняется.
Браузер будет просматривать этот список сверху вниз и остановится на первом подходящем элементе, соответствующем ширине области просмотра.
Предположим, что в атрибуте sizes находится следующее:
Вот что будет происходить в разных ситуациях:
- Если пользователь работает на большом настольном дисплее, то браузер сочтёт подходящим первый элемент списка и будет знать о том, что ширина изображения должна составлять 780 пикселей.
- Стандартная ширина области просмотра вертикально расположенного экрана iPad составляет 768 пикселей. В такой ситуации браузер пропустит первую запись списка, но обнаружит совпадение текущих условий со второй записью. Она сообщает браузеру о том, что ширина изображения будет составлять 620 пикселей.
- Если пользователь смотрит страницу на типичном мобильном устройстве, то браузер не сочтёт подходящими две первых записи в sizes . Поэтому он дойдёт до последней записи, которая скажет ему о том, что ширина изображения будет составлять 100% ширины области просмотра.
Как готовить список изображений, из которых браузер будет выбирать наиболее подходящее?
Атрибут src
Вы могли заметить, что во всех приведённых примерах всё ещё используется атрибут src . Возможно, вы размышляете о том, нужен ли этот атрибут, учитывая наличие атрибута srcset . Дело тут в том, что если мы даём браузеру атрибут srcset , то, если это браузер современный, он заменит значение src в DOM на значение, соответствующее изображению, выбранному из srcset . В результате оказывается, что современные браузеры игнорируют атрибут src , ориентируясь вместо него на атрибут srcset .
Но атрибут src , сам по себе, всё ещё важен для браузеров, не поддерживающих работу с отзывчивыми изображениями. Такие браузеры, достаточно старые, игнорируют атрибуты srcset и sizes . Они просто не знают об их существовании. Но атрибут src они понимают, поэтому в него можно записать адрес изображения, которое будет служить резервным вариантом для таких браузеров. Я обычно записывают в этот атрибут адрес самого маленького изображения, которое хорошо смотрится на настольных мониторах, не отличающихся высокой плотностью пикселей.
Вопросы и ответы
▍Как генерировать наборы изображений?
Изображения можно генерировать разными способами: вручную, с использованием инструмента для создания отзывчивых изображений, с применением соответствующих возможностей CDN.
Для того чтобы создать изображения вручную, нужно открыть исходное изображение в Photoshop (или в другом редакторе, которым вы пользуетесь) и экспортировать его во всех необходимых размерах.
Это может потребовать достаточно много времени, поэтому у вас может возникнуть желание автоматизировать эту работу, воспользовавшись соответствующим инструментом. Среди подобных инструментов мне больше всего нравится Responsive Image Breakpoints Generator от Cloudinary. При работе с этим инструментом достаточно передать ему изображение, после чего он автоматически создаст его варианты разных размеров. Тут можно настроить количество генерируемых изображений. После того, как изображения готовы, их можно загрузить и использовать в проекте.
Ещё один вариант поддержки отзывчивых изображений заключается в том, чтобы использовать для их хостинга соответствующую CDN. Например — Cloudinary или imgix. Используя подобный сервис, на CDN загружают изображение в наивысшем имеющемся разрешении. Затем можно запрашивать версии изображения разных размеров, пользуясь URL-параметрами. При этом вам не придётся заботиться об изменении размеров изображения: достаточно сообщить CDN о том, в каком размере вы собираетесь выводить соответствующее изображение.
Вот список сервисов и проектов, которыми можно воспользоваться для создания вариантов изображений разных размеров.
▍Изображения каких размеров следует предоставлять браузеру?
Хороший вопрос! Если вы дадите браузеру слишком много графических ресурсов, то вы попросту впустую потратите время и силы на их создание. Если же ресурсов будет слишком мало — это будет означать, что вы принуждаете пользователей вашего сайта к загрузке изображений, размеры которых больше, чем им нужно.
Если вы работаете с единственным изображением и у вас есть возможность самостоятельно настроить разметку для вывода этого изображения, то можете воспользоваться инструментом Responsive Image Breakpoints Generator. Он автоматически исследует изображение и примет решение о том, каким является оптимальный набор ресурсов (в плане баланса между размерами файлов и их разрешением), сгенерированный на основе этого изображения. Затем этот инструмент не только сгенерирует файлы, но и автоматически подготовит атрибуты srcset и sizes .
Стандартный набор размеров изображений шириной от 320 до 2560 пикселей
Если вы работаете в некоей CMS, или если создаёте веб-приложение, и при этом не знаете о том, изображение какого размера будет выведено в том или ином месте, тогда я рекомендую воспользоваться стандартным набором размеров изображений. Раньше я использовал следующие размеры: 320w , 640w , 960w , 1280w , 1920w и 2560w . Это — круглые цифры, получаемые путём умножения 320 на разные коэффициенты. Этот набор ресурсов покрывает нужды самых разных экранов — от маленьких мобильных дисплеев, до огромных настольных мониторов.
Однако использование стандартного набора ресурсов — это всегда менее эффективно, чем применение собственного набора, учитывающего особенности проекта. В данном случае, хотя перед нами — вполне логичная последовательность, в ней наблюдается прогрессивное увеличение размеров файлов, так как, если ширина (и, соответственно, высота) изображения увеличивается вдвое, то количество пикселей этого изображения увеличивается в четыре раза. В результате, если вам приходится использовать стандартный набор размеров изображений, то вам, возможно, следует выбрать такой набор, в котором будет меньше вариантов изображений маленьких размеров и больше вариантов больших размеров.
Если вы хостите изображения на Cloudinary, то вам будет доступен ещё один подход. Он заключается в использовании API Cloudinary, который позволяет обрабатывать изображения с помощью Responsive Image Breakpoints Generator при их загрузке. После того, как изображения автоматически обработаны, можно, воспользовавшись ответом API, динамически заполнить атрибуты srcset и sizes .
▍Какие значения следует вносить в атрибут sizes?
Для того чтобы выяснить то, какие значения следует вносить в атрибут sizes , нужно проанализировать CSS и понять, изображения какой ширины выводятся в различных условиях.
Иногда это определяется шириной самого изображения:
В данном случае имеются два фиксированных варианта размера изображения. Этот факт может найти прямое отражение в атрибуте sizes :
Однако часто оказывается так, что размеры изображений настраиваются гибко. Нередко изображения наследуют размеры от своих контейнеров:
В этом примере (если исходить из предположения о том, что единственный элемент, воздействующий на ширину изображения, это .container ) ширину контейнера можно счесть шириной изображения. Тут стоит обратить внимание на то, что из ширины контейнера вычитается ширина внутреннего отступа. Возможно, вам понадобится это учитывать, возможно — нет. Всё зависит от того, насколько сильно внутренний отступ влияет на итоговую ширину изображения.
Как видите, настройка атрибута sizes сильно зависит от особенностей конкретного макета. Обычно я строю работу, начиная с исследования изображений в инструментах разработчика браузера и выясняя то, какие параметры влияют на размер изображений.
▍Как проверить правильность настройки отзывчивых изображений?
Легко представить себе то, что тестирование правильности настройки отзывчивых изображений может быть сложным и длительным делом. Но, к нашему счастью, существует инструмент, упрощающий решение подобных задач. Это — Responsive Image Linter.
Это — букмарклет, который можно добавить в браузер и использовать на собственном сайте. Когда его вызывают, он автоматически сканирует страницу, используя для тестирования изображений различные размеры области просмотра и плотность пикселей экрана.
Затем он выводит отчёт, содержащий сведения обо всех изображениях страницы, и о том, правильно ли организовано управление их размерами. Если при испытании страницы что-то пойдёт не так — вам об этом сообщат и даже дадут совет по устранению проблемы.
Итоги
Как видите, комбинация атрибутов srcset и sizes даёт огромные возможности. Настраивая эти два атрибута, вы сообщаете браузеру о ширине изображений, которые нужно использовать при определённой ширине области просмотра, и даёте список графических ресурсов, из которых браузер выбирает тот, который считает наиболее подходящим.
Если при работе с изображениями вам нужно решать более сложные задачи — знайте, что существуют средства и для решения таких задач. Скажем, это нечто вроде использования современных графических форматов наподобие WebP, или отправка клиенту разных изображений, зависящих от размеров экрана. Если вы хотите углубиться в работу с отзывчивыми изображениями — взгляните на этот материал.
HTML-изображения добавляются на веб-страницы с помощью элемента . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
Элементы и позволяют создавать карты-изображения с активными областями.
Вставка изображений в HTML-документ
1. ЭлементЭлемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент является строчным, то рекомендуется располагать его внутри блочного элемента, например,
или .
Элемент имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для элемента доступны следующие атрибуты:
1.1. Адрес изображения
Или же через относительный путь от документа или корневого каталога сайта:
- url(../images/anyphoto.jpg) — относительный путь от документа,
- url(/images/anyphoto.jpg) — относительный путь от корневого каталога.
Это интерпретируется следующим образом:
- ../ — означает подняться вверх на один уровень, к корневому каталогу,
- images/ — перейти к папке с изображениями,
- anyphoto.jpg — указывает на файл изображения.
1.2. Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файлов
- Формат JPEG(Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
- Формат GIF(Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
- Формат PNG(Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
- Формат APNG(Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
- SVG(Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
- Формат BMP(Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
- Формат ICO(Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
Элемент служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.
Для элемента доступен атрибут name , который задает имя карты. Значение атрибут name для элемента должно соответствовать имени в атрибуте usemap элемента :
Элемент содержит ряд элементов , определяющих интерактивные области в изображении карты.
3. ЭлементЭлемент описывает только одну активную область в составе карты изображений на стороне клиента. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.
HTML-элемент встраивает изображение в документ. Это замещаемый элемент.
Приведённый выше пример показывает очень простое использование элемента . Атрибут src обязателен и содержит путь к изображению, которое вы хотите встроить в документ. Атрибут alt содержит текстовое описание изображения, которое не обязательно, но невероятно полезно для доступности — программы чтения с экрана читают это описание своим пользователям, так они знают какое изображение показано, и так же оно отображается на странице, если изображение не может быть загружено по какой-либо причине.
Есть много других атрибутов, которые могут быть указаны для достижения различных целей, например:
- управление Referrer/CORS в целях безопасности. Смотрите ниже атрибуты crossorigin и referrerpolicy ;
- настройка внутреннего размера (en-US) с использованием width и height , которые полезны, когда вы хотите задать пространство занимаемое изображением, чтобы обеспечить стабильность макета страницы перед его загрузкой;
- адаптивные изображения рекомендуется использовать с атрибутами sizes и srcset (смотрите также элемент и наше руководство "Адаптивные изображения").
Потоковый контент, фразовый контент, встроенный контент, явный контент. Если элемент имеет атрибут usemap , он так же принадлежит к категории интерактивного контента. | |
Разрешённое содержимое | Никакое, так как это пустой элемент. |
---|---|
Пропуск тега | Должен иметь открывающий тег и не должен иметь закрывающий. |
Разрешённые родительские элементы | Любой элемент, который разрешает встроенный контент в качестве содержимого. |
Разрешённые роли ARIA | Любые |
DOM-интерфейс | HTMLImageElement |
Поддерживаемые форматы изображений
Стандарт HTML не содержит списка форматов изображений, которые должны поддерживаться. Поэтому разные пользовательские агенты поддерживают разные наборы форматов.
Firefox
Форматы изображений, поддерживаемые Firefox:
Ошибки загрузки изображения
Если ошибка происходит во время загрузки или отрисовки изображения и обработчик события onerror был настроен на обработку события error (en-US) , тогда этот обработчик события будет вызван. Это может произойти в ряде ситуаций, в том числе когда:
- атрибут src пустой или null;
- указанный URL в атрибуте src совпадает с URL страницы, на которой в данный момент находится пользователь;
- указанное изображение каким-то образом повреждено, что препятствует его загрузке;
- метаданные указанного изображения повреждены таким образом, что невозможно получить его размеры, и в атрибутах элемента не было указано никаких размеров;
- указанное изображение имеет формат, который не поддерживается пользовательским агентом.
Атрибуты
К этому элементу применимы глобальные атрибуты.
Этим атрибутом задаётся альтернативное текстовое описание изображения.
Примечание: Браузеры не всегда отображают изображение на которое ссылается элемент. Это относится к неграфическим браузерам (включая те, которые используются людьми с нарушениями зрения), если пользователь решает не отображать изображения, или если браузер не может отобразить изображение, потому что оно имеет неверный или неподдерживаемый тип. В этих случаях браузер может заменить изображение текстом записанным в атрибуте alt элемента. По этим и другим причинам вы должны по возможности предоставлять полезное описание в атрибуте alt .
Примечание: Пропуст этого атрибута в целом указывает, что изображение является ключевой частью контента и текстовый эквивалент не доступен. Установка этого атрибута в значение пустой строки ( alt="" ) указывает, что это изображение не является ключевой частью контента (декоративное), и что невизуальные браузеры могут пропустить его при рендеринге (en-US).
Этот атрибут указывает, следует ли использовать CORS при загрузке изображения или нет. Изображения с включённой поддержкой CORS могут быть повторно использованы в элементе не будучи "испорченными". Допустимые значения:
- anonymous : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется, но параметры доступа не передаются (т.е. нет cookie, не используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (не устанавливая HTTP-заголовок Access-Control-Allow-Origin ), изображение будет "испорчено" и его использование будет ограничено;
- use-credentials : Запрос cross-origin (т.е. с HTTP-заголовком Origin ) выполняется вместе с передачей параметров доступа (т.е. есть cookie, используется стандарт X.509 или базовая HTTP-аутентификация). Если сервер не предоставляет параметры доступа исходному сайту (посредством HTTP-заголовка Access-Control-Allow-Origin ), изображение будет "испорчено" и его использование будет ограничено.
Предоставляет рекомендации браузеру по декодированию изображения. Допустимые значения:
- sync : Декодировать изображение синхронно для одновременного отображения с другим контентом;
- async : Декодировать изображение асинхронно, чтобы уменьшить задержку отображения другого контента;
- auto : Режим по умолчанию, который указывает на отсутствие предпочтений к режиму декодирования. Браузер решает, что лучше для пользователя.
Указывает сравнительную важность ресурса. Приоритет выбирается с помощью значений:
- auto : Указывает на отсутствие предпочтений. Браузер может использовать собственную эвристику для определения приоритета изображения;
- high : Указывает браузеру, что изображение имеет высокий приоритет;
- low : Указывает браузеру, что изображение имеет низкий приоритет.
Это атрибут логического типа, указывающий, что изображение является частью серверной карты ссылок. Если это так, то точные координаты клика отправляются на сервер.
Примечание: Этот атрибут разрешён, только если элемент является потомком элемента с валидным (соответствующий требованиям) атрибутом href .
Указывает на то, как браузер должен загрузить изображение:
- eager : Загружает изображение немедленно независимо от того, находится оно в области просмотра или нет (является значением по умолчанию).
- lazy : Откладывает загрузку изображения до того момента, пока оно не достигнет подсчитанного расстояния области просмотра, определяемого браузером. Данное значение помогает избежать использования ресурсов сети и хранилища, необходимых для обработки изображения, пока это действительно не понадобится. В большинстве случаев использование этого аргумента улучшает производительность.
Примечание: Загрузка откладывается только тогда, когда включён JavaScript. Это анти-трэкинг мера. Если бы пользовательский клиент поддерживал опцию отложенной загрузки изображения при отключённом JavaScript, то сайт имел бы возможность отслеживать приблизительную позицию области просмотра в течение сессии пользователя, размещая изображения на странице таким образом, чтобы сервер мог отслеживать, сколько изображений загружено и когда.
Строка, указывающая, какой реферер (referrer) использовать при выборке ресурсов:
Список из одного или нескольких строк, разделённых запятыми, указывающих набор размеров источника. Каждый размер источника состоит из:
- Условия медиа-запроса. Должно быть пропущено для последнего элемента.
- Значения размера источника.
Значения размера источника устанавливаются исходя из предполагаемых размеров изображения. Пользовательские агенты используют текущий размер источника, чтобы выбрать один из источников, предоставленных атрибутом srcset , если эти источники описываются с помощью дескриптора ширины ' w ' (сокращение от width). Выбранный размер источника влияет на внутренний размер (en-US) изображения (отображаемый размер изображения, если не применены стили CSS). Если атрибут srcset отсутствует или не содержит значений с дескриптором ' w ', то атрибут sizes не будет иметь никакого эффекта.
src URL изображения. Этот атрибут является обязательным для элемента . В браузерах, поддерживающих srcset , src обрабатывается как изображение-кандидат с дескриптором плотности пикселей 1x , если только изображение с этим дескриптором уже не определено в srcset или если srcset не содержит дескрипторы ' w '. srcset
Список из одной или нескольких строк, разделённых запятыми, указывающих набор возможным источников изображения для использования пользовательскими агентами. Каждая строка состоит из:
-
изображения.
- Необязательного, пробела, сопровождаемого:
- дескриптором ширины или положительным целым числом, за которым сразу же следует ' w '. Дескриптор ширины делится на размер источника, полученный из атрибута sizes , для расчёта эффективной плотности пикселей;
- дескриптором плотности пикселей, который является положительным числом с плавающей точкой за которым сразу же следует ' x '.
Если не указано ни одного дескриптора, то источнику присваивается дескриптор по умолчанию: 1x .
Нельзя смешивать дескрипторы ширины с дескрипторами плотности пикселей в одном атрибуте srcset . Повторение дескрипторов (например, два источника в одном srcset с одинаковым дескриптором ' 2x ') так же является недопустимым.
Пользовательские агенты выбирают любой из доступных источников на своё усмотрение. Это предоставляет им значительную свободу действий для адаптации их выбора на основе таких вещей, как предпочтения пользователя или пропускная способность. Смотрите наше руководство "Адаптивные изображения" для примера.
Примечание: вы не можете использовать этот атрибут, если элемент является потомком элемента или .
Устаревшие атрибуты
Выравнивание изображения относительно окружающему его контексту. Этот атрибут больше не должен быть использован - вместо этого используйте CSS-свойства float и/или vertical-align . Вы можете так же использовать CSS-свойство object-position для позиционирования изображения внутри границ элемента . Допустимые значения:
- top : Аналог vertical-align: top или vertical-align: text-top ;
- middle : Аналог vertical-align: -moz-middle-with-baseline ;
- bottom : Отсутствует значение по умолчанию, аналог vertical-align: unset или vertical-align: initial ;
- left : Аналог float: left ;
- right : Аналог float: right .
Ширина рамки вокруг изображения. Вы должны использовать CSS-свойство border вместо этого атрибута. hspace Этот API вышел из употребления и его работа больше не гарантируется.
Отступ слева и справа от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута. longdesc Этот API вышел из употребления и его работа больше не гарантируется.
Ссылка на более подробное описание изображения. Возможными значениями являются URL или id элемента.
Примечание: Этот атрибут упомянут в последней версии от W3C, HTML 5.2, но был удалён из живого стандарта HTML от WHATWG. У него неопределённое будущее; авторы должны использовать альтернативы WAI-ARIA, такие как aria-describedby или aria-details.
Имя для элемента. Вы должны использовать атрибут id вместо этого атрибута. vspace Этот API вышел из употребления и его работа больше не гарантируется.
Отступ сверху и снизу от изображения в пикселях. Вы должны использовать CSS-свойство margin вместо этого атрибута.
Взаимодействие с CSS
является замещаемым элементом; по умолчанию он имеет значение свойства display равное inline , но его размеры по умолчанию определяются внутренними значениями (см. внутренний размер (en-US)) встроенного изображения. Вы можете установить на изображение такие свойства, как border / border-radius , padding / margin , width / height и так далее.
Однако, часто бывает полезно установить для изображений свойство display в значение block , так что вы имеете максимальный контроль над стилизацией (например, margin: 0 auto не работает на изображениях с display: inline , легче размещать изображения в контексте с окружающими элементами, когда они являются блочными).
У нет базовой линии, когда изображения используются в ситуации со строчным форматированием ( display: inline ) вместе с vertical-align : baseline , нижняя граница изображения будет размещена на базовой линии контейнера.
Вы можете использовать свойство object-position для позиционирования изображения внутри границ элемента и свойством object-fit регулировать размеры изображения внутри этих границ (например, должно ли изображение помещаться в границы элемента или заполнить элемент полностью, даже если потребуется обрезка).
В зависимости от типа, изображение может иметь собственную (внутреннюю) ширину и высоту. Для некоторых типов изображений тем не менее внутренние размеры (en-US) не обязательны. SVG-изображения, например, могут не иметь внутренних размеров, если для корня их элемента не заданы width и height .
Примеры
Альтернативный текст
Следующий простой пример встраивает изображение с альтернативным текстом в страницу для улучшения доступности.
Изображение-ссылка
Этот пример основан на предыдущем и показывает как превратить изображение в ссылку. Это очень просто сделать так — вы вставляете тег внутрь элемента . Также вы должны изменить альтернативный текст, чтобы он описывал назначение ссылки.
Использование атрибута srcset
В этом примере мы добавляем атрибут srcset , содержащий ссылку на версию логотипа в высоком разрешении; оно будет загружено вместо изображения в src на устройствах с высоким разрешением. Изображение указанное в атрибуте src , считается 1x кандидатом в пользовательских агентах, которые поддерживают srcset .
Использование атрибутов srcset и sizes
Атрибут src игнорируется в пользовательских агентах, которые поддерживают srcset , когда добавлены дескрипторы ' w '. Когда условие медиавыражения (max-width: 600px) совпадает с состоянием устройства, будет загружено изображение шириной 200px (оно то самое, которое наиболее близко соответствует 200px, указанным в медиавыражении), иначе будет загружено другое изображение.
Проблемы безопасности и приватности
Хотя у элементов есть множество безобидных применений, они могут иметь нежелательные последствия для безопасности и приватности пользователя. Смотрите "Заголовок Referer: проблемы приватности и безопасности" для получения дополнительной информации.
Проблемы доступности
Создание значимых альтернативных описаний
Значение атрибута alt должно чётко и кратко описывать содержимое изображения. Он не должен описывать наличие самого изображения или название файла изображения. Если атрибут alt намеренно пропущен, потому что изображение не имеет текстового эквивалента, рассмотрите альтернативные способы представления содержимого, которое изображение пытается передать.
Плохо
Хорошо
Когда у изображения отсутствует атрибут alt , некоторые программы чтения с экрана могут объявить вместо него имя файла изображения. Это может привести к путанице, если имя файла не соответствует содержимому изображения.
Атрибут title
Атрибут title не является приемлемой заменой атрибута alt . Кроме того, избегайте повторения значения атрибута alt в атрибуте title , объявленном на том же изображении.
Атрибут title также не должен использоваться в качестве подписи, сопровождающей альтернативное описание изображения. Если изображению нужна подпись, используйте элемент вместе с элементом .
Читайте также: