Responsive images
Listed inResponsive ImagesImages, Media and Fontson
MDN’s guide to `srcset` and `sizes`, including the difference between resolution switching and art direction.
External
MDN · developer.mozilla.org#images
#performance
Usually the largest bytes on the page, and the performance win nobody gets round to collecting.
10 articles
Listed inResponsive ImagesImages, Media and Fontson
MDN’s guide to `srcset` and `sizes`, including the difference between resolution switching and art direction.
Listed inFont LoadingImages, Media and Fontson
Preloading, `font-display`, and `size-adjust` — reducing both the flash and the layout shift it causes.
Listed inImage FormatsImages, Media and Fontson
AVIF, WebP, and JPEG — what to encode to, what to fall back to, and where the savings actually are.
Listed inResponsive ImagesImages, Media and Fontson
`srcset`, `sizes`, and `<picture>` — serving the right pixels for the layout rather than the largest ones.
Listed inSVGImages, Media and Fontson
Inline versus sprite versus file, accessible titles, and stripping what the design tool left behind.
Listed inVariable FontsImages, Media and Fontson
One file covering a whole weight axis, usually smaller than the three static cuts it replaces.
Listed inFont LoadingImages, Media and Fontson
`font-display`, preloading, and size-adjust — choosing which flash you would rather your users saw.
Listed inVideo and AudioImages, Media and Fontson
Streaming formats, poster frames, autoplay policies, and captions as a requirement rather than an extra.
Listed inLayout StabilityImages, Media and Fontson
Reserving space with width, height, and `aspect-ratio` so content never jumps under a reader’s eye.
Listed inLazy LoadingImages, Media and Fontson
Deferring offscreen work with `loading="lazy"` — and why the hero image must never be lazy.