Руководство для начинающих по адаптивным изображениям: как сделать их правильно

Опубликовано: 2022-04-10

Если вы новичок в адаптивном дизайне или вам просто нужен краткий справочник по различным вещам, которые вы можете сделать в HTML и CSS для включения адаптивных изображений в свои проекты, этот учебник по адаптивным изображениям должен помочь.

На данном этапе создание хорошего внешнего вида и хорошей работы веб-сайтов на различных устройствах и платформах является неотъемлемой частью хорошего веб-дизайна и разработки. Больше нет разделения между «мобильным дизайном» и «дизайном рабочего стола». каждый веб-сайт, созданный сегодня, должен быть адаптивным и работать достаточно хорошо на любом устройстве. Большая часть адаптивного дизайна — адаптивные изображения.

Адаптивные изображения

В этом руководстве по адаптивным изображениям будут рассмотрены методы CSS, функции HTML и некоторые инструменты, которые вы захотите рассмотреть. Все это должно дать вам хорошее представление о том, как начать работу с адаптивными изображениями в ваших проектах уже сегодня.

Оглавление:

  • Адаптивные изображения с простым CSS
  • Адаптивные изображения с srcset и sizes
  • Использование srcset с дескриптором плотности пикселей
  • Использование элемента <picture>
  • Инструменты и сервисы, помогающие с адаптивными изображениями
Как создать #отзывчивые изображения для любого #веб-сайта, используя #HTML и обычный #CSS ️
Нажмите, чтобы твитнуть

Адаптивные изображения с простым CSS

Самый простой способ сделать любое изображение на веб-странице адаптивным, не требует медиазапросов или дополнительного HTML. Вы можете заставить любое изображение увеличиваться и уменьшаться в зависимости от размера окна с помощью пары строк HTML и CSS.

Во-первых, мой HTML будет включать атрибуты width и height :

< img src = "images/leopard.png" alt = "Responsive images: Leopard on a tree branch" width = "1000" height = "667" >
Язык кода: HTML, XML ( xml )

Рекомендуется включать значения width и height в HTML. Это гарантирует, что браузер зарезервирует необходимое пространство для изображения и не будет последующего перекомпоновки страницы при загрузке изображения.

Наряду с этим я собираюсь использовать следующий CSS:

img { max-width : 100% ; height : auto; }
Язык кода: CSS ( css )

Эти значения переопределяют мой HTML. Свойство max-width установлено на 100% , чтобы гарантировать заполнение всего необходимого пространства, максимум до 1000 пикселей (значение из HTML). Значение auto гарантирует, что height изображения сохраняет размеры изображения пропорциональными его естественной ширине и высоте. Если я удалю строку height: auto , изображение останется на высоте, определенной в HTML, независимо от ширины, что обычно не то, что мне нужно.

Вы можете попробовать этот простой пример, используя следующий CodePen. Лучше всего открыть демоверсию в новом окне, если вы хотите проверить скорость отклика.

Обратите внимание, что в моем примере естественные размеры изображения составляют 2000 x 1333 пикселей, но я выбираю отображать его с максимальным размером 1000 пикселей.

Теоретически я мог бы сделать это для каждого изображения на моей странице, и это был бы рудиментарный и приемлемый способ включения адаптивных изображений в мои проекты. Но в идеале я хотел бы перейти на следующий уровень и получить контроль над разрешением изображения и другими факторами, чтобы улучшить производительность и помочь с SEO, о чем я расскажу в следующих разделах.

Адаптивные изображения с srcset и sizes

В приведенном выше простом примере CSS я загружаю изображение размером около 1,44 МБ — даже после того, как я использовал сжатие без потерь для уменьшения размера. Это не страшно само по себе при просмотре на рабочем столе, но это определенно не тот размер, который я хочу загружать на маленькое устройство, такое как смартфон. Вот здесь и пригодятся атрибуты srcset и sizes .

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

Вот пример, в котором используется несколько версий изображения leopard.png из предыдущего примера:

< img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
Язык кода: HTML, XML ( xml )

Если вы никогда раньше не видели srcset и size sizes на первый взгляд это может показаться запутанным. Я разобью все это так, чтобы это было относительно легко понять.

Разбираем атрибут srcset

srcset принимает список из одной или нескольких строк, разделенных запятыми. Каждая строка содержит:

  • URL-адрес, указывающий на изображение
  • Один из следующих необязательных дескрипторов (разделенных пробелом):
    • Дескриптор ширины
    • Дескриптор плотности пикселей

В моем примере я включил дескриптор ширины, который вы будете видеть чаще всего. Я включил три разные версии изображения: большую версию с высоким разрешением, а также одну шириной 800 пикселей и другую шириной 480 пикселей.

Обратите внимание, когда я использовал дескриптор ширины в приведенном выше примере, синтаксис представляет собой значение ширины, за которым сразу следует «w» (не используйте значение единицы измерения «px»!). Для каждого из дескрипторов ширины, представляющих изображения, я использую внутреннюю ширину изображения в пикселях. Вы можете получить истинный размер любого изображения любым из нескольких способов — ссылаясь на его свойства в вашей файловой системе, фоторедакторе или даже в вашем браузере или инструментах разработчика браузера.

Разбивка атрибута sizes

Атрибут sizes работает только вместе с атрибутом srcset . Вы можете использовать только srcset (см. следующий раздел), но чаще всего srcset используется вместе с sizes .

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

  • Медиа-условие (аналогично медиа-запросам, используемым в CSS)
  • Значение, определяющее размер «слота», который будет занимать изображение.

Значением слота может быть абсолютная длина, такая как em или px , или относительная единица области просмотра (например, vw ). Обратите внимание, что в моем примере значения слота в атрибуте sizes не совсем соответствуют трем дескрипторам ширины. Вот код снова:

< img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
Язык кода: HTML, XML ( xml )

Тот факт, что значения слотов не совпадают в точности с дескрипторами ширины, в порядке вещей. В моем случае я могу разбить значение sizes следующим образом:

  • Окно просмотра шириной 600 пикселей загрузит изображение 480 Вт из значения srcset внутри слота шириной 480 пикселей.
  • Окно просмотра шириной 1000 пикселей загрузит изображение размером 800 Вт в слот размером 800 пикселей.
  • Полноразмерное изображение по умолчанию (2000 w) заполнит слот размером 1 000 пикселей, если предыдущие условия для мультимедиа не будут выполнены.

Последняя строка представляет собой только значение слота без условия мультимедиа. Как уже упоминалось, это гарантирует, что браузер будет что-то отображать, если ни одно из условий мультимедиа не будет выполнено, работая по умолчанию.

Вы можете просмотреть пример кода в действии, используя демо CodePen ниже. Обратите внимание, что в этом случае вам придется тестировать что-то, что имитирует разные устройства (например, DevTools в Chrome). Вы также можете открыть страницу, используя различные реальные устройства, чтобы провести настоящий тест. Для удобства я включил наложение текста на каждое из изображений, чтобы вы могли видеть, какое из них загружается при просмотре страницы.

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

Использование srcset с дескриптором плотности пикселей

Ранее я упоминал, что атрибут srcset можно использовать с дескриптором плотности пикселей. Этот дескриптор позволяет браузеру решить, какое изображение использовать, исходя из возможностей разрешения устройства. Вот как это выглядит:

< img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
Язык кода: HTML, XML ( xml )

Обратите внимание на пару вещей здесь. Во-первых, для обычного атрибута src я использую наименьшее изображение, обеспечивая подход, ориентированный на мобильные устройства. Затем атрибут srcset включает несколько других версий изображения с разрешением, указанным в дескрипторах 1,5x и 2x. Изображение 480 не включает дескриптор, поскольку подразумевается 1x. Наконец, обратите внимание, что здесь нет атрибута sizes , который мне не нужен в данном случае. MDN объясняет, как браузер выбирает изображение:

Пользовательский агент выбирает любой из доступных источников по своему усмотрению. Это дает им значительную свободу действий, чтобы адаптировать свой выбор на основе таких вещей, как пользовательские предпочтения или условия пропускной способности.

Чтобы понять, как работают дескрипторы, просто помните, что один пиксель устройства представляет каждый пиксель CSS. Таким образом, 1x будет соотношением 1:1, 1,5x будет соотношением 1,5:1 и так далее. Вы можете попробовать это в CodePen ниже, но вам придется использовать разные устройства (или использовать инструмент, который их имитирует), чтобы увидеть разницу.

Использование элемента <picture>

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

Элемент <picture> — это функция HTML, позволяющая предлагать альтернативные версии изображения в зависимости от наличия определенных медиа-функций. Это также позволяет переключать изображения, когда пользователь изменяет размер окна просмотра, и, по сути, позволяет вам выполнять художественное руководство с вашими изображениями, показывая разновидности одной и той же сцены, но обрезанные или увеличенные по-разному в зависимости от размера устройства.

Например, общий план с небольшим объектом посередине подойдет для более крупного устройства на рабочем столе или планшете, но устройство меньшего размера, такое как смартфон, может загрузить то же изображение, обрезанное или увеличенное.

Вот пример кода, который позволит мне сделать художественное направление на моем изображении:

< picture > < source media = "(min-width: 1000px)" srcset = "images/chipmunk.png" > < source media = "(min-width: 800px)" srcset = "images/chipmunk-zoom.png" > < img src = "images/chipmunk-closeup.png" alt = "Chipmunk in a field on a rock" > </ picture >
Язык кода: HTML, XML ( xml )

Обратите внимание на следующее в коде:

  • Элемент <picture> принимает несколько вложенных элементов <picture> в качестве дочерних элементов.
  • Каждый из элементов <source> внутри <picture> использует атрибут media для определения условия мультимедиа, которое запускает использование этого исходного изображения.
  • Элемент <picture> принимает обычные &lt;img&gt; элемент как дочерний, который браузер распознает как резервный, если он не поддерживает <picture>
  • Непосредственно в элементе <picture <picture> нет атрибутов ( <picture> принимает только глобальные атрибуты HTML и не имеет собственных атрибутов)

CodePen ниже демонстрирует это:

Если вы откроете демонстрацию в новом окне, вы можете изменить размер окна, чтобы увидеть изменение изображения. Обратите внимание, как объект изображения становится более крупным по мере того, как окно браузера становится меньше. Это простой способ сделать адаптивные художественные изображения, которые будут выглядеть уместно на любом используемом устройстве. Конечно, это требует немного больше работы, но это того стоит, если вы хотите, чтобы ваши изображения имели смысл на любом используемом устройстве.

Инструменты и сервисы, помогающие с адаптивными изображениями

Доступно бесчисленное множество инструментов, как бесплатных, так и коммерческих, которые помогут реализовать адаптивные изображения. И некоторые из них помогут вам даже избежать написания большей части кода, который я обсуждал. Вот некоторые из них, которые могут оказаться полезными:

  • Генератор контрольных точек адаптивного изображения — онлайн-инструмент для простого создания оптимальных размеров адаптивного изображения.
  • Images Responsiver — модуль Node, который преобразует простой синтаксис изображения HTML в улучшенный синтаксис адаптивных изображений.
  • gatsby-plugin-image — подключаемый модуль Gatsby, который обрабатывает сложные части создания изображений разных размеров и форматов.
  • lazySizes — быстрый, безопасный, оптимизированный для SEO и самоинициализирующийся ленивый загрузчик для изображений (включая отзывчивые изображения picture/srcset), iframe и многого другого.
  • WURFL.js — JavaScript, который определяет модели смартфонов, планшетов, смарт-телевизоров и игровых консолей, обращающихся к вашему веб-сайту.
  • Picturefill — старый проект, позволяющий использовать элемент <picture> в старых браузерах. Я бы рекомендовал избегать этого инструмента, так как он, скорее всего, раздует ваш код в браузерах, которые и без того работают медленно. Соответствующие резервные методы или подход, ориентированный на мобильные устройства, вероятно, лучше.

Важно и удобно то, что ряд различных сервисов могут автоматически создавать адаптивные изображения, предлагая такие функции, как различные размеры изображений, API для создания изображений «на лету» и многое другое.

Даже сам WordPress имеет встроенную поддержку адаптивных изображений (начиная с версии 4.4).

Еще один инструмент/сервис, на который стоит обратить внимание, — это Optimole. Это продвинутый инструмент оптимизации и доставки изображений, созданный командой разработчиков Themeisle. Это не только уменьшит размер ваших изображений на диске без ущерба для визуального качества, но также позаботится о доставке изображений посетителям вашего сайта через CDN изображений. Одним из аспектов этой функции доставки изображений является то, что ваши изображения также будут оптимизированы для просмотра на разных устройствах.

Доступна бесплатная версия Optimole. Он допускает до 5000 посещений веб-сайта в месяц и предоставляет вам все функции автоматического масштабирования, CDN и многое другое.

Каков ваш опыт работы с адаптивными изображениями на веб-сайтах? Дайте нам знать в комментариях ниже.

Как сделать #отзывчивые изображения с помощью #CSS и #HTML (с практическими примерами) ️
Нажмите, чтобы твитнуть

Не забудьте присоединиться к нашему ускоренному курсу по ускорению вашего сайта WordPress. С помощью некоторых простых исправлений вы можете сократить время загрузки даже на 50-80%:

Подпишитесь сейчас Изображение

Макет и презентация Криса Фицджеральда и Кэрол К.