Image optimization (WebP/AVIF, responsive srcset)
Shipping each visitor the smallest image that still looks right: modern format, sized for their screen, not one giant JPEG for everyone.
See it
What it is
Three separate levers, usually confused for one. Format: AVIF usually wins on photographic content, often by a lot, but not always. It loses often enough on small flat graphics and fine noisy detail that you should encode both and compare the actual bytes. WebP is the safe everywhere option, JPEG is the fallback, and PNG is for flat graphics with transparency, not photos. Dimensions: 'srcset' lists the same photo at several widths and 'sizes' tells the browser how wide it will actually render, so a phone downloads the 600px file instead of the 2400px one. Quality: photos often survive somewhere in the 50 to 70 range, but the right number is encoder-specific and image-specific. Gradients and skin tones fall apart earlier than busy texture, so tune against your worst asset instead of trusting one global setting.
Use '<picture>' when you need real fallbacks (AVIF source, WebP source, JPEG '<img>') or art direction, where the mobile crop is a different composition rather than a smaller copy. Framework image components (Next.js '<Image>', Astro '<Image>') and image CDNs like Cloudinary or imgix generate the variants for you, which is why hand-rolling srcset is rarely worth it now.
The gotcha is 'sizes' lying. If it says '100vw' but the image renders in a 400px card, the browser dutifully picks the giant file and your srcset did nothing. Write 'sizes' to match your real CSS breakpoints and check the resource actually downloaded in devtools. Also: 2x covers most retina cases, but 3x is not automatically waste. Whether it earns its bytes depends on the real display size, the device pixel ratios you actually serve, and how much fine detail the image carries. A small dense diagram can justify it; a large soft photograph almost never does.
Ask AI for it
Optimize every image on this page. Encode each asset as both AVIF and WebP with a JPEG last resort, wire them up with '<picture>', and keep whichever modern format actually comes out smaller for that specific image at matching visual quality instead of assuming AVIF always wins. Generate variants at 400, 800, 1200 and 1600px wide and wire them into 'srcset' with a 'sizes' attribute that matches the real rendered width at each CSS breakpoint. Tune quality per asset by comparing encodes against the original rather than applying one global number, and choose the top variant width from the actual display size and the device pixel ratios you serve. Keep PNG only for flat graphics needing transparency, set explicit width and height attributes on every img tag, add loading='lazy' below the fold, and report the total transferred image weight before and after.