Image breakpoints

Image breakpoints define how many images are generated and referenced by the responsive image tag (be it the <img> or the <picture> element). Set them by clicking and dragging markers on the graph, and remember to specify the last one.

The graph does not represent the responsive continuum (so it might well extend beyond the max-width size of the largest viewport. In fact, this is very likely, since high density images have a pixel size two, three or more times as big as their layout size). The graph simply shows the size your image takes on every viewport and for various display densities (2x, 3x, ...).This allows you to visually see how images designed for different viewports overlap in size, allowing to reuse an image on multiple viewports, reducing the overall number of images generated and optimizing over caching, editorial workflows, storage, etc..

Art directed sizes appear in their own graph and do not support additional input. This is because the browser must use the exact image specified in the source when the rendering conditions match the specific viewport size.