1

I am using picture element to provide webP images where appropriate like this:

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

The questions is where should I place title attribute. Should I put it on img element or picture element?

michal.jakubeczy
  • 8,221
  • 1
  • 59
  • 63

2 Answers2

2

I disagree with the previous posters. I would keep the title on the img element.

According to the HTML5 spec's, the picture element is a container, and dependent on the img element for rendering of its source element choices. In fact, the img element is a requirement for picture, not just as a fallback. Therefore, picture is just a hollow wrapper around img and really doesn't do anything. img remains the primary conveyor of images.

The HTML specification goes on to say...

The picture element is a container which provides multiple sources to its contained img element...

...and then

...the picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs

That means the img element continues to represent the image and so in my opinion must have the title element. The fact that the img element's alt still works and title, even when a source image is chosen over img by the browser, shows the image element is what is active in the display. Below is an example of how I design images using the picture element.

<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>
Stokely
  • 12,444
  • 2
  • 35
  • 23
1

You should place title attribute in picture tag because The <picture> tag also supports the Global Attributes in HTML.

E.g.

<picture title="Your goes here">
  <source srcset="picture.webp" type="image/webp">
  <source srcset="picture.jpg">
  <img src="picture.jpg" alt="alt">
</picture>
Amaan warsi
  • 184
  • 4
  • 18