Идеальные отзывчивые (responsive) изображения: HTML5 и Bootstrap 4
Bootstrap 4 находится в альфа — версии и имеет совершенно новый набор медиа — запросов и контрольных точек. Там где Bootstrap 3 имел их в пикселях, новый выпуск популярного фреймворка имеет точки останова в em.
Давайте использовать возможности этих новых медиа-запросов для создания изображений нужного размера , основываясь на модели устройства пользователя, на котором он просматривает наш сайт. Мы сохраним большую часть трафика для небольших устройств, и используем прекрасные большие изображения для настольных компьютеров.
Мы сделаем это с помощью HTML5 элемента <picture> и его мощным тегом source и атрибутами media и srcset .
Вы готовы? Тогда начнём.
Bootstrap 4 медиазапросы
Для начала давайте посмотрим на абсолютно новые медиа — запросы и точек останова в Boostrap 4. Они приспособлены для соответствия новейшим устройств, включая iPhone 6с и iPhone 6с Plus:
// Extra small devices (portrait phones, less than ???px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 34em and up)
@media (min-width: 34em) { ... }
// Medium devices (tablets, 48em and up)
@media (min-width: 48em) { ... }
// Large devices (desktops, 62em and up)
@media (min-width: 62em) { ... }
// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) { ... }
Как вы видите, запросы используют em вместо пикселей, что-бы отличать устройства друг от друга, и разбить их на категории:
- Смартфоны
- Планшеты
- Настольные компьютеры
- Большие рабочие станции
Теперь запомните или запишите эти четыре EM размера , которые Bootstrap 4 использует изначально, так как это понадобится в конце этого руководства. И давайте перейдём к следующей части головоломки, которую мы вместе собираем.
HTML5 элемент <picture>
Элемент <picture> является одним из многих интеллектуальных элементов в спецификации HTML5, и позволяет обслуживать различные изображения в зависимости от размера области просмотра браузера.
Подход гораздо удобнее , чем при использовании одного изображения и изменения его размеров в CSS. Изображение не подгоняется по размерам, а используются разные изображения для каждого размера окна просмотра.
Стандартный пример кода выглядит следующим образом:
<picture> <source srcset="picture-large.jpg, picture-large-2x.jpg 2x" media="(min-width: 800px)" /> <source srcset="picture-small.jpg, picture-small-2x.jpg 2x" media="(min-width: 450px)" /> <img src="picture-tiny.jpg" srcset="picture-tiny-2x.jpg 2x" alt="" /> </picture>
Если вы новичок в использовании элемента picture , сперва может быть немного сложно для понимания. Поэтому давайте разберем всё с самого начала и проанализируем каждый элемент по отдельности.
Picture
Это тег , который сообщает браузеру, что мы собираемся использовать разные размеры изображения в зависимости от размеров экрана. Все , что вам нужно сделать , это расположить его вокруг тегов source и img . Как есть, никаких атрибутов не требуется.
Source
Нам нужен тег source для каждого размера экрана, который мы будем использовать. Каждый тег source будет содержать media и srcset атрибут.
Media
Здесь находится min-width нашего медиа — запроса. Я думаю, вы знакомы с «media queries«. Если нет, то читайте больше о медиа — запросах и адаптивном дизайне. min-width срабатывает в зависимости от размера окна просмотра для загрузки соответствующего изображения из нашего следующего атрибута, srcset .
srcset
Здесь расположен наш источник изображения. Мы будем использовать изображение, размер которого точно подходят для экрана, инициировавшего наш медиа — запрос. Для более продвинутых пользователей в примере кода выше — этот атрибут может иметь несколько источноков, разделенных запятыми. Каждый из них будет загружать различные изображения в зависимости от плотности пикселей устройства. Например iPhone 6с имеет 2x плотность пикселей, а iPhone 6s Plus имеет 3x.
Теперь мы знаем все , что нужно для использования элемента picture.
Собираем все вместе: адаптивные HTML5 изображения для Bootstrap 4
То , что мы теперь будем делать очень просто: мы будем использовать как пример элемент picture , который мы только что рассмотрели, и адаптировать его для использования Bootstrap 4 медиа запросов.
Нам понадобится 5 различных изображений. Пример: extralarge.jpeg, large.jpeg, medium.jpeg, small.jpeg и extrasmall.jpeg:
<picture> <!-- Extra Large Desktops --> <source srcset="extralarge.jpeg" media="(min-width: 75em)" /> <!-- Desktops --> <source srcset="large.jpeg" media="(min-width: 62em)" /> <!-- Tablets --> <source srcset="medium.jpeg" media="(min-width: 48em)" /> <!-- Landscape Phones --> <source srcset="small.jpeg" media="(min-width: 34em)" /> <!-- Portrait Phones --> <img src="picture-tiny.jpg" srcset="extrasmall.jpeg" alt="" /> </picture>
Готово. Теперь мы имеем подстраивающиеся изображения, идеально подходящие для каждого устройства. Мы экономим трафик, и наши пользователи будут видеть изображения в лучшем формате, адаптированные к их размеру экрана.
Примечание: Порядок тегов source имеет важное значение. Начните с самых больших размеров в сторону уменьшения, и убедитесь , что по умолчанию img тег содержит наименьшее изображение. В противном случае браузер будет игнорировать наши теги source и будет всегда загружать изображение , указанное в теге img .
Bootstrap 4 скоро будет доступен, в данный момент имеется альфа — версия.
Источник
