How to Reduce Page Weight by 70% with Modern Image Formats
A real-world case study showing how converting images from JPEG/PNG to AVIF/WebP cut page weight by 70% and improved LCP from 3.2s to 1.4s.
How to Reduce Page Weight by 70% with Modern Image Formats
The median webpage transfers over 2 MB of image data. For most sites, images account for 40-60% of total page weight. Converting to modern formats is the single largest performance improvement you can make.
Here's a realistic breakdown with actual numbers.
The Before State
A typical content-heavy page with these images:
| Image | Format | Dimensions | File Size |
|---|---|---|---|
| Hero banner | JPEG | 1920 x 800 | 485 KB |
| Author photo | PNG | 400 x 400 | 220 KB |
| 3x inline photos | JPEG | 1200 x 800 | 310 KB each |
| 6x product cards | PNG | 600 x 600 | 180 KB each |
| Background pattern | PNG | 200 x 200 | 45 KB |
| Total | 2,660 KB |
Page LCP: 3.2 seconds on 4G mobile.
Step 1: Convert to WebP
Converting all images to WebP at quality 80:
| Image | WebP Size | Savings |
|---|---|---|
| Hero banner | 195 KB | -60% |
| Author photo | 82 KB | -63% |
| 3x inline photos | 125 KB each | -60% |
| 6x product cards | 55 KB each | -69% |
| Background pattern | 12 KB | -73% |
| Total | 1,002 KB | -62% |
Step 2: Convert to AVIF
Converting all images to AVIF at quality 65:
| Image | AVIF Size | Savings |
|---|---|---|
| Hero banner | 120 KB | -75% |
| Author photo | 48 KB | -78% |
| 3x inline photos | 78 KB each | -75% |
| 6x product cards | 32 KB each | -82% |
| Background pattern | 6 KB | -87% |
| Total | 594 KB | -78% |
Step 3: Proper Sizing
The hero image is 1920px wide, but the content area is only 1200px. The product cards display at 300px but are served at 600px. Resizing to actual display dimensions (at 2x for Retina):
| Image | Resized + AVIF | Final Size |
|---|---|---|
| Hero banner (1200w) | 72 KB | -85% from original |
| Author photo (200w) | 18 KB | -92% |
| 3x inline (800w) | 45 KB each | -85% |
| 6x product (300w) | 12 KB each | -93% |
| Background (same) | 6 KB | -87% |
| Total | 297 KB | -89% |
The After State
| Metric | Before | After | Improvement |
|---|---|---|---|
| Total image weight | 2,660 KB | 297 KB | -89% |
| LCP | 3.2s | 1.1s | -66% |
| Total page weight | 3,800 KB | 1,437 KB | -62% |
| Speed Index | 4.1s | 1.8s | -56% |
From 2.6 MB of images to 297 KB. Same visual quality. Same content. Just modern formats and proper sizing.
The Recipe
- Convert all photos to AVIF (quality 60-70) with WebP fallback (quality 75-80)
- Convert all graphics/icons to WebP or keep as SVG
- Resize to actual display dimensions at 2x for Retina
- Use responsive images with
srcsetto serve appropriate sizes - Add fetchpriority="high" to the LCP image
- Lazy load everything below the fold
Doing It with Konvrt
For a site with hundreds of images:
- Export all images from your CMS
- Open Konvrt's batch processor
- Set output to AVIF, quality 65
- Set max width to your content area width (e.g., 1200px)
- Convert the batch
- Run a second batch as WebP at quality 80 for fallback
- Upload both sets and use
<picture>elements
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="..." fetchpriority="high" width="1200" height="500" />
</picture>
Why This Works
The savings come from three compounding effects:
- Format efficiency — AVIF uses 50% less data than JPEG at equivalent quality
- Right-sizing — Serving display-size images eliminates wasted pixels
- Compression — Quality 65 in AVIF looks as good as JPEG quality 85
Each step multiplies the savings. Format alone saves 50%. Format + sizing saves 75%. Format + sizing + optimized compression saves 85-90%.