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

От автора: создание адаптивного изображения — это не ракетостроение. Я уверен, что вы уже много их создавали, используя CSS. Однако гибкий размер — это только один из факторов, когда речь идет об адаптивных изображениях.

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

Различные подходы к реализации адаптивных изображений

• Метод на основе пикселей устройства: этот подход позволяет использовать несколько версий одного и того же изображения с разным разрешением и выбирать наиболее подходящее для рендеринга в зависимости от разрешения экрана пользователя. Этот метод больше подходит для устройств, которые не отображают изображения с высоким разрешением.
• Метод гибкого изображения: по умолчанию изображения не являются гибкими. Они, как правило, обрезаются или остаются в фиксированном размере при изменении размера экрана. С помощью метода плавного изображения вы можете вставить изображение в адаптивный макет и дать возможность растягивать или сжимать по мере необходимости.
• Метод художественного направления: художественное направление — это обычная проблема, с которой мы сталкиваемся при работе с экранами разных размеров. Мы можем решить эту проблему, изменив содержимое изображения, обрезав изображение или используя другое изображение в зависимости от размера экрана пользователя.
• Метод переключения типов: есть некоторые браузеры и устройства, которые не поддерживают современные типы изображений, такие как WebP. Метод переключения типов может использоваться для переключения между типами изображений, что позволяет предоставлять пользователю лучший контент в зависимости от совместимости устройства и браузера.

Давайте посмотрим, как мы можем реализовать эти методы.

Реализация адаптивных изображений

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

По умолчанию, есть несколько отличных тегов и атрибутов, такие как img, picture, size и srcset использующихся в HTML для рендеринга изображений в веб — разработке. Теперь я покажу вам, как в кратчайшие сроки реализовать описанные выше методы с использованием этих тегов и атрибутов.

Метод на основе пикселей устройства

Прежде чем углубиться в подробности, позвольте мне рассказать вам о дисплеях высокой плотности. Современные флагманские мобильные устройства, такие как Samsung Galaxy S10, имеют дисплеи с 4-кратной плотностью, тогда как некоторые экономичные модели могут иметь дисплеи с низкой плотностью.

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

В приведенном ниже примере мы рассмотрим два изображения: small-kitten.jpg с 320×240 пикселями и large-kitten.jpg с 640×480 пикселями, в результате чего последний подходит для дисплеев с высоким разрешением. ( дескриптор x показывает ожидаемое соотношение пикселей устройства).

<img 
  srcset="small-kitten.jpg 1x, large-kitten.jpg 2x"
  src="small-kitten.jpg" 
  alt="A cute kitten" 
/>

Если разрешение устройства пользователя превышает 640×480 пикселей, будет отображаться large-kitten.jpg, а в противном случае — изображение small-kitten.jpg.

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

Метод гибкого изображения

Этот метод ориентирован на использование одного и того же изображения с разными размерами, а не на использование разных изображений.

Например, мы можем реализовать метод гибкого изображения, указав размер изображения в относительных соотношениях, а не указав точные значения пикселей. Чаще всего используется метод max-width:100%.

<img 
  src="black-dog.jpg" 
  style="max-width: 100%; 
  height: auto;"
  alt="Black dog image"
>

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

В качестве примера рассмотрим веб-страницу шириной 1200 пикселей и изображение шириной 500 пикселей. Тогда расчет того, сколько изображение займет на странице, будет следующим:

( ширина изображения [px] / ширина страницы [px] ) x 100 = ширина изображения[%] 
(500/1200) x 100 = 41,66%

Затем мы можем использовать это значение, как показано в приведенном ниже фрагменте кода. Это позволит изображению всегда масштабироваться в соответствии с размером веб-страницы.

<img 
  src="black-dog.jpg" 
  style="float: right; 
  width: 41.66%;"
  alt="Black dog image"
>

Однако этот расчет может вызвать некоторые проблемы, если область просмотра слишком велика или слишком мала.

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

<img 
  src="black-dog.jpg" 
  style="width: 41.66%; 
  max-width: 500px;"
  alt="Black dog image"
>

Метод Art Direction

Основная идея Art Direction — отображать разные изображения в зависимости от размеров экрана устройства. Мы можем решить эту проблему, переключившись на тег picture вместо использования тега img , поскольку он позволяет предоставлять изображения в нескольких соотношениях или нескольких точках фокусировки при просмотре на разных устройствах.

Знаменитый эксперимент с кошкой и методом художественного направления — Google Chrome

С помощью простого кода, подобнго приведенному ниже, можна получить вышеуказанный результат. Здесь мы предоставляем значения для двух разных атрибутов внутри элемента source : media и srcset — определение размера изображения и источника соответственно.

<picture>
  <source media="(min-width: 650px)" srcset="kitten-stretching.png">
  <source media="(min-width: 465px)" srcset="kitten-sitting.png">

  <img src="kitten-curled.png" alt="A cute kitten">
</picture>

В приведенном выше примере, если размер экрана больше 560 пикселей, браузер будет показывать изображения из первого srcset, а если размер экрана больше 465 пикселей и ниже 650 пикселей, браузер будет использовать второе изображение.

Заметьте, что обычный тег img является последним вложенным тегом элемента picture, который имеет решающее значение для работы этого фрагмента кода. Он будет использоваться в качестве замены, когда условия в медиа-запросе не совпадают, и в качестве резервной копии в браузерах, которые не поддерживают элемент picture.

Метод переключения типа изображения

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

Например, в приведенном ниже коде браузеру предлагается сначала загрузить .avif формат, а если это не удастся, то загрузить .webp . Если браузер не поддерживает эти форматы, то он будет использовать изображение .gif.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.gif" alt="photo" />
</picture>

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

Заключение

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

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

Источник

По теме: Выравнивание изображения в контейнере при помощи CSS