It’s commonly used in responsive design when you want to provide different versions of an image to different devices or screen resolutions.
Here is an example of how it can be used:
```
```
In the above code, the browser will look at the `media` conditions in the `
The text within the `alt` attribute is used as alternate text for users who can’t view the image. This could be because of slow connection speed, an error in the `src` attribute, or if the user uses a screen reader.