What is the purpose of the <picture> tag?

<picture> allows serving different image versions depending on device, screen size, or

media type.

Example:

<picture>

<source srcset="photo-large.jpg" media="(min-width: 800px)">

<source srcset="photo-small.jpg" media="(max-width: 799px)">

<img src="photo-default.jpg" alt="Beautiful landscape">

</picture>

Key Takeaway:

Use <picture> for art direction — showing different images per device or context.