Блог

Я использую элемент picture для предоставления изображений WebP, где это уместно, вот так:

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

Вопрос в том, где я должен разместить title атрибут. Должен ли я поместить это в img элемент или picture element?

Я не согласен с предыдущими плакатами. Я бы сохранил title в img элементе.

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

Далее в спецификации HTML говорится…

Элемент picture представляет собой контейнер, который предоставляет множество источников для содержащегося в нем элемента img…

… и затем

…сам элемент picture ничего не отображает; он просто предоставляет контекст для содержащегося в нем элемента img, который позволяет ему выбирать из нескольких URL-адресов

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

 <figure aria-labelledby="picturecaption1">
    <picture id="picture1">
        <source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
        <source srcset="image.gif" type="image/gif" />
        <img id="image1" alt="image:Image Alternate Text" title="The Image Description" src="image.jpg" width="200" height="200" loading="lazy" no-referrer="no-referrer" />
    </picture>
    <figcaption id="picturecaption1">My Image Caption</figcaption>
</figure>
  

Вы должны поместить title атрибут в picture тег, потому что <picture> тег также поддерживает глобальные атрибуты в HTML.

Например.

 <picture title="Your goes here">
  <source srcset="picture.webp" type="image/webp">
  <source srcset="picture.jpg">
  <img src="picture.jpg" alt="alt">
</picture>