does the <picture> element in html5 make the "alt" attribute obsolete?

Question

Working on a portfolio for a photographer / videographer and trying to find a good balance between fast load and good image quality on mobile devices. So far, I'm keen to bet on the picture element to load multiple versions of the images based on device max width like so:

<picture>    
    <source media="(max-width: 360px)" 
            srcset="picture_small.jpg">

    <source media="(max-width: 640px)"
            srcset="picture_medium.jpg">

    <source media="(max-width: 1366px)"
            srcset="picture_large.jpg">

    <img src="picture_original.jpg" width="6000" height="4000"
         alt="Really usefull description for each image">
</picture>

My concern is that the "alt" attribute will be ignored all together by user agents for the first 3 versions of the picture and hope of search engines to use it is also a long shot.

Baumgartner

Answer 1

The <picture> element is a container only. The <img> element is the main part describing its contents. <source> only describes different sources. So the alt remains the same for all of them.

You cannot have a picture element without an img element. alt is a requirement in <img> and is part of its specification in the standard.

Submerse

Thanks for the fast response. I had the exact same view until I tried a practical approach: If you try this example on a browser and delete the path of the first source, you will not get the content of the "alt" attribute. Instead, it jumps to the next image. The content of the "alt" attribute is only displayed when none of the images are available. This made me think that the attribute is only applied to the last image. – Baumgartner