Best Image Format for Website Speed — WEBP vs JPG vs PNG
Image files make up 50–80% of the average webpage's total weight. Pick the wrong format and you're serving 5MB of photos where 500KB would do. Pick the right one and your pages load in 1 second instead of 4.
We ran tests. Here's what we found.
The Formats at a Glance
| Format | Photos | Screenshots | Graphics | Transparency | Browser support |
|---|---|---|---|---|---|
| WEBP | ✅ Best | ✅ Best | ✅ Best | ✅ | 97%+ |
| JPG | ✅ Good | ❌ Bad | ❌ No | ❌ | 100% |
| PNG | ✅ Okay | ✅ Good | ✅ Best | ✅ | 100% |
Test Results: Real World Comparison
We tested three 1920×1080 images across formats:
Photo (forest landscape, 4.2MP)
- JPG (quality 85): 420 KB
- WEBP (quality 85): 145 KB ← 65% smaller
- PNG: 3.8 MB
Screenshot (webpage with text and UI)
- JPG: 280 KB
- WEBP: 95 KB ← 66% smaller
- PNG: 450 KB
Graphics (gradient with text overlay)
- JPG: 350 KB
- WEBP: 60 KB ← 83% smaller
- PNG: 180 KB
Why WEBP Wins
WEBP uses both lossy and lossless compression more efficiently than JPG or PNG. The format was built specifically for web performance.
Key advantages:
- 25–35% smaller than equivalent JPG at the same visual quality
- 25–30% smaller than equivalent PNG at the same visual quality
- Supports transparency in both lossy and lossless modes
- Alpha channel support without the file size penalty of PNG
When to Use JPG
JPG is still the right choice when:
- You're targeting IE11 or very old browsers (WEBP lossy is supported, but not always)
- You need maximum compatibility with legacy systems
- The image is a photo that will never be edited again
In 2025, WEBP is the default. JPG is the fallback.
When to Use PNG
Use PNG when you need:
- Lossless quality for screenshots with fine text
- Transparency for UI elements and overlays
- Print-ready deliverables
- Images that will be edited multiple times without degradation
Implementation Guide
Serving WEBP to Modern Browsers
<img src="photo.jpg" alt="Description"
onerror="this.onerror=null; this.src='photo.webp';"
loading="lazy">
Better approach with <picture>:
<picture>
<source srcset="photo.webp" type="image/webp">
<source srcset="photo.jpg" type="image/jpeg">
<img src="photo.jpg" alt="Description" loading="lazy">
</picture>
Recommended Quality Settings
| Use case | WEBP quality | JPG quality |
|---|---|---|
| Hero images | 85–90 | 85 |
| Thumbnails | 70–80 | 75 |
| Background images | 80–85 | 80 |
| Screenshots | 85–90 | N/A (use PNG or WEBP lossless) |
The Bottom Line
Use WEBP for everything on the web. It's smaller, looks the same, and browser support is nearly universal. Convert your existing JPG and PNG images to WEBP and watch your page speeds improve dramatically.
When you need PNG for transparency or print, use it. But for the web — WEBP is the winner.