The HTML element displays responsive images on web pages. It allows web developers to provide multiple sources of an image, specifying different versions for various screen sizes or resolutions.

This ensures that the most suitable image is loaded for each user’s device, optimizing performance and user experience.

The element consists of one or more  elements nested inside it, followed by an element for fallback content. Here’s a basic example of the syntax: 

In this example, three different versions of an image are provided. The browser will choose the most appropriate one based on the viewport size calculated at a min-width media size.

Here, images are selected based on the device’s orientation, ensuring the correct image is displayed for portrait and landscape views. A design may take a different form depending on the device’s orientation to view the content.

Check out the full-screen version and resize the browser to see the image selection in action.

This example targets high-DPI (Retina) displays by providing a 2x resolution image with the @2x suffix.

It’s important to note that the @2x suffix in the srcset attribute does not trigger the browser’s high-DPI (Retina) display recognition. The @2x convention is commonly used in file naming to indicate higher pixel density or resolution versions of images for the benefit of developers and designers. Consider it a design pattern.

The element supports global attributes.

The element accepts multiple elements followed by an element for fallback content. Each element should have a srcset attribute, and the element should have a src and alt attribute.

-