In short, src is the attribute that links to the URL of an image. Srcset is a new attribute that allows you to link multiple images for different screen sizes, orientations, or display-types.
The sizes attribute specifies different image widths that are tied to browser conditions, which in turn helps to create responsive images.
Art direction improves visual presentation by showing different images on different display sizes. While a responsive image loads different sizes of the same image, art direction takes it a step further by loading different images depending on the display. The benefits of art direction are aesthetic, and provides no performance benefit over responsive images.
There are a number of ways to make images responsive on websites. The srcset and sizes attribute for the img element can provide a variety of sizes, and variations of the same image depending on browser conditions, screen sizes, and display types, etc. Art Direction, however, can be used as an alternative way to make images responsive depending on screen sizes and browser conditions. Art direction is used for having entirely different pictures depending on the screen sizes, such as incorporating cropped images instead, that focus on the most important aspect of an image for smaller screen devices.