Правильное использование тега «picture» для растягивающих изображений (HTML5)

Изображения, как известно, один из самых сложных аспектов для растягивающего веб-дизайна. Сегодня мы рассмотрим, как правильно использовать элемент <picture> именно в таком дизайне.

Итак, первая проблема

Дни фиксированной ширины и точных пикселей для веб-дизайна позади и это хорошо. В наши дни широкоэкранных мониторов, интернет-телевизоров, планшетов разных размеров и смартфонов множество, от 320px до 7680px и больше в ширину. Каждый проект будет страдать если не будет автоматически подстраиваться под эти размеры.

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

Так что же нам делать?

Текущий, один из лучших способов

Как правило, вы найдете следующее CSS строки в любом растягивающем сайте:

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

В этом коде используется свойство max-width: 100%; указания которого обеспечит, что изображения никогда не выходят за пределы ширины родительского контейнера. Если родительский контейнер сжимается меньше ширины изображения, изображение будет сворачивать вместе с ней. Свойство height: auto; обеспечит нам правильное соотношение сторон изображения сохраняя исходное.

Одно изображения подходит под любую ширину

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

Новое решения <picture>

<picture> это новый элемент, который стал частью HTML5.
Это сделает процесс размещения отзывчивых изображения до скорости с тем, как нынешние <audio> и <video> элементы работать. Это позволит нам разместить несколько изображений, каждый из которых определяет различные имена файлов и присвоить им условия, в которых они должны быть загружены.

Это позволит вам загружать изображения совершенно в иной образ в зависимости от:

• Результатов медиа запросов, высоты, ширины, ориентации
• Плотности пикселей

Это в свою очередь означает, что вы можете:

• Загрузить и подать в соответствующим размере изображения, оптимального использования и доступной пропускной способности.
• При загрузке по-разному сжимается/растягивается изображения в соответствие с различными соотношениями сторон, чтобы удовлетворить изменения макета на разной ширины.
• Загрузка изображения более высокого разрешения для плотности большего количества пикселей.

Различные изображения изменяются, в зависимости от обстоятельств

Как работать с <picture> ?

Основными этапами работы <picture> являются:

• Открыть и закрыть тег <picture></picture>
• В этих тегах, вставить теги <source> — элемент для каждого запроса, который необходимо запустить
• Добавить media атрибут, содержащий свойства такие как высота окна просмотра, ширина, ориентация и т.д.
• Добавить атрибут srcset — путь изображения для загрузки.
• Можно добавить дополнительные пути к файлам в атрибут srcset, если вы хотите, обеспечить идеальное изображения для различных плотностей пикселей, например Retina дисплеев.
• Добавить резервный <img> элемент.

Вот простой пример, который проверяет, является ли ширина просмотра меньше, чем 768px, если так — загружает меньшее изображение:

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)"> //если ширина экрана меньше 768 пикселей загружается маленькое изображения
    <source srcset="default.jpg"> // стандартное изображения
    <img srcset="default.jpg" alt="My default image">
</picture>

Хочу заметить, что синтаксис, используемый в атрибуте <media> такой же, как в CSS запросах других медиа. Вы можете использовать несколько проверок, то есть вы можете запросить max-width, min-width, max-height, min-height, orientation и так далее.

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

<picture>
    <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
// загружать это маленькое изображение если ориентация устройства горизонтальна 
    <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
// загружать это маленькое изображение если ориентация устройства вертикальна
    <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
// загружать стандартное изображение если ориентация устройства горизонтальная
    <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
// загружать стандартное изображение если ориентация устройства вертикальна
    <img srcset="default_landscape.jpg" alt="My default image">
</picture>

Если вы хотите, различные версии изображений с разным разрешением для дисплеев с более высоким уровнем плотности пикселей, вы можете сделать это, добавляя дополнительные пути к файлом атрибутом srcset.
Например, давайте посмотрим на наш первый фрагмент кода с обработкой для разрешения 2x сетчатки:

<picture>
    <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
    <source srcset="default.jpg, default_retina.jpg 2x">
    <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

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

Использования <picture> сегодня

Сейчас <picture> работает в Chrome, Firefox и Opera. В будущем, надеюсь, мы увидим широкую поддержку и в других браузерах которые также завоевали популярность.

В то же время, если вы не хотите ждать, но хотите использовать <picture> прямо сейчас. Можете использовать Picturefill 2.0 разработанный Filament Group.

После загрузки файла picturefill.js в проект, вам остается просто добавить его в главную часть вашего сайта:

<script src="picturefill.js"></script>

Существует также возможность загрузить скрипт асинхронно для дополнительной эффективности, которые вы можете прочитать в документации Picturefill.

При этом сценарий загрузки <picture> элемента будет работать, как я объяснил, только с несколькими ограничениями.

Полезные ссылки

• Узнать больше о Picturefill 2.0 и загрузить его для вашего проекта можете на странице Picturefill
• Получить полную информацию о <picture> элемента можете на responsiveimages.org.

Попробуйте <picture> в вашем проекте сегодня!

Автор: qWici

Источник