A single unoptimized hero image can outweigh your entire HTML, CSS, and JavaScript combined. Image optimization isn't optional — it's the fastest win in web performance.
Right-size before upload
A 4000px wide photo displayed at 1200px wastes bandwidth. Resize to the maximum display size (plus retina multiplier) before it hits your server. We cap hero images around 1920px wide for most marketing sites.
Choose modern formats
WebP and AVIF deliver dramatically smaller files than JPEG at similar visual quality. Serve modern formats with JPEG fallbacks for older browsers using the picture element or CDN auto-conversion.
Lazy-load below the fold
Don't load images the user hasn't scrolled to yet. Native loading="lazy" handles most cases. Keep above-the-fold heroes eager-loaded so LCP stays fast.
Compress aggressively
Tools like Squoosh, ImageOptim, or CDN pipelines can cut file size 60–80% with minimal visible difference. We set quality targets per image type: higher for photography, lower for simple graphics.
Meaningful ALT text
Optimization isn't just bytes — descriptive ALT attributes help SEO and accessibility while you're already thinking about each image.
Slow site? Images are the first place we look. Request a performance audit.