От автора: Наконец-то, по-настоящему отзывчивые изображения становятся реальностью в веб-разработке — на чистом HTML, без применения хитроумных хаков. Элемент picture и несколько новых атрибутов для элемента img уже появились в браузере Chromium 37 (а также скоро появятся и в браузере Opera), в браузере Firefox Nightly, и в настоящее время внедряются в движок WebKit (хотя еще предстоит узнать, будет ли компания Apple внедрять их в следующую версию браузера Safari).
Новый элемент picture может показаться сложным и непонятным, потому что он предназначен для решения целого ряда задач. Данная статья, содержащая много примеров, призвана помочь вам сделать так, чтобы синтаксис кода для отзывчивых изображений соответствовал вашим требованиям.
Четыре вопроса
Прежде чем вы начнете использовать отзывчивые изображения в вашем дизайне, вам всегда следует ответить на четыре следующих вопроса:
Изменяются ли размеры моих изображений в зависимости от установленных мной правил для отзывчивого веб-дизайна?
Хочу ли я осуществить оптимизацию под экраны с высоким разрешением (dpi)?
Хочу ли я использовать изображения с разными mime-типами для браузеров, которые их поддерживают?
Хочу ли я использовать разные графические изображения (иллюстрации) в зависимости от конкретных условий контекста?
Нижеприведенные примеры даны с учетом этих вопросов и выделяются ключевыми словами размеры, dpi, mime и графика, соответственно, а затем для каждого варианта ответа приводится фрагмент кода (сниппет) с кратким пояснением. При создании данных примеров я представлял себе вот этот вечерний снимок оперного театра в г. Осло — он также может вам пригодиться.
Моменты, о которых нужно помнить
Перед тем как вы приступите к просмотру примеров, вот несколько моментов, о которых следует помнить:
Элемент picture требует, чтобы в качестве последнего дочернего элемента был указан тег img. Без выполнения этого требования, ничего не будет отображаться. Это хорошо с точки зрения удобства применения, т.к. есть лишь одна стандартная позиция для указания альтернативного текста, и это классное запасное решение для старых версий браузеров, которые смогут обработать только элемент img.
Воспринимайте элемент picture, а также атрибуты sizes и srcset как полную замену атрибута src для тега img. Проверяйте параметр currentSrc на JavaScript, чтобы посмотреть, что было выбрано браузером. Старые версии браузеров естественно будут использовать просто img src.
Список атрибутов srcset и sizes является подсказкой для браузеров, а не командой. Например, если пиксельный коэффициент конкретного устройства (device-pixel-ratio) равен 1.5, тогда можно свободно использовать изображения с масштабом 1x или 2x, в зависимости от того, что будет известно о функциональности устройства, сети и т.д.
Запись img sizes=»(max-width: 30em) 100vw …» говорит: если условие этого «медиа-запроса» является истиной, то нужно показать изображение с шириной равной 100vw. Здесь будет использоваться первый «медиа-запрос», у которого условие будет истиной, поэтому очень важен порядок следования запросов.
Использование графической директивы
размеры dpi mime графика
|
1 2 3 4 5 6 7 |
<picture> <source media="(min-width: 1024px)" srcset="opera-fullshot.jpg"> <img src="opera-closeup.jpg" alt="The Oslo Opera House"> </picture> |
Для окон браузера с шириной равной 1024 CSS-пикселя и больше, будет загружена полноразмерная фотография; для окон браузера с меньшей шириной – фотография крупным планом.
Использование разных типов изображения
размеры dpi mime графика
|
1 2 3 4 5 6 7 |
<picture> <source srcset="opera.webp" type="image/webp"> <img src="opera.jpg" alt="The Oslo Opera House"> </picture> |
Браузеры, поддерживающие формат WebP, будут использовать изображение с расширением WebP; остальные браузеры будут использовать JPG.
Использование разных типов изображения и графической директивы
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<picture> <source media="(min-width: 1024px)" srcset="opera-fullshot.webp" type="image/webp"> <source media="(min-width: 1024px)" srcset="opera-fullshot.jpg"> <source srcset="opera-closeup.webp" type="image/webp"> <img src="opera-closeup.jpg" alt="The Oslo Opera House"> </picture> |
Для окон браузера с шириной равной 1024 CSS-пикселя и больше, будет загружена полноразмерная фотография; для окон браузера с меньшей шириной – фотография крупным планом. Эта фотография сохранена в формате WebP для браузеров, поддерживающих данный формат; для остальных браузеров предназначен JPG.
Использование изображений с высоким разрешением
размеры dpi mime графика
|
1 2 3 |
<img src="opera-1x.jpg" alt="The Oslo Opera House" srcset="opera-2x.jpg 2x, opera-3x.jpg 3x"> |
Браузеры, установленные на устройствах с высоким разрешением экрана, получат изображение высокого разрешения; другие браузеры получат обычное изображение.
Использование изображений с высоким разрешением и графической директивы
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 |
<picture> <source media="(min-width: 1024px)" srcset="opera-fullshot-1x.jpg 1x, opera-fullshot-2x.jpg 2x, opera-fullshot-3x.jpg 3x"> <img src="opera-closeup-1x.jpg" alt="The Oslo Opera House" srcset="opera-closeup-2x.jpg 2x, opera-closeup-3x.jpg 3x"> </picture> |
Для окон браузера с шириной равной 1024 CSS-пикселя и больше, будет загружена полноразмерная фотография; для окон браузера с меньшей шириной – фотография крупным планом. Вдобавок, эти фотографии будут с высоким разрешением для тех устройств, которые это поддерживают; остальным браузерам будет выдаваться обычное изображение.
Использование изображений с высоким разрешением и разных типов изображения
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 |
<picture> <source srcset="opera-1x.webp 1x, opera-2x.webp 2x, opera-3x.webp 3x" type="image/webp"> <img src="opera-1x.jpg" alt="The Oslo Opera House" srcset="opera-2x.jpg 2x, opera-3x.jpg 3x"> </picture> |
Браузеры, установленные на устройствах с высоким разрешением экрана, получат изображение с увеличенным в 2 или 3 раза количеством пикселей; остальные браузеры получат обычное изображение. Эти фотографии сохранены в формате WebP для браузеров, поддерживающих данный формат; для остальных браузеров предназначен JPG.
Использование изображений с высоким разрешением, разных типов изображения и графической директивы
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<picture> <source media="(min-width: 1024px)" srcset="opera-fullshot-1x.webp 1x, opera-fullshot-2x.webp 2x, opera-fullshot-3x.webp 3x" type="image/webp"> <source media="(min-width: 1024px)" srcset="opera-fullshot-1x.jpg 1x, opera-fullshot-2x.jpg 2x, opera-fullshot-3x.jpg 3x"> <source srcset="opera-closeup-1x.webp 1x, opera-closeup-2x.webp 2x, opera-closeup-3x.webp 3x" type="image/webp"> <img src="opera-closeup-1x.jpg" alt="The Oslo Opera House" srcset="opera-closeup-2x.jpg 2x, opera-closeup-3x.jpg 3x"> </picture> |
Для окон браузера с шириной равной 1024 CSS-пикселя и больше, будет загружена полноразмерная фотография; для окон браузера с меньшей шириной – фотография крупным планом. Вдобавок, эти фотографии будут с высоким разрешением для тех устройств, которые это поддерживают; остальным браузерам будет выдаваться обычное изображение. Эти фотографии также сохранены в формате WebP для браузеров, поддерживающих данный формат; для остальных браузеров предназначен JPG.
Использование размеров изображения
размеры dpi mime графика
|
1 2 3 4 5 6 7 |
<img src="opera-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-200.jpg 200w, opera-400.jpg 400w, opera-800.jpg 800w, opera-1200.jpg 1200w"> |
Для окон браузеров с шириной 640 CSS-пикселей и больше, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. Браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана.
Использование размеров изображения и графической директивы
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, opera-closeup-400.jpg 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w"> </picture> |
Для окон браузеров с шириной 1280 CSS-пикселей и больше, будет показана полноразмерная фотография, занимающая 50% от ширины окна просмотра; для окон браузеров с шириной 640-1279 CSS-пикселей, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. В каждом случае браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана.
Использование размеров изображения и разных типов изображения
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<picture> <source sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-200.webp 200w, opera-400.webp 400w, opera-800.webp 800w, opera-1200.webp 1200w" type="image/webp"> <img src="opera-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-200.jpg 200w, opera-400.jpg 400w, opera-800.jpg 800w, opera-1200.jpg 1200w"> </picture> |
Для окон браузеров с шириной 640 CSS-пикселей и больше, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. Браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана. Эти фотографии также сохранены в формате WebP для браузеров, поддерживающих данный формат; для остальных браузеров предназначен JPG.
Использование размеров изображения, разных типов изображения и графической директивы
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.webp 200w, opera-fullshot-400.webp 400w, opera-fullshot-800.webp 800w, opera-fullshot-1200.webp 1200w" type="image/webp"> <source sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.webp 200w, opera-closeup-400.webp 400w, opera-closeup-800.webp 800w, opera-closeup-1200.webp 1200w" type="image/webp"> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, opera-closeup-400.jpg 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w"> </picture> |
Для окон браузеров с шириной 1280 CSS-пикселей и больше, будет показана полноразмерная фотография, занимающая 50% от ширины окна просмотра; для окон браузеров с шириной 640-1279 CSS-пикселей, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. В каждом случае браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана. Эти фотографии также сохранены в формате WebP для браузеров, поддерживающих данный формат; для остальных браузеров предназначен JPG.
Использование размеров изображения и изображений с высоким разрешением
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 |
<img src="opera-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-200.jpg 200w, opera-400.jpg 400w, opera-800.jpg 800w, opera-1200.jpg 1200w, opera-1600.jpg 1600w, opera-2000.jpg 2000w"> |
Для окон браузеров с шириной 640 CSS-пикселей и больше, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. Браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана.
Использование размеров изображения, изображений с высоким разрешением и графической директивы
размеры dpi mime графика
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w, opera-fullshot-1600.jpg 1600w, opera-fullshot-2000.jpg 2000w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, opera-closeup-400.jpg 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w, opera-closeup-1600.jpg 1600w, opera-closeup-2000.jpg 2000w"> </picture> |
Для окон браузеров с шириной 1280 CSS-пикселей и больше, будет показана полноразмерная фотография, занимающая 50% от ширины окна просмотра; для окон браузеров с шириной 640-1279 CSS-пикселей, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. В каждом случае браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана.
Использование размеров изображения, изображений с высоким разрешением и разных типов изображения
sizes dpi mime art
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<picture> <source sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-200.webp 200w, opera-400.webp 400w, opera-800.webp 800w, opera-1200.webp 1200w, opera-1600.webp 1600w, opera-2000.webp 2000w" type="image/webp"> <img src="opera-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-200.jpg 200w, opera-400.jpg 400w, opera-800.jpg 800w, opera-1200.jpg 1200w, opera-1600.jpg 1600w, opera-2000.jpg 2000w"> </picture> |
Для окон браузеров с шириной 640 CSS-пикселей и больше, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. Браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана. Эти фотографии сохранены в формате WebP для браузеров, поддерживающих данный формат; для остальных браузеров предназначен JPG.
Использование размеров изображения, изображений с высоким разрешением, разных типов изображения и графической директивы
sizes dpi mime art
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<picture> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.webp 200w, opera-fullshot-400.webp 400w, opera-fullshot-800.webp 800w, opera-fullshot-1200.webp 1200w, opera-fullshot-1600.webp 1600w, opera-fullshot-2000.webp 2000w" type="image/webp"> <source sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.webp 200w, opera-closeup-400.webp 400w, opera-closeup-800.webp 800w, opera-closeup-1200.webp 1200w, opera-closeup-1600.webp 1600w, opera-closeup-2000.webp 2000w" type="image/webp"> <source media="(min-width: 1280px)" sizes="50vw" srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w, opera-fullshot-1600.jpg 1800w, opera-fullshot-2000.jpg 2000w"> <img src="opera-closeup-400.jpg" alt="The Oslo Opera House" sizes="(min-width: 640px) 60vw, 100vw" srcset="opera-closeup-200.jpg 200w, opera-closeup-400.jpg 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w, opera-closeup-1600.jpg 1600w, opera-closeup-2000.jpg 2000w"> </picture> |
Для окон браузеров с шириной 1280 CSS-пикселей и больше, будет показана полноразмерная фотография, занимающая 50% от ширины окна просмотра; для окон браузеров с шириной 640-1279 CSS-пикселей, будет показана фотография, занимающая 60% от ширины окна просмотра; для окон браузеров с меньшей шириной, будет показана фотография с шириной равной всей ширине окна просмотра. В каждом случае браузер выбирает одну из возможных фотографий из списка изображений с шириной 200px, 400px, 800px и 1200px, учитывая при этом ширину изображения и разрешение экрана. Эти фотографии сохранены в формате WebP для браузеров, поддерживающих данный формат; для остальных браузеров предназначен JPG.
Дальше – больше!
Не волнуйтесь, если сейчас вы не до конца во всем разобрались! Скоро, мы опубликуем подробную обучающую статью об элементе picture и отзывчивых изображениях. Тем временем, наслаждайтесь приготовлениями к тому, чтобы уменьшить нагрузку на пропускную способность Интернет-соединения вашего начальника и ваших клиентов, а также сделать ваш сайт еще производительнее.
Автор: Andreas Bovens
Источник: //dev.opera.com/
Редакция: Команда webformyself.
