LearningTransformsv1

Responsive images select an efficient source

The browser combines candidate metadata with layout and device conditions.

Output

A suitably sized image for the current display

Input

An image element with srcset and sizes candidates

Input

An image element with srcset and sizes candidates

A suitably sized image for the current display

Relationship

Before fetching, the browser estimates the rendered width and pixel density, then chooses an appropriate candidate.

developer.mozilla.org: Responsive images select an efficient sourcedeveloper.mozilla.org