Src property is used to identify the path to display images, play audio or video. It is a simple version of displaying content on a website and is controlled by the CSS.
Srcset defines the set of images that allows the browser to choose between, and what size each image is. This allows the browser to select the appropriate image source according to screen size.
Sizes defines a set of media conditions, such as screen width and indicates what image size would be best to choose, when certain media conditions are true. Sizing responsive images is crucial to giving users an image that will function well with the size of their device's screen. This effect can be achieved by using size attributes, width and height.
The main purpose of art direction is to create emotional responses from an audience when reading articles, using products, or visiting a website. This is commonly used in advertisement. Art direction allows the image to be viewed based on media sizing, but also can be used to zoom in on or crop images based on that sizing. It allows the developer to look at the same image from a different angle.
Src, srcset and art direction are all used to present the layout of an image based on the media response. Src in conjunction with art direction tends to be more restricted and rely on CSS to work properly. Srcset gives flexibility in the presentation of images while also providing more control of the image based on the type of media.