HTML теги figure, picture, img и их использование

В старые добрые времена одиночные изображения в контенте HTML-документа выводились с помощью тега img:

<img src="image.jpg" alt="Описание изображения" width="600" height="300">

Данная конструкция могла вставляться в контейнер или родительский блочный элемент (например, p) и служила для визуализации пояснений к окружающему его тексту. Иконки, фоны и другие декоративные элементы с помощью тега img выводить в принципе не предполагалось (хотя мало кто этому правилу следовал). Для этих целей применялись блочные элементы с CSS-свойством background-image.

С появлением адаптивной верстки атрибуты width и height утратили актуальность. Кроме этого появилась необходимость в семантическом “родителе” и элементе для описания изображений.

Тег figure

С июля 2015 года практически все браузеры обеспечивают поддержку универсального HTML-тега figure, который представляет собой средство вывода иллюстрации с необязательной подписью, иногда называемой заголовком. В общем виде тег представляет собой следующую конструкцию:

<figure>
  <img src="minsk.jpg" alt="Центр Минска">
  <figcaption>Фото центральной части Минска</figcaption>
</figure>

Внутри тега figure допускается более одного изображения:

<figure>
  <img src="minsk.jpg" alt="Центр Минска">
  <img src="vitebsk.jpg" alt="Витебск, площадь тысячелетия" >
  <figcaption>Фото городов Беларуси</figcaption>
</figure>

Контейнер figcaption служит для размещения описания, авторства, мета-данных и любой другой информации об изображениях и может находится как после, так и перед ними:

<figure>
  <figcaption>Функция cot_page_sync() модуля Page</figcaption>
  <pre>
    function cot_page_sync($category) {
        if (empty($category)) {
            return 0;
        }
    
        return (int) Cot::$db->query(
            'SELECT COUNT(*) FROM ' . Cot::$db->quoteTableName(Cot::$db->pages) .
            ' WHERE page_cat=?',
            $category
        )->fetchColumn();
    }
  </pre>
</figure>

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

Например, вот так:

<figure>
  <figcaption><cite>Козьма Прутков:</cite></figcaption>
  <blockquote>
    Если на клетке слона прочтешь надпись: буйвол, — не верь глазам своим
  </blockquote>
</figure>

Но мы все же вернемся к нашим картинкам и напомним, что тег figure уже является блочным элементом и используется вне контейнеров (например, все того же p).

Тег picture

Почти год спустя, в марте 2016 года кроссбраузерную поддержку получил picture – еще один HTML-тег, имеющий отношение к выводу изображений. Правда в отличие от figure, picture играет скорее функциональную, нежели семантическую роль, и служит прежде всего для обеспечения оптимальной версии изображения для конкретных условий (чаще всего это размер экрана). В контейнер picture включается как минимум один элемент source и один элемент img:

<picture>
  <source media="(min-width: 768px)" srcset="image_mobile.jpg">
  <source media="(min-width: 1200px)" srcset="image_desktop.jpg">
  <img src="image_mobile.jpg" alt="Описание изображения">
</picture>

Если указанное в свойстве элемента является истинным, браузер выведет изображение по пути, указанном в атрибуте srcset. Иначе он откроет картинку “по умолчанию” из тега img.

Атрибут media является не единственно возможным. Можно применить, например, атрибут type для вывода изображения в формате svg. Если браузер не поддерживает данный тип, будет открыта png-картинка:

<picture>
  <source srcset="logo.svg" type="image/svg+xml" />
  <img src="logo.png" alt="Some logo" />
</picture>

Можно ли использовать figure и picture вместе?

Вполне логичным является вопрос о комбинированном использовании обоих тегов. Хотя какие-либо официальные инструкции или указания на этот счет отсутствуют, и технически и семантически в совмещении обоих тегов нет никаких ошибок:

1. Контейнер figure может включать в себя изображения, графики, таблицы, примеры кода и проч.
2. Тег picture фактически является инструментом для формирования атрибута src / srcset для изображений, используемых в адаптивной верстке.
3. Блочный элемент figure может содержать в себе встраиваемые (инлайновые) элементы. picture является встраиваемым элементом.

Таким образом, с помощью элементов figure и picture можно организовать вывод адаптивных изображений в понятном и логичном виде. При этом, следующий HTML код будет абсолютно валидным:

<figure>
  <picture>
    <source srcset="image-big.png" type="image/png" media="(min-width: 1200px)"> 
    <source srcset="image-medium.png" type="image/png" media="(min-width: 768px)"> 
    <img src="image-small.png" alt="Описание изображения" class="img-fluid">
  </picture>
  <figcaption>Заголовок к изображению</figcaption>
</figure>

Конечно, это совершенно не отрицает нативное использование атрибутов srcset и sizes в теге img:

<img
  srcset="
    elva-fairy-320w.jpg 320w,
    elva-fairy-480w.jpg 480w,
    elva-fairy-800w.jpg 800w
  "
  sizes="(max-width: 320px) 280px,
    (max-width: 480px) 440px,
    800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Однако, как справедливо отмечает ресурс MDN Web Docs:

Атрибуты srcset и sizes кажутся сложными, но они не так плохи, если вы отформатируете их…

И все же, лично мне показалось, что figure+picture при абсолютном паритете в функционале более читабельны и понятны, а также не требуют “специального” многострочного форматирования.

Заключение

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

Все предложенные нами выше варианты визуализации изображений являются валидными и легитимными. Даже если вы привыкли выводить картинки по-спартански, в виде встраиваемых (инлайновых) элементов в родительском контейнере p, это будет полностью валидным.

Тем не менее, сегодня вы практически нигде не встретите изображения без пояснительных подписей. Это также своего рода признак того, что ваш ресурс является user-friendly. Использование же атрибута srcset открывает широкое поле возможностей для выбора не только размеров, но и соотношения сторон при адаптивной верстке. Например, в мобильной версии вы можете использовать картинки квадратной формы (соотношение сторон 1:1), а на десктопе вывести более подходящее для этого вида прямоугольное. Это не только сделает страницы вашего сайта гораздо более дружественными пользователю, но и избавят вас от необходимости в приведении прямоугольных картинок к квадратному виду с использованием JavaScript / CSS.