Why images are the biggest performance lever on most websites
On most websites, images account for 50–75% of total page weight. They're also the primary driver of your LCP (Largest Contentful Paint) score in Google's Core Web Vitals — the time before the main content of a page becomes visible.
An LCP under 2.5 seconds is rated "good" by Google. An LCP above 4 seconds is "poor" and directly impacts your search ranking. Unoptimized images are the most common cause of poor LCP.
The good news: image optimization is one of the simplest and highest-impact changes you can make to a website.
Step 1: choose the right format
The base rule is straightforward: WebP for everything that goes on the web.
WebP is 25–35% lighter than JPEG at equivalent visual quality, and 20–30% lighter than PNG. All modern browsers support it. It's been the default choice for web images since 2022.
Use PNG only if you need transparency and WebP isn't supported by your target environment (rare). Use JPEG only for exports to systems that don't support WebP yet.
If your CMS or build pipeline doesn't handle WebP conversion automatically, Zipero does it in seconds directly in your browser.
Step 2: compress correctly
Format alone isn't enough. An uncompressed WebP can be heavier than a well-compressed JPEG.
For photos and complex images: WebP at 80–85% quality. The visual difference is imperceptible in the vast majority of real-world uses, and the file size reduction is massive — typically 60–80% compared to the original.
For graphics and logos: lossless WebP or PNG. Compressing a logo with lossy WebP introduces artifacts at sharp edges.
For hero images and banners (large full-width images): WebP at 75–80%. These are often the heaviest images and directly impact LCP.
Step 3: size images correctly
A 4000×3000 pixel image displayed in an 800px column sends 15x more data than necessary. Always resize images to the maximum size at which they'll be displayed, with a 2x factor for Retina screens.
For an image displayed at 800px wide: generate a 1600px version for Retina screens and an 800px version for standard screens.
Step 4: use responsive images
The HTML srcset attribute lets the browser choose the right image version for screen density and viewport width:
<img
src="hero-800.webp"
srcset="hero-800.webp 800w, hero-1600.webp 1600w"
sizes="(max-width: 800px) 100vw, 800px"
alt="Description"
/>
Next.js and most modern frameworks handle this automatically through their optimized Image components.
Step 5: lazy loading
Off-screen images don't need to be loaded immediately. The loading="lazy" attribute tells the browser to only load an image as it approaches the viewport:
<img src="image.webp" loading="lazy" alt="Description" />
Important exception: never apply loading="lazy" to your hero image or the primary image on a page — it's what determines your LCP score, and delaying it would hurt your performance metrics.
Measuring the impact
Before and after optimization, measure with Google PageSpeed Insights or Lighthouse (built into Chrome DevTools). Key metrics: LCP, TBT, CLS, and the overall Performance score.
Moving from an uncompressed JPEG to WebP at 80% can take a Performance score from 45 to 85 on PageSpeed Insights. That's not marginal.
Optimize in practice with Zipero
Zipero compresses your images and converts them to WebP directly in your browser — no server upload, no account required. Process images one at a time in seconds before adding them to your site.