Приемы достижения адаптивности картинок на респонсивном сайте

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

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

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

 

Элемент HTML picture

Этот элемент позволяет добиться адаптивности изображения, реагируя на данные девайса: его разрешение, медиа-запросы и/или поддержку определенного формата изображения.

Ниже представлен пример HTML кода с этим элементом.

<picture alt="Альтернативное описание картинки">
  <source src="malenkaya.jpg">
  <source src="srednyaya.jpg" media="(min-width: 640px)">
  <source src="bolshaya.jpg" media="(min-width: 1280px)">
</picture>

 

Как видно из кода, в этом приеме используется метод подстановки картинок на основе медиа-запросов: по умолчанию идет картинка malenkaya.jpg, а если размер девайса больше 640px по ширине, тогда используется уже картинка srednyaya.jpg.  А для девайсов с шириной более 1280px — bolshaya.jpg.

 

Недостатки данного приема.

Элемент не поддерживается в браузерах Internet Explorer и Opera Mini.

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

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

Больше почитать про данную систему ВордПресс вы можете по этой ссылке.

 

Атрибут srcset

Другим популярным решением является использование атрибута srcset в теге img.

Этот атрибут позволяет определить различные источники изображения и «подсказки», которые помогают браузеру определить наиболее подходящий источник изображения для отображения (например, на ПК с высоким разрешением, на небольших смартфонах и т.д.).

Пример кода.

<img src="kartinka.jpg" srcset="malenkaya.jpg 640w 1x, malenkaya-hd.jpg 640w 2x, bolshaya.jpg 1x, bolshaya-hd.jpg 2x" alt="Альтернативное описание картинки">

 

Опять, как и в предыдущем приеме, идея атрибута сводится к медиа-запросам, встроенных в HTML. Здесь также нужно создавать различные размеры изображения.

Недостатки данного приема. Те же, что и для предыдущего приема.

 

Манипуляции с картинкой через CSS

Два вышеописанных приема имеют похожий недостаток: они используют встроенные в HTML медиа-запросы. По различным авторитетным рекомендациям это лучше всего делать через CSS.

Суть данного приема заключается в следующем: подготавливается одна картинка, а адаптивность достигается ограничителем для блока-контейнера с картинкой. Например, для картинок в CSS устанавливается максимальная ширина в 100% (т.е. полностью заполнять блок-контейнер)

img {width: 100%; max-width: 100%;}

 

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

Некоторые данные по этому вопросу вы найдете в соответствующей статье.

 

Недостатки данного приема.

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

 

Использование иконочных шрифтов

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

Примеры иконических шрифтов: Font Awesome, Fontello, Elegant Icon Font и похожие.

P.S. Похожего эффекта можно добиться и без использования дополнительных шрифтов – используя отдельно масштабируемые векторные картинки в формате SVG.

 

Обработка изображений на стороне сервера

Этот прием заключается в том, что картинка обрабатывается на сервере и отдается пользователю исходя, например, из размеров экрана девайса. Для таких операций используются скриптовые языки программирования (напр. PHP), которые на стороне сервера (а не в браузере) автоматически манипулируют с картинками.

Например, скрипт Adaptive Images определяет размер экрана посетителя сайта и автоматически создает, кэширует и подгружает изображение соответствующего размера в коде HTML веб-страницы.

Недостатки данного приема. Достаточная сложность настройки для начинающих.

 

 

Вывод

Как показала практика, для достижения оптимального результата приходится использовать практически все указанные приемы. Но наиболее часто используемый метод – это Манипуляции с картинкой через CSS используя медиа-запросы.

Напишите в комментариях ниже свои приемы и/или свои замечания к данной статье.