В данной статье мы рассмотрим основные способы, с помощью которых вы, как владелец сайта с отзывчивым дизайном, сможете достичь адаптивности изображений на нем.
Сегодня, учитывая разнообразие девайсов с различной шириной экрана, адаптивный дизайн является одним из самых главных факторов успешности сайта. Если ваш сайт не адаптирован, например, к просмотру на планшете – считайте, что вы потеряли значительную долю его посетителей.
А составной частью адаптивного дизайна являются адаптивные картинки, которые отлично смотрятся на любом устройстве.
Элемент 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 используя медиа-запросы.
Напишите в комментариях ниже свои приемы и/или свои замечания к данной статье.
Нужно больше информации?
