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

При создании сайта перед разработчиками стоит задача, не только обеспечить функциональность проекта, но и делать так чтобы у сайта было одинаковое представление и юзабилити на всех устройствах. В свое время технология адаптивного дизайна и внедрение HTML 5 предоставили разработчикам новые возможности верстки страниц, за счет применения media queries и резиновых блоков с размерами в процентном соотношении от разрешения экрана. Это упростило решение поставленной задачи, но трудоемкость и наличие специфических знаний для создания адаптивного сайта никуда не исчезли. Если у Вас возникли проблемы с версткой, мы поможем их решить.

Принцип вывода изображений в адаптивной верстке не изменялся, несмотря на увеличение плотности пикселей в Retina display или сегментации разрешений в смартфонах. Обработка изображений в адаптивном дизайне осуществлялась с помощью сторонних дополнений: PictureFill, HiSRC, Mobify.

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

Атрибут srcset

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

Дескриптор –x позволяет отдавать картинки в зависимости от плотности пикселей дисплея пользователя. Начальное значение плотности пикселей – 1х. Если плотность пикселей в 4 раза превышает начальную, как в случае с Retina Display, то пользователь получает соответствующее ей изображение picasso4.jpeg.

Если требуется необходимо работать с шириной, то –x заменяется на –w. Размер можно задавать в любых удобных для вас единицах: em, %, rem, vw.

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

Атрибут sizes

Применения атрибута sizes похоже на использование media queries с операторами условия.

• Простое условие min-width: 768px;
• Условие «не равно»: (not (orientation: landscape))
• Условие «и»: (orientation: landscape) and (min-width: 768px)
• Условие «или» ((orientation: portrait) or (max-width: 768px))

Окончательная конструкция выглядит так

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