Picture html – Использование тэга HTML5 picture для адаптивных изображений

Picture — новый элемент, которого нет / Habr

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

Новый элемент picture, решает следующие задачи, встающие перед разработчиком адаптивных веб-приложений (я воспользуюсь классификацией, предложенной pepelsbey на одной из недавних конференций по фронтенду):

1. Ретина, т.е. экраны с плотностью точек на дюйм 150 и выше, на которых обычное изображение выглядит размыто
2. Адаптивность, задача изменения размеров изображения согласно вашим правилам, прописанным в дизайне в зависимости от размера вьюпорта.
3. Формат, возможность использовать современные форматы, такие как WebP, если они поддерживаются браузером
4. Кадрирование или Художественные цели. Обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном.

Синтаксис

<picture>
  <source 
    srcset="<список URL c дескрипторами>" 
    [sizes="<ваши размеры в зависимости от раскладки>"] 
    [media="<медиавыражение>"] 
    [type="<mime/type>"]
  >
 <source ...>
  ...
  <img src="image.jpg" alt="My image" 
    [srcset="<список URL с дескрипторами>"] 
    [sizes="<ваши размеры в зависимости от раскладки>"]>
</picture>

Поэтому для большинства задач хватит сокращенной записи, совсем без использования picture

  <img src="image.jpg" alt="My image" 
    [srcset="<список URL с дескрипторами>"] 
    [sizes="<ваши размеры в зависимости от раскладки>"]>

Давайте рассмотрим как решаются вышеозначенные проблемы с помощью нового элемента. Все файлы примеров можно найти в этом репозитории github.com/fetis/picture

Для тестирования примеров из данной статьи на десктопе вам понадобятся либо Firefox Nighlty (поддержка picture включается настройкой dom.image.picture.enable в about:config), либо Chrome Canary, либо Opera Developer. На мобильном устройстве новый элемент можно протестировать в Chrome Beta

Ретина

       <img
        src="images/400.jpg"  
        srcset="images/800.jpg 2x, images/1200.jpg 3x"
       
        >

2x и 3x это дескрипторы плотностей пикселей, они говорят браузеру, что вот эти картинки были подготовлены для вот этой плотности, если хочешь, можешь использовать. Обратите внимание, они не заставляют бразуер использовать эти картинки, а только подсказывают ему. Окончательное решение остается за ним в зависимости от других условий, например, текущего соединения.

Атрибут src в данном случае служит источником картинки для плотности < 2 и фолбеком на случай, если браузер не поддерживает новый элемент.

Адаптивность

       <img
        src="images/400.jpg"  
        srcset=" 400w, images/800.jpg 800w, images/1200.jpg 1200w"
       
        >

Одновременное использование дескрипторов плотности и ширины недопустимо.

В атрибуте sizes перечисляются размеры изображения для всех контрольных точек в нашем дизайне. Контрольные точки задаются в виде обычного медиавыражения, браузер берет первое, которое возвращает Истину и дальше цепочку не рассматривает. Для значения ширины используется новая единица длины vw, которая возвращает значение в процентах от ширины вьюпорта.

Если для картинки нет необходимости использовать контрольные точки, то запись можно сократить до такой sizes="100vw". А для более сложных дизайнов можно использовать CSS-функцию calc(), например
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"

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

Как видите, мы уже покрыли 80% потребностей адаптивной верстки, а еще ни разу не использовали picture, настало время ему тоже вступить в игру.

Формат

      <picture>
        <source srcset="images/400.webp" type="image/webp">
        <img src="images/400.jpg"
          
        >
      </picture>

Кадрирование

      <picture>
        <source media="(min-width: 900px)" srcset="images/original.jpg 1200w">
        <source media="(min-width: 700px)" srcset="images/800crop.jpg 800w">
        <img 
          srcset="images/400crop.jpg 400w"
           
          >
      </picture>

РАФК

<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,
				 400w,
				opera-closeup-800.jpg 800w,
				opera-closeup-1200.jpg 1200w,
				opera-closeup-1600.jpg 1600w,
				opera-closeup-2000.jpg 2000w">
</picture>
 

Здесь используются 2 формата JPEG и WebP. При ширине экрана более 1280 пкс показывается полноразмерная картинка в половину вьюпорта. При ширине от 640 до 1279 показывается обрезанное фото на 60% ширины вьюпорта. При ширине экрана меньше 640пкс показывается обрезанная фотография на 100% ширины. Выбор под текущее DPI экрана производится на основе ширины исходных файлов.

Дополнительная информация

Использование тэга HTML5 picture для адаптивных изображений

От автора: Изображения давно известны как самые трудоемкие аспекты адаптивного веб-дизайна. Сегодня, мы увидим как можно использовать элемент picture в качестве решения проблемы адаптивных изображений прямо сейчас.

Перевод выполнила: Валерия Заруцкая Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

Во-первых, сама проблема

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

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

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

Нынешнее, самое распространенное решение

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

Одно «резиновое» изображение для всех устройств

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

Новое решение: тэг picture

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

Он позволит вам загружать различные изображения в зависимости от:

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

Плотность пикселей

Что означает, что вы можете:

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

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

Загружать изображения с высоким разрешением для экранов с высокой плотностью пикселей.

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

Как работает элемент picture?

Основные шаги для работы с элементом picture это:

Создание открывающих и закрывающих тэгов picture.

Внутри этих тэгов создайте элемент source для каждого запроса, который вы хотите произвести.

Добавьте атрибут media вашему запросу для таких вещей как высота окна просмотра, ширина, ориентация, и т.д.

Добавьте атрибут srcset с соответствующим именем файла изображения для загрузки.

Добавьте дополнительные имена файлов вашему srcset атрибуту, если вы хотите поддерживать экраны с высокой плотностью пикселей, например Ретина.

Добавьте элемент img в качестве запасного варианта.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<picture> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <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. Например, давайте посмотрим на первый пример кода выше с добавлением поддержки разрешения экрана «Ретина 2х»:

<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 в свой проект, он может применяться всего лишь загрузкой его в секцию head вашего сайта:

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

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

Ограничения Picturefill

IE9

Picturefill отлично работает в других версиях IE, однако IE9 не распознает элементы source, которые завернуты в тэги picture. Чтобы обойти это, условно оберните элементы source в тэги video, что сделает их видимыми для IE9, например:

<picture> <!—[if IE 9]><video><![endif]—> <source srcset=»smaller.jpg» media=»(max-width: 768px)»> <source srcset=»default.jpg»> <!—[if IE 9]></video><![endif]—> <img srcset=»default.jpg» alt=»My default image»></picture>

Android 2.3

Также как IE9, Android 2.3 не видит элементы source внутри тэгов picture. Однако, он распознает атрибут srcset, когда тот присваивается обычному тэгу img. Убедитесь в том, что вы включаете запасной элемент img с дефолтным именем файла в атрибуте srcset для Android 2.3 или любого другого браузера со схожей проблемой.

Требуется JavaScript и родная поддержка медиа запросов

Так как это решение реализовано на JavaScript, соответственно, оно нуждается в JavaScript для корректной работы в браузере. Picturefill 2.0 не предоставляет решений для “no-js”, потому что в противном случае, множество изображений стало бы появляться на страницах, когда родная поддержка будет реализована. Однако, вы можете использовать Picturefill 1.2 если возможность “no-js” важна для вас.

Следующим требованием Picturefill является родная поддержка медиа запросов, для того чтобы запросы в атрибуте media работали. Все современные браузеры поддерживают медиа запросы, в то время как IE8 и ниже является единственным не поддерживающим браузером с небольшой остаточной базой пользователей.

Возможны дополнительные HTTP запросы

Для браузеров, имеющих родную поддержку srcset, но не поддерживающих picture, возможно заданное имя файла в запасном элементе img может быть запрошено до того, как более подходящее изображение будет определено в элементе img. Эта проблема временная и она решится тогда, когда родная поддержка picture будет реализована.

Автор: Kezz Bracey

Источник: http://webdesign.tutsplus.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

| Справочник HTML

Элемент <picture> (от англ. «picture» ‒ «картина, изображение») представляет собой контейнер для хранения нескольких элементов <source>, каждый из которых содержит имена файлов альтернативных версий одного и того же изображения вместе с условиями, при которых те должны быть загружены. Это позволяет указывать разные изображения с учётом размера экрана, плотности пикселей, формата изображения и других параметров. Выбранный браузером вариант изображения выводится с помощью вложенного элемента <img>. Элемент <picture> может ускорить загрузку ваших сайтов, особенно на мобильных девайсах.

Примечание: В данный элемент может вкладываться несколько элементов <source>, после чего должен быть вложен один <img> элемент, за которым могут следовать скрипт-поддерживаемые элементы.

Вот несколько областей применения элемента <picture>:

• для ЖК-дисплеев «Retina», отличающихся высокой плотностью пикселей, можно загружать изображения с высоким разрешением;
• выводить картинки разного размера для браузеров мобильных или настольных устройств, например, обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном;
• загружать по-разному ориентированные изображения в разных пропорциях для того, чтобы соответствовать изменениям в макете, учитывающем ориентацию устройства;
• выводить изображение в векторном формате SVG, а для браузеров, его не поддерживающих, показывать картинку с другим расширением.

Синтаксис

<picture>
  <source srcset="URL">
  ... 
  <img src="..." alt="...">
</picture>

Закрывающий тег

Обязателен.

Атрибуты

Для этого элемента доступны глобальные атрибуты.

Различия между HTML 4.01 и HTML5

Элемент <picture> был введен в HTML 5.

Пример использования:

В следующем примере загружаемое изображение зависит от размера экрана:

Пример HTML:

<picture>
  <source media="(max-width: 25em)"
          srcset="iphone.png">

  <source media="(max-width: 48em)"
          srcset="[email protected]">

  <img src="iphone.png"
      alt="iPhone">

</picture>