HTML5 picture для изображений

Если для адаптации изображения в содержании Вы используете CSS, подобно этому примеру « Адаптировать изображение в CSS3 » — это хорошо, но адаптировать не означает оптимизировать . Такой вариант адаптации изображения на большом экране ПК так же как и на маленьком экранчике мобильного устройства будет иметь одинаковый вес.

Группа W3C разработчиков стандартов для всемирной паутины поняли это, и предоставили нам новый элемент <picture> , который является естественно тегом HTML5 .

Элемент HTML5 <picture>

Элемент HTML5 <picture> определяет размер окна браузера и выбирает для отображения оптимальное изображение относительно окна просмотра. Элемент <picture> идеально подходит для мобильных устройств в которых медленно работает интернет.

Синтаксис <picture>

Для валидности элемент <picture> должен находится внутри тега <figure> и может содержать больше чем один контейнер <source> с уникальными атрибутами media , sizes , type , srcset :



<style>picture img { width: 100%; height: auto; }</style>
<figure>
   <picture>
      <source
            media="(min-width: 1024px)"
            sizes="70vw"
            type="изображение/webp"
            srcset="большое_изображение.png 1024w,
                    среднее_изображение.png 940w,
                    маленькое_изображение.png 520w.">
     <source
            media="(min-width: 465px)"
            srcset="небольшое_изображение.png 465w,
                    маленькое_изображение.png 320w.">
     <img src=
http://pixelcom.crimea.ua/"изображение.png"
            alt="Альтернативное описание изображения"
            longdesc="подробное_описание.html#description">
  </picture>
<figcaption>Подпись изображения</figcaption>
</figure>


Элемент <source>

Элемент <source> используется для загрузки мультимедийных данных, таких как видео и аудио, теперь и для изображений.

Вот что означают атрибуты элемента <source> :

media
Выполняет запрос media query (например, @media ="(max-width: 30em)" ).
sizes
Запрос ширины дескриптора (например, sizes="100vw" ) или объеденные media query с шириной дескриптора (например, sizes="(max-width: 30em) 100vw" ). Или разделенный запятыми список media query с шириной дескриптора (например, sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)" ), в котором последний элемент в списке используется как значение по умолчанию.
srcset
Обязательный атрибут указывающий изображение (например, srcset="изображение.png" ).Или разделенный запятыми список изображений:

  • большое_изображение.png 1024w,
  • среднее_изображение.png 640w,
  • маленькое_изображение.png 320w

Второе изображение в списке можно применить для изображений с разной плотностью пикселей (например, srcset="изображение.png, изображение@2х.png 2x" ) читайте далее

type
Запрос MIME-type (например, type="изображение/webp" или type="изображение/vnd.ms-photo" ) для отображения альтернативных форматов графических файлов.

браузер предварительно будет читать значение атрибута с первого элемента <source> и отображать наиболее подходящие изображение, остальные элементы <source> будут игнорироваться!

Элемент <img>

Элемент <img> также находится внутри контейнера <picture> в качестве резерва для случая если браузер не поддерживает элемент HTML5 <picture> или если нет исходного элемента. Поэтому элемент <img> в контейнере <picture> это обязательное требование — если вы забудете его, то изображение не будет отображаться в браузере.

И еще одно, элемент <img> должен быть как последний дочерний элемент контейнера <picture> если добавить первым или в середине контейнера, браузер будет игнорировать любые атрибуты <source> . В теге <img> также должен быть альтернативный текст с помощью атрибута alt .

Атрибут longdesc

Атрибут longdesc для элемента img был добавлен в HTML 4 и также является допустимым в HTML5. В отличии от предлагаемого атрибута alt, атрибут longdesc предназначен для более подробного описания. Самое интересное заключается в том что longdesc указывает гиперссылку на содержание подробного описания изображения.

Совместимость с плотностью пикселей

Совместимость с переменной плотности пикселей для высокого разрешения экрана таких как « Retina » используются дескрипторы 1x, 1, 5x, 2x, 3x. Изображение с переменной плотности пикселей также добавляется списком в атрибут srcset и в элемент <img> с атрибутом srcset .

В примере ниже, список изображений для экранов с переменной плотностью пикселей 1x, 1, 5x и 2x:



<picture>
  <source
    media="(min-width: 650px)"
    srcset="изображение.png,
            изображение@1.5x.png 1.5x,
            изображение@2x.png 2x">
  <source
    media="(min-width: 465px)"
    srcset="изображение.png,
            изображение@1.5x.png 1.5x,
            изображение@2x.png 2x">
  <img
    src=
http://pixelcom.crimea.ua/"изображение.png"
    srcset="изображение@1.5x.png 1.5x,
            изображение@2x.png 2x"
    alt="Альтернативное описание изображения"
    longdesc="подробное_описание.html#description">
</picture>


Альбомная или книжная ориентация

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

HTML5 picture для выбора окна просмотра
Выбор тегом HTML5 picture изображение по ширине окна просмотра

Код для примера:



<picture>
  <source media="(min-width: 800px)"
          sizes="80vw"
          srcset="изображение-640.jpg 640w,
                  изображение-1280.jpg 1280w,
                  изображение-2560.jpg 2560w">
  <img src=
http://pixelcom.crimea.ua/"изображение-160.jpg"
          sizes="80vw"
          srcset="изображение-160.jpg 160w,
               изображение-320.jpg 320w,
               изображение-640.jpg 640w,
               изображение-1280.jpg 1280w"
          alt="Альтернативное описание изображения"
          longdesc="подробное_описание.html#description">
</picture>


Вот как этот код работает: если для книжной ориентации окно просмотра шириной 800px. Браузер будет отображать изображение-640.jpg (640px) если устройство 2x, будет показано изображение-1280.jpg (1280px). Для альбомной ориентации всё просто, браузер покажет изображение размером больше чем 800px.

Заключение

Посмотрите демонстрацию элемента <picture> и начните его использовать. В настоящее время его поддерживает Хром 38. Для старых браузеров (в частности, IE), нужно добавить информацию о самом существовании элемента <picture> через JavaScript:



<script>document.createElement( "picture" ); </script>


Для поддержки в других обозревателях потребуется полифилл.

picture

Поэкспериментировать с демонстрацией элемента <picture> можно с помощью « Chrome DevTools ».

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>