email
forum

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

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

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

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

Атрибут srcset

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

1
<img src="picasso1.jpeg"   srcset="picasso2.jpeg 2x, picasso3.jpeg 3x, picasso4.jpeg 4x">

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

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

1
<img src=" picasso1.jpeg "    srcset=" picasso2.jpeg 400w, picasso3.jpeg 768w, picasso4.jpeg 1366w">

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

1
2
3
4
<img src=”van_Gogh.jpg"   srcset=" van_Gogh2.jpg 400w, van_Gogh3.jpg  768w, van_Gogh4.jpg 1366w"
            sizes="
<media condition> <width>,
            <media condition> <width>,
            <optional default  image width>">
Атрибут sizes

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

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

1
2
3
4
5
6
7
<picture>
    <img src="dali.jpeg"    srcset=" dali2.jpeg 400w, dali3.jpeg 768w, dali4.jpeg 1366w"
        sizes="(min-width: 900px) 1000px,
        (max-width: 900px) and (min-width: 400px) 50em,
        (( not (orientation: portrait) ) 300px,
        ((orientation: landscape) or (min-width: 1000px)) 50vw,   100vw"
>
</pictures>

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

Запись опубликована: 27.01.2017