src is a attribute that specifies the URL or path of the resource file, and we use it to identify a default image source to be used in browser that don't support srcset. On the other hand srcset defines the set of images we will allow the browser to choose between, and what size each image is. Each et of image information is separated from the previous one by a comma.
sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true.
The art direction involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person.
I learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them such as src, srcset.