Image compression for real-world web performance
Balancing quality, format, and CDN behavior when you optimize images for Core Web Vitals.
Why “smallest file” is not always optimal
Ultra-aggressive compression creates banding in gradients, halo artifacts around text in hero images, and brand degradation PMs notice immediately. Performance wins mean picking the smallest file that still matches creative intent—not winning a.bytes race.
Measure LCP element dimensions and generate variants at 1x and 2x DPR. Serving a 400 px-wide JPG for a 800 px layout hurts sharper than a few extra kilobytes of quality.
Formats are a negotiation
WebP and AVIF shine for photographic content; PNG remains relevant for UI with transparency; SVG wins for logos if designers clean paths. Mixing formats intelligently beats one-size-fits-all.
Always provide width/height attributes and reserve space to prevent CLS spikes when fonts or hero media pop in.
Process beats one-off exports
Name derivations clearly (`hero-home-1440.webp`) and commit them beside source PSDs when possible. Automation via CI costs upfront but removes Friday-night manual mistakes.
Audit monthly: Lighthouse traces, RUM dashboards, and designer spot checks should align. If marketing uploads bypass CMS transforms, fix the CMS—not the CDN—in the long run.
Quick wins this week
Compress oversized social meta images, lazy-load below-the-fold galleries, and prefetch only critical hero assets. Close tickets with before/after filmstrips so stakeholders see measurable improvements.
Pair compression with honest alt text and captions—SEO and accessibility compound your technical work.