src and srcset
src is a tag that defines the location of a given image. srcset is a tag that allows you to define a multitude of images as the same source for a single image tag. By doing this, you can set either different images, or the same image with different sizes, as there is only one location for all these images, and it changes based on the situation. Another cool thing about using srcset is that if used properly, it can entirely replace src.
Sizes
One of the problems with srcset is that it doesn't know whether or not you've used CSS to change the inherent sizes of the various images you've placed in the set. In that case, you can use the Sizes element. By default, it starts out as 100wv, but you can assign it any kind of size property that you wish. By setting a min-width, you can determine how big a given image is when the size of the screen changes.
Art Direction
Having problems with wanting different image sizes to compensate for different screen sizes is what is known as The Art Direction Problem. the often used img tag is nice for normal situations, but this is not a normal situation. Instead, it is recommended that you use the Picture element. This allows you to add multiple source elements into the same tag, that function based on either a minimum or maximum width requirement.
Summary
In conclusion, we talked about a number of html elements, and why they are important for the Art Direction problem. We talked about src, which determines the source of an image, and srcset, which allows you to define multiple sources for the same location on a page. We talked about sizes, which allows you to change the size of these images based on width parameters. And we talked about Art Direction, which is the problem by which you want to use cropped images for different layouts, which requires the other elements above.