WSWhat Scene?

Learn · Performance & optimization

How do you optimize images for the web?

Compress images, use modern formats like WebP or AVIF, size them to how they'll actually be displayed, and load offscreen ones lazily. Images are usually the heaviest part of a page, so optimizing them is the single biggest speed win on most sites.

The common mistake is uploading huge original photos and letting the browser shrink them, which still downloads the full file. Serving an image at the size it appears, in an efficient format, can cut its weight by 70% or more with no visible quality loss.

Modern formats (WebP, AVIF) pack the same quality into much smaller files than older JPEG or PNG. Combined with lazy loading and reserved dimensions to prevent layout shift, proper image handling improves LCP, CLS, and total page weight at once.

Updated July 2026

Want this built, not just explained?