What is src and srcset
Both src and srcset are used to embed images to a webpage. The original src is best used with scaled image of a certain width and height. srcset is more advanced and targets images for different screen sizes depending on users' viewport.
Sizes
The sizes attribute describes the size of the image that will display within the layout of a website. It contains a list with the sizes of the image in relation to the viewport.
The concept of Art Direction
The Art Direction ensures that the point of interest of the image is always shown in detail regardless of the display. There are no other benefit or Art Direction rather that aesthetic.
Summary
There are three reasons why it is beneficial to use responsive images:
- A higher quality images on different devices
- Loading the right image - Art Direction
- Faster loading websites