Src and Srcset

Src is used when providing one image for the browser to pick and use, while srcset gives the browser multiple images to choose from depending on dimensions of said images and how the programmer delegates those to be used. "Each set of image information is separated from the previous one by a comma.""

Sizes [same link as above]

MDN defines the use of sizes as "a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true." So essentially, you set conditions for certain viewport sizes that determine which images get displayed by the browser. If your viewport is set to (min-width: 600px), then whichever image belongs to that condition will be the one displayed.

Art Direction [same link as above]

MDN Defines the art direction problem as "wanting to change the image displayed to suit different image display sizes." This means that a user could want the same two images displayed on a page for different sizes, but the samller image is displayed so it is zoomed in on the content of focus rather than being a smaller verison of the other image.

To Summarize

Responsive images can help make websites more appealing to the user. If a webpage has static images that are the same regardless of viewport, they can be hard to look at or easy to miss, depending on the size and whether they're designed for mobile or desktop use. Of course, not every website needs responsive images. But having them doesn't hurt!