Images account for 60–80% of average page weight and cause most failed Core Web Vitals scores. This guide covers the complete web image optimization stack — from manual compression to automated CDN pipelines.
Browser-based, no upload. Compress then convert to WebP for the complete stack.
Largest Contentful Paint (LCP) measures how long until the biggest visible element on your page finishes rendering. For most websites, that element is an image — the hero photo, the featured product shot, the above-the-fold banner. Google counts LCP as the most important Core Web Vitals metric for search ranking.
A 2 MB JPG hero image on a typical mobile 4G connection adds roughly 1 second to LCP. On 3G — still the baseline for large parts of the world — it's closer to 2 seconds. Compress that image to 280 KB WebP and you've recovered 1.5–1.8 seconds of LCP, often enough to move from the "Poor" bucket all the way to "Good."
JPEG at 75–82%, WebP at 78–84%, PNG lossless. Run every image through the compressor before it goes on your site. This alone reduces most page image weight by 50–70%.
WebP is 25–35% smaller than JPEG at equal quality. Convert all JPG and PNG images to WebP using the converter. 97%+ browser support — safe for production.
Don't serve a 4000px image at 800px CSS width. Resize to display size × 2 (for retina). A correctly-sized image is 4–6× smaller with identical visual quality at the displayed size.
Add <link rel="preload" as="image" href="hero.webp" fetchpriority="high"> in your document head. Tells the browser to fetch it before CSS blocks rendering.
Add loading="lazy" to all <img> tags below the fold. Defers their download until the user scrolls — reducing initial page weight.
Always set explicit width and height on every <img>. Prevents Cumulative Layout Shift (CLS) — the browser reserves space before the image loads.
| Image Type | Recommended Format | Target File Size | Quality Setting |
|---|---|---|---|
| Hero / banner (above fold) | WebP | <250 KB | 80–84% |
| Blog body images | WebP | <150 KB | 75–80% |
| Thumbnail / card images | WebP | <60 KB | 68–74% |
| Product photos (e-commerce) | WebP | 150–400 KB | 83–88% |
| Background images | WebP | <300 KB | 70–78% |
| Logos (transparent) | SVG or lossless WebP | <50 KB | Lossless |
| Icons | SVG | <10 KB | — |
| OG / social share images | JPEG or PNG | <300 KB | 85% |
The complete HTML pattern for a hero image that maximizes LCP performance:
Key elements: preload link (discovers the image before the HTML finishes parsing), fetchpriority="high" (tells the browser this is the most important image to download), width/height attributes (prevents CLS by reserving space), srcset (serves correctly-sized image to each screen width), WebP with JPEG fallback (WebP for modern browsers, JPEG for old iOS/IE).
| Solution | Approach | Cost | Best For |
|---|---|---|---|
| Cloudflare Polish | Edge-layer auto-compress + WebP conversion on every request | $20/mo (Pro plan) | Sites already on Cloudflare — zero code changes |
| Cloudinary | Image CDN with URL-based transforms (f_auto,q_auto) | Free tier + paid | Large product catalogs, e-commerce, dynamic image pipelines |
| Sharp (Node.js) | Build-time compression + WebP conversion in CI/CD | Free / open source | Static sites, Jamstack, Next.js, build-time asset optimization |
| ImageKit | Image CDN with smart compression + WebP auto-delivery | Free tier + paid | Teams wanting a Cloudinary alternative with simpler pricing |
| Manual (Convertlo) | Browser-based batch compression, one-time or periodic | Free | Existing image libraries, one-off optimizations, small sites |
For most teams, the right progression is: start with browser-based compression for existing assets, set up Cloudflare Polish for new uploads going forward, and add Sharp to your CI pipeline for build-time optimization. Each layer catches what the others miss.
| PageSpeed Audit | Fix | Typical LCP Impact |
|---|---|---|
| "Serve images in next-gen formats" | Convert JPG/PNG to WebP. 25–35% smaller at equal quality. | High — directly reduces image load time |
| "Efficiently encode images" | Compress images at quality 75–82. Fires when >4 KB savings available. | High — especially for uncompressed sources |
| "Properly size images" | Resize images to display dimensions × 2 retina. Don't serve 4000px for 800px display. | Medium — reduces bytes, often same as compression |
| "Defer offscreen images" | Add loading="lazy" to below-fold images. | Medium — reduces initial page weight |
| "Preload Largest Contentful Paint image" | Add <link rel="preload" as="image" href="hero.webp"> to document head. | Very high — often 0.5–2s LCP improvement alone |