The fact that an image is responsive to a screen means that its dimensions correspond to the dimensions of the screen, it is expressed in pixels, for example: 600px x 400px. The objective is therefore that the size of the image adapts to the dimensions of the screen, but also its resolution and quality.
The dimensions of an image must be adapted to the browser's screen: an image that is too large may take a long time to load and may not be visible during this loading time. An image that is too small may be displayed in a pixelated way.
This is why these adaptive images are necessary to make your website "responsive", i.e. the same page of a site will have a rendering adapted to the size of the screen you are using. It is therefore necessary to adapt your images to avoid having too big images on a smartphone, for example.
It is possible to save an image under different dimensions so that the one with the most adapted is loaded.
Defining different image dimensions is possible thanks to the "srcset" attribute. It is indicated in the following way: "(url alternative image 1) (width description), (url alternative image 2) (width description)".
<img src="image.jpg" srcset="small-image.jpg 480w, big-image.jpg 1080w">
Note that the width description is specified with the unit w, not px. This is the actual size of the image. It can be found by examining the properties of the image file on the computer.
When this attribute is specified, the browser loads the appropriate image.
It is important to leave the src attribute set, so that browsers that do not support the srcset attribute can display it.