Responsive Images: Write srcset and sizes From the Layout
Derive responsive image candidates from real layout widths, then verify the browser choice instead of copying a generic srcset snippet.
Read the method →Category field notes
Responsive Delivery
Candidate widths, sizes rules, art direction, high-DPI planning, and CSS delivery choices grounded in real layouts.
Choose Image Dimensions for High-DPI Screens Without Overserving
Use rendered slot width and device pixel ratio to plan candidates while avoiding a one-size-fits-all 2× export rule.
Read the method →Art Direction With picture: Change the Crop, Not Just the Format
Use the picture element for meaningful mobile and desktop crops while preserving an accessible img fallback and consistent subject matter.
Read the method →Responsive CSS Background Images Without Hiding the LCP Resource
Decide when an image belongs in CSS, build responsive variants, and make critical background resources discoverable and measurable.
Read the method →