src and srcset
The src attribute is required (as it contains the URL to the image) and is the basic level to insert an image. There will be just one version of the image, although adding a CSS rule will allow the image to shrink if it is too big for the parent container.
The srcset attribute defines a set of possible images that the browser will choose between and load depending on different factors, viewport size being the most common. As it is good practice to design for mobile first, an image sized for the smaller screen size, when rendered in a larger viewport may not present as well. Therefore allowing the browser to choose a larger image for a large screen will give a better result.
sizes
With the sizes attribute, the viewport size detemines the which image width the browser is to use. Instead of the browser choosing, the browser is told if the viewport is a certain size, then the image width is to be a defined width, similar to coding CSS for media queries. The width can be given in pixels or if using em or vw measurements, the width will be determined by the available space.
Why Art Direction?
Using the "Art Direction" concept for images gives the developer greater flexibilty in design, going beyond just resizing the image to fit the available space. Even though the same image is used, cropping different parts of the image or changing the format, landscape vs portrait, allowing for alternate versions of the image given what will be the best fit in a given layout situation. Another application is that it allows a variety of image formats to be used with the browser able to choose whichever is supported. The picture element is used in this context. It acts as a container for img and srcset. Here again, it tells the browser what image is to be used in which situation.
Summary
"Responsive Images" are images that will work on the different screen sizes and resolutions that are in use by the many browsers available to web users today. This gives the browser options to determine which image will give the best results based on the user's device. This can fall into two categories: resolution switching or art direction.
Resolution switching shows the same image but containing a different number of pixels which will affect the image's size. This allows the browser to choose a size or resolution depending the width of the display area, which is of importance to mobile users as they will be viewing the image on a small screen and it will decrease the bandwidth required to download and display the image.
Art direction in this context means formatting an image to best fit it's available space but also allowing a version of the image to be used which best conveys the image's content in order to obtain the desired response to the image.
It should also be noted that these HTML image attributes are not usually applied to images in the header, as those are better handled by CSS.