src vs. srcset
The src attribute is used to point the browser to an image file that is to be loaded on a page. It is used for a single image. The srcset attribute can have multiple images that load depending on screen size. When using src the browser has to load the image to know its size, but with srcset the developer can specify the size to load based on the viewport size.
sizes
Sizes lets the developer tell the browser if the viewport is this size then use this specified image width. The browser then grabs the image from the images listed in the srcset attribute. The width specified in the sizes attribute is different than the actual image width. It creates a place holder for the image in the layout for the browser to put the image.
art direction
Images have an orientation. Landscape orientation is horizontal, and portrait is vertical. A developer may want to use a landscape oriented image in a browser on a computer screen, but a portrait oriented image on a cellular phone. Using different orientations of photos in the layout is art direction and it is accomplished with the picture element. The developer can use different orientation of images or cropped images for different viewports.
Summary
There are many ways to make a web page load images. Some browsers don’t support all image types and different viewports are different sizes. The srcset, and sizes attributes along with the picture element allow for some control on how the image will render on whatever device is being used to view the page.