05 Мар
Если вы относительно новичок в адаптивной верстке или просто хотите найти справочную информацию о различных вещах, которые вы можете сделать в HTML и CSS, чтобы сделать ваши изображения адаптивными, это руководство для вас. Адаптивные изображения улучшат скорость загрузки вашего сайта.
На данный момент создание сайтов, которые выглядят хорошо и работают быстро на различных устройствах и платформах, является неотъемлемой частью хорошего веб-дизайна и разработки. Нет больше разделения между «мобильным дизайном» и «десктопным дизайном«. Каждый сайт, созданный сегодня, должен быть адаптивным (его так же называют отзывчивым) и должен хорошо работать на любом устройстве.
Адаптивные изображения при помощи простого CSS
Простой способ сделать любое изображение на веб-странице адаптивным через css, не требует медиа-запросов или дополнительного HTML. Вы можете заставить любое изображение увеличиваться и уменьшаться в зависимости от размера окна всего за пару строк HTML и CSS.
Наш HTML код будет включать атрибуты ширины и высоты:
<img src="images/image.png" alt="Пример адаптивного изображения" width="1000" height="660">Включение значений ширины и высоты в HTML является хорошей практикой. Это гарантирует, что браузер резервирует необходимое пространство для изображения и не будет происходить последующего перерасчета страницы при загрузке изображения.
Вместе с этим, я собираюсь использовать следующий CSS:
img {
max-width: 100%;
height: auto;
}Эти значения переопределят мой HTML. Свойство max-width установлено на 100% для того, чтобы гарантировать, что оно заполняет необходимое пространство, до максимального значения в 1000px (значение из HTML). Значение высоты auto гарантирует, что высота изображения соответствует пропорциям его естественной ширины и высоты. Если я уберу строку height: auto, изображение останется на высоте, заданной в HTML, независимо от ширины, что недопустимо, так как без пропорций — изображение теряет смысл.
Адаптивные изображения с атрибутами srcset и sizes
Предположим мы загружаем на сайт картинку в 1,5 МБ. Она проходит обработку на сжатие и в итоге ее размер составит около 1 МБ. Это не ужасно, если просматривать на настольном компьютере, но это точно не тот размер, который я хочу загружать на маленьком устройстве, например, на смартфоне. В этом случае полезны атрибуты srcset и sizes.
Атрибут srcset позволяет указать несколько размеров изображения в одном значении. Это будут изображения, к которым браузер или устройство будут иметь доступ в определенных обстоятельствах. Атрибут sizes работает вместе с srcset, чтобы сообщить браузеру, какое изображение выбрать.
Вот пример, который использует несколько версий изображения image.png из предыдущего примера:
<img srcset="images/image-480.png 480w,
images/image-800.png 800w,
images/image.png 2000w"
sizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1000px"
src="images/image.png"
alt="Пример адаптивного изображения">Если вы никогда раньше не использовали атрибуты srcset и sizes, то вам может показаться немного запутанным на первый взгляд. Давайте разберемся, чтобы было понятнее.
Разбираем атрибут srcset
Атрибут srcset принимает список строк, разделенных запятой. Каждая строка содержит:
- URL-адрес, указывающий на изображение
- Один из следующих дополнительных дескрипторов (разделенных пробелом):
- Дескриптор ширины
- Дескриптор плотности пикселей
В моем примере я использовал дескриптор ширины, который вы чаще всего будете видеть. Я включил три различных версии изображения:
- большое изображение с высоким разрешением,
- а также одно с шириной 800 пикселей
- и другое с шириной 480 пикселей.
Обратите внимание, что при использовании дескриптора ширины в приведенном выше примере синтаксис состоит из значения ширины, сразу за которым следует «w» (не используйте значение единицы «px»!). Для каждого дескриптора ширины, представляющего изображения, я использую внутреннюю ширину изображения в пикселях. Вы можете получить размер любого изображения различными способами — обращаясь к его свойствам в файловой системе, в фоторедакторе или даже в вашем браузере или инструментах разработчика браузера.
Разбираем атрибут sizes
Атрибут sizes работает только совместно с атрибутом srcset. Можно так же использовать только srcset, но наиболее распространенным способом является использование srcset вместе с sizes.
Атрибут sizes принимает список строк, разделенных запятой. Каждая строка содержит:
- Медиа-условие (аналогично медиа-запросам, используемым в CSS)
- Значение, определяющее размер «слота«, который будет занимать изображение
Значение слота может быть абсолютной длиной, такой как em или px, или относительной единицей, связанной с размером окна просмотра (например, vw). Обратите внимание, что значения слотов в атрибуте sizes в моем примере не совпадают с тремя дескрипторами ширины. Вот код еще раз:
<img srcset="images/image-480.png 480w,
images/image-800.png 800w,
images/image.png 2000w"
sizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1000px"
src="images/image.png"
alt="Пример адаптивного изображения">То, что значения слотов не соответствуют дескрипторам ширины, нормально. В моем случае, я могу разложить значение sizes следующим образом:
- Экран с шириной 600px загрузит изображение шириной 480 пикселей из значения srcset в слоте шириной 480 пикселей.
- Экран с шириной 1000px загрузит изображение шириной 800 пикселей в слоте шириной 800 пикселей.
- Полноэкранный размер изображения (2000w) будет занимать слот шириной 1000 пикселей, если предыдущие медиа-условия не будут выполнены. Последняя строка — это одиночное значение слота, без медиа-условия. Как упоминалось ранее, это гарантирует, что браузер будет иметь что-то для отображения, если ни одно из медиа-условий не будет выполнено, работая как значение по умолчанию.
Использование атрибута srcset с дескриптором плотности пикселей
Ранее я упоминал, что атрибут srcset можно использовать с дескриптором плотности пикселей. Этот дескриптор позволяет браузеру выбирать изображение на основе возможностей устройства. Вот как это выглядит:
<img srcset="images/image-480.png,
images/image-800.png 1.5x,
images/image.png 2x"
src="images/image-480.png"
alt="Пример адаптивного изображения">Обратите внимание на несколько вещей здесь. Во-первых, для обычного атрибута src я использую самое маленькое изображение, обеспечивая мобильный подход. Затем, атрибут srcset включает несколько других версий изображения, где разрешение указывается с помощью дескрипторов 1.5x и 2x. Изображение 480 не имеет дескриптора, потому что подразумевается 1x. Наконец, обратите внимание, что в этом случае отсутствует атрибут sizes, который мне не нужен.
Чтобы понять, как работают дескрипторы, просто запомните, что один пиксель устройства соответствует каждому пикселю CSS. Таким образом, 1x будет соотношением 1:1, 1.5x — соотношением 1.5:1 и т.д.
Использование тэга <picture>
Рассмотренные выше подходы для создания адаптивных изображений предполагают, что я всегда отображаю одно и то же изображение, но в разных размерах и разрешениях. И хотя во всех примерах я использую CSS для изменения ширины изображений при изменении размера браузера пользователем, само изображение на самом деле никогда не изменяется после загрузки страницы.
Тэг <picture> является функцией HTML, которая позволяет предложить альтернативные версии изображения на основе наличия определенных медиа-функций. Это также позволяет менять изображения при изменении пользователем размера области просмотра и, по сути, позволяет управлять внешним видом изображений, показывая различные варианты одной и той же сцены, но обрезанных или увеличенных в зависимости от размера устройства.
Например, широкая картинка с маленьким объектом в середине будет подходящей для большого устройства, такого как настольный компьютер или планшет, но для меньшего устройства, типа, смартфона, может загружаться то же изображение, но уже обрезанное или даже увеличенное.
Вот пример кода, который позволяет мне управлять внешним видом изображения:
<picture>
<source media="(min-width: 1000px)" srcset="images/image.png">
<source media="(min-width: 800px)" srcset="images/image-zoom.png">
<img src="images/image-closeup.png" alt="Изображение">
</picture>- Элемент
<picture>принимает несколько вложенных элементов <picture> в качестве дочерних - Каждый из элементов
<source>внутри <picture> использует атрибут media для определения медиа-условий, которые вызывают использование этого исходного изображения - Элемент <picture> принимает обычный элемент <img> в качестве дочернего, который браузер распознает как резервный, если не поддерживает <picture>
- На элементе <picture> нет атрибутов непосредственно (<picture> принимает только глобальные атрибуты HTML и не имеет своих атрибутов)
Если вы попробуете протестировать код выше, то увидите, как объект изображения становится более увеличенным, когда окно браузера становится меньше. Это легкий способ создания адаптивных (отзывчивых) изображений. Конечно, это требует немного больше работы, но оно стоит того, если вы хотите, чтобы ваши изображения имели смысл на любом используемом устройстве.
Адаптивные изображения: Инструменты и Сервисы
Существует бесчисленное количество инструментов, как бесплатных, так и коммерческих, которые помогут в генерации адаптивных изображений. Некоторые из них позволяют избежать написания многих строк кода, которые были описаны ранее. Вот несколько полезных инструментов:
- Responsive Image Breakpoints Generator — онлайн-инструмент для генерации оптимальных размеров отзывчивых изображений.
- lazySizes — быстрый и SEO-дружелюбный ленивый загрузчик для изображений (включая отзывчивые изображения picture / srcset), ифреймов и многого другого.
- WURFL.js — JavaScript, который определяет модели устройств смартфонов, планшетов, смарт-телевизоров и игровых консолей, обращающихся к вашему веб-сайту.
Заключение
В заключение можно сказать, что создание адаптивных изображений — важная часть современной верстки, которая позволяет улучшить UX на различных устройствах и увеличить скорость загрузки страниц. Не стоит забывать о правильной оптимизации изображений, чтобы они не тормозили загрузку страницы. Даже WordPress сам по себе поставляется с встроенной поддержкой отзывчивых изображений (начиная с версии 4.4). Используя адаптивные изображения и соответствующие инструменты, вы можете создать сайт, который будет выглядеть и работать отлично на любом устройстве, улучшая настроение пользователей и повышая конверсию.
