Src: The src attribute is used to tell what URL is to be used in this element. Src can be used in various HTML elements such as <img>, <script>, <video>, <iframe>, and <embed> to name a few. In the case of the <img> tag, src will add the url of the image to display: <img src="images/myimage.jpg">
Srcset: The srcset attribute is used to provide multiple source urls for one element. It also includes extra information to allow the browser to know which of the sources is the best option for it to choose. In the case of the <img> element, srcset can be used to supply multiple image sources followed by the images width (in pixels, written as: numw). An example of this used for images: <img srcset="images/myimage.jpg 200w, images/myimage-lg.jpg 800w">
Sizes: The sizes attribute is combined with the srcset attribute, and is used to specify which screen width to use each image at. Often the properties min-width or max-width are used along with the actual size of the image to specify when to use the image. To continue on the example above: <img srcset="images/myimage.jpg 200w, images/myimage-lg.jpg 800w" sizes="(max-width: 680px) 200px, 800px">
Art direction is what is done to make sure that the images you are using look good no matter what screen resolution they are being viewed on. Often a larger image looks great on a desktop monitor, but the smaller the screen gets, the more the image gets either cut off on the sides, or shrunk down so small that the original subject of the photo is hard to see.
By using art direction, you can include multiple versions of the image to use in a specific spot. These images account for screen size and either are different sizes or differently cropped versions of the same image. You can then use media queries in CSS to specify which of these images should be used at different screen widths.
The use of art direction allows the end user experience to be nice no matter what their screen size. Images are seen as they are supposed to be.
Creating responsive images is an important aspect of web design. It allows the designer to get really specific on which images are shown based on the screen size and browser capabilities of the end user. This helps to keep the images focused on the right area and to keep the site looking beautiful, no matter what the screen size.