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.