Src is an attribute in HTML that specifies the URL of the source image.
Srcset is an HTML image attribute that specifies the list of images to use in different browser situations. The browser will pick the most optimal image version, based
on the screen size and resolution.
The sizes attribute tells the browser how many pixels it needs by describing the final rendered width of an image. We give the browser a bit of information about the page's layout a little ahead of time, so that it can pick a source before it has rendered any of the page's CSS. We pass the browser a CSS length that describe the image's rendered width.
Art direction is the concept of wanting to change the image displayed to suit different image display sizes. For example, if viewing on a mobile browser, the same image that is displayed in a large landscape shot, is now displayed in a shrunken version making the image very hard to see. So in conclusion, it is better to show a smaller portrait image on mobile.
In summary, src, srcset, and art direction are very important when it comes to having responsive images. Src is for browsers that don't understand srcset. Srcset has made responsive image sizing much simpler because it allows you to define a list of different sized versions of the same image and provide information about the size of each one. The concept of art direction helps us understand the appropiate display sizes for each image when we are viewing on a desktop browser or mobile.