srcset in HTML5

The srcset attribute is an HTML5 attribute used in the <img> element to specify

multiple sources for an image. It allows web developers to provide different

versions of an image with different resolutions or sizes, and the browser can

choose which image to load based on the user's device or screen size.

The syntax for the srcset attribute is as follows:

<img src="example.jpg" srcset="example-2x.jpg 2x, example-3x.jpg 3x">

The 2x and 3x descriptors indicate the device pixel ratio for each image.

When the browser loads the image, it will choose the appropriate source

based on the device's pixel ratio.

The srcset attribute can also be used with the <source>

element to specify different sources for other types of

media, such as video or audio. For example:

<video>

<source src="example.webm" type="video/webm"

srcset="example-small.webm 400w, example-medium.webm 800w, example-large.webm 1200w">

<source src="example.mp4" type="video/mp4"

srcset="example-small.mp4 400w, example-medium.mp4 800w, example-large.mp4 1200w">

</video>

The 800w, and 1200w descriptors indicate the width of each video.

When the browser loads the video, it will choose the appropriate

source based on the device's screen size.