4R - Responsive Images

Definition and Explanation: src and srcset

srcset defines the set of images that the browser will choose between, and what size each image is. Each set of image information is separated from the previous one by a comma. src defines the location of the original image, and will be referenced if a browser does not support srcset.

Definition and Explanation: sizes

sizes defines a set of media conditions (for example, screen widths) and indicates what image size would be best to choose when certain media conditions are true.

Art Direction

Art direction is the idea of of setting focus or highlighting an image portion depending on the size of a display. The <picture> can be used to accomodate this by using multiple source elements with assigned media conditons to determine which image is shown.

Summary

Images within HTML can be made to be responsive by utilizing srcset or the picture element. This makes it so the appropriate sized images will be used for the different sized displays.