Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 05.07.2022)
36350
солдат
217
самолетов
187
вертолетов
1594
танков
3772
ББМ
806
артиллерия
105
ПВО
247
РСЗО
2634
машин
15
корабли и катера
Приемы достижения адаптивности картинок на респонсивном сайте

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

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

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

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

 

Элемент 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 используя медиа-запросы.

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

 

Добавить комментарий

Ваш адрес email не будет опубликован.