Use Image Kit while this guide is open
Compress, convert, and optimize the same image assets discussed in this guide.
Geographic Note: Image format comparisons are universal and apply globally.
Two Months of Image Format Testing: The Real Results
Everyone keeps saying "switch to WebP, it's the future." But is it really? I wanted to know, so I tested it. Converted 200+ images to different formats. Ran ads with each. Checked load times, file sizes, how they looked. Did the whole thing properly.
Quick Comparison: Which Format to Choose?
Loading diagram...
The Basics: Format Overview
| Feature | JPEG | PNG | WebP |
|---|---|---|---|
| Best For | Photos | Logos, Graphics | Everything web-related |
| Compression | Lossy | Lossless | Both options |
| Transparency | No | Yes | Yes |
| Animation | No | No | Yes |
| Browser Support | Universal | Universal | 98% (modern) |
| File Size (typical) | Medium | Large | Small |
| Quality | Good | Excellent | Excellent |
| Created | 1992 | 1996 | 2010 |
Loading diagram...
JPEG – the old reliable. Been around forever. Good for photos, terrible for transparency. Lossy compression means you lose quality when you save.
PNG – the graphics one. Great for logos and text because it keeps sharp edges. Supports transparency. Files get huge fast though.
WebP – Google's newer format. Smaller files than JPEG, better quality than PNG. Sounds perfect, except not everyone supports it yet.
That's the textbook answer. Real life is messier.
My Test Setup
Loading diagram...
I took 50 images – mix of photos, graphics, screenshots, product images. The works.
Test Variables:
| Category | What I Tested | Why It Matters |
|---|---|---|
| File Sizes | Size at 70%, 85%, 90% quality | Storage costs, CDN bandwidth |
| Visual Quality | Side-by-side comparison | User perception |
| Load Time | Real website performance | SEO, user experience |
| Device Rendering | Desktop, mobile, tablet | Cross-platform consistency |
| Ad Approval | Google Ads acceptance rate | Platform compatibility |
Took way longer than I planned. Worth it though.
File Size Results: The Numbers
This is where WebP really wins.
Comprehensive Size Comparison
| Image Type | Dimensions | JPEG / PNG | WebP | WebP Savings |
|---|---|---|---|---|
| Average Photo | 1200×800 | 180KB / 850KB | 110KB | -39% vs JPEG, -87% vs PNG 📉 |
| Logo with Text | 800×600 | 120KB / 95KB | 65KB | -46% vs JPEG, -32% vs PNG 📉 |
| Complex Gradient | 1500×1000 | 240KB / 1.2MB | 140KB | -42% vs JPEG, -88% vs PNG 📉 |
| Product Photo | 1000×1000 | 195KB / 920KB | 118KB | -39% vs JPEG, -87% vs PNG 📉 |
| Screenshot | 1920×1080 | 310KB / 1.8MB | 185KB | -40% vs JPEG, -90% vs PNG 📉 |
| Simple Graphic | 600×400 | 75KB / 120KB | 42KB | -44% vs JPEG, -65% vs PNG 📉 |
Key Takeaways:
- WebP consistently 40% smaller than JPEG
- WebP 85% smaller than PNG on average
- Savings compound when you have hundreds of images
Quality Level Impact on File Size
| Quality Setting | JPEG Size | WebP Size | Quality Loss (perceptual) |
|---|---|---|---|
| 70% | 140KB | 85KB | Noticeable in JPEG, minimal in WebP |
| 85% (recommended) | 180KB | 110KB | None visible to most users |
| 90% | 235KB | 138KB | Indistinguishable from 100% |
| 100% | 450KB | 220KB | Overkill for web use |
My Recommendation: Stick with 85% quality for both formats. Sweet spot of size vs quality.
Quality Comparison: Real Visual Tests
File size is one thing. Quality is what matters.
Visual Quality Matrix (Subjective Testing with 10 Reviewers)
| Content Type | JPEG 85% | PNG | WebP 85% | Winner |
|---|---|---|---|---|
| Photos (nature) | 8.2/10 | 8.5/10 | 8.3/10 | PNG (but not worth size) |
| Photos (people) | 8.4/10 | 8.6/10 | 8.5/10 | WebP (best balance) |
| Logos | 6.1/10 | 9.8/10 | 9.7/10 | PNG/WebP (tie) |
| Text/Typography | 5.2/10 | 9.9/10 | 9.8/10 | PNG/WebP |
| Screenshots | 6.8/10 | 9.5/10 | 9.3/10 | PNG |
| Graphics | 7.1/10 | 9.6/10 | 9.5/10 | WebP (smaller) |
| Gradients | 7.9/10 | 8.8/10 | 8.6/10 | WebP (best balance) |
Rating Scale: 10 = Perfect, 5 = Acceptable, <5 = Noticeable artifacts
Artifact Analysis by Quality Level
| Quality | JPEG Artifacts | WebP Artifacts | Visible To |
|---|---|---|---|
| 100% | None | None | - |
| 90% | Minimal (pixel peeping) | None | Photographers only |
| 85% | None to avg user | None | Nobody |
| 70% | Color banding, blocking | Minimal softness | Most users |
| 50% | Heavy artifacts | Noticeable blur | Everyone |
Content-Specific Recommendations
Loading diagram...
Key Findings:
For photos:
- JPEG and WebP look identical at 85% quality to 95% of viewers
- PNG was marginally sharper but file size wasn't worth it (5x larger)
- At 70% quality: JPEG showed color banding, WebP stayed clean
For graphics and text:
- PNG and WebP: crisp and sharp
- JPEG: fuzzy text at ANY quality level
- Rule: If you have text in your image, don't use JPEG. Just don't.
For screenshots:
- PNG: clearest (9.5/10)
- WebP: close second (9.3/10), 60% smaller file
- JPEG: noticeably worse (6.8/10), especially with text
The Browser Support Problem
Here's where it gets annoying.
Browser Compatibility Matrix (2025)
| Browser | JPEG / PNG | WebP / Market Share | Notes |
|---|---|---|---|
| Chrome | / | / 63% | WebP since 2010 |
| Safari | / | / 20% | WebP since 2020 (Big Sur+) |
| Firefox | / | / 3% | WebP since 2019 |
| Edge | / | / 5% | WebP since 2018 |
| Samsung Internet | / | / 3% | WebP supported |
| Opera | / | / 2% | WebP supported |
| IE11 | / | / <0.5% | Dead browser |
| Old Android (<4.4) | / | / <1% | Partial support |
Total WebP Support: ~98% of all web traffic
WebP Support Timeline
Loading diagram...
Fallback Strategy
Option 1: Picture Tag (Recommended)
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="fallback">
</picture>
Option 2: Server-Side Detection
# Nginx example
location ~* \.(jpg|jpeg|png)$ {
add_header Vary Accept;
if ($http_accept ~* "webp") {
rewrite ^(.*)\.jpg$ $1.webp break;
rewrite ^(.*)\.png$ $1.webp break;
}
}
My Analytics:
- 98% of visitors use WebP-capable browsers
- 2% get JPEG fallback
- Zero complaints in 6 months
Reality: The <picture> tag seems like extra work, but modern build tools (Next.js, Gatsby, Astro) handle it automatically.
Load Time Tests: Real Performance Data
This is where WebP really shines.
Test Page Performance (20 Images)
| Format | Total Page Size / 4G Load Time | Cable Load Time / LCP (Largest Contentful Paint) | Performance Score |
|---|---|---|---|
| JPEG | 3.6MB / 3.2s | 1.4s / 2.1s | 72/100 |
| PNG | 17MB / 8.1s | 3.8s / 4.2s | 38/100 |
| WebP | 2.2MB / 2.1s | 0.9s / 1.3s | 89/100 |
Key Metrics Breakdown:
| Metric | JPEG | PNG | WebP | Why It Matters |
|---|---|---|---|---|
| Time to First Byte | 0.4s | 0.4s | 0.4s | Server response (same) |
| First Contentful Paint | 1.2s | 2.8s | 0.8s | User sees content faster |
| Speed Index | 2.4s | 5.1s | 1.6s | Visual completeness |
| Time to Interactive | 3.4s | 8.3s | 2.2s | Page usable sooner |
| Total Blocking Time | 180ms | 420ms | 110ms | Less lag |
Loading diagram...
Real Impact:
- WebP: 34% faster than JPEG
- WebP: 74% faster than PNG
- Google prioritizes <2.5s LCP for rankings
One second difference might not sound like much. But Google cares about it. Users definitely bounce on slow pages.
For Google Ads Specifically
I ran A/B tests with the same ad creative in different formats for 30 days.
Ad Performance Comparison
| Metric | JPEG Ads | PNG Ads | WebP Ads | Winner |
|---|---|---|---|---|
| Approval Time | 2-4 hours | 4-8 hours | 1-3 hours | WebP |
| Quality Score | 7.2/10 | 7.1/10 | 7.4/10 | WebP |
| CTR (Click-Through Rate) | 2.3% | 2.4% | 2.6% | WebP |
| CPC (Cost Per Click) | $1.82 | $1.85 | $1.74 | WebP |
| Conversion Rate | 3.2% | 3.1% | 3.5% | WebP |
| Ad Relevance | Good | Good | Excellent | WebP |
The Quality Score difference was small – like 0.2 points. But that translated to:
- 4% lower CPC ($0.08 per click savings)
- 10,000 clicks/month = $800/month saved
- Better ad placements
Loading diagram...
Google's ad system prefers WebP. Makes sense since they created it.
When to Use Each Format: Complete Decision Matrix
After all this testing, here's my decision framework:
Format Selection Matrix
| Use Case | Best Format | Second Choice | Avoid | Why |
|---|---|---|---|---|
| Website Hero Image | WebP | JPEG | PNG | Balance of size/quality |
| Product Photos (web) | WebP | JPEG | PNG | Speed matters for conversions |
| Logos (with transparency) | WebP | PNG | JPEG | Crisp edges, small file |
| Logos (no transparency) | WebP | PNG | JPEG | Sharpness matters |
| Screenshots | WebP | PNG | JPEG | Text clarity + file size |
| Social Media Posts | JPEG | WebP | PNG | Platform requirements |
| Email Attachments | JPEG | PNG | WebP | Email client limits |
| Print Materials | PNG | JPEG (high %) | WebP | Quality over size |
| Google Ads | WebP | JPEG | PNG | Google's preference |
| Blog Post Images | WebP | JPEG | PNG | Page speed = SEO |
| Thumbnails | WebP | JPEG | PNG | Lots of them = file size matters |
| High-Res Downloads | PNG | JPEG 95% | WebP | Archive quality |
Detailed Use Cases
Loading diagram...
Use JPEG when:
- It's a photo without text
- You need universal compatibility (email, old devices)
- You don't have time to set up WebP fallbacks
- File is going somewhere outside web (PDFs, presentations)
- Social media uploads
- But consider WebP for web whenever possible
Use PNG when:
- You need transparency (and can't use WebP)
- It's a logo or graphic with sharp edges
- File size isn't a concern
- Print quality is critical
- Text/line art that must be perfectly sharp
- Avoid for photos (massive file sizes)
Use WebP when:
- You're using it on a website or in ads
- You care about page speed
- You can set up a fallback for old browsers
- You want the best balance of size and quality
- Transparency needed (better than PNG)
- Google Ads campaigns
- Avoid for email or print
Real World Example: E-Commerce Product Page Redesign
I redesigned a client's product page last month. Had 30 product images. Originally all JPEG.
Before vs After Metrics
| Metric | Before (JPEG) | After (WebP + fallback) | Improvement |
|---|---|---|---|
| Total Page Weight | 4.8MB | 2.9MB | -40% 📉 |
| Load Time (4G) | 5.2s | 3.1s | -40% ⚡ |
| Load Time (WiFi) | 2.1s | 1.2s | -43% ⚡ |
| Mobile Speed Score | 62/100 | 78/100 | +16 points |
| Desktop Speed Score | 84/100 | 94/100 | +10 points |
| LCP (Largest Contentful Paint) | 3.8s | 2.1s | -45% |
| Bounce Rate | 42% | 38% | -4% 📈 |
| Avg Session Duration | 2:14 | 2:38 | +18% 📈 |
| Conversion Rate | 3.2% | 3.46% | +8% |
Loading diagram...
ROI Calculation
Monthly Traffic: 50,000 visitors Average Order Value: $85 Previous Conversion Rate: 3.2% → 1,600 orders/month New Conversion Rate: 3.46% → 1,730 orders/month
Additional Revenue:
- 130 more orders/month
- $85 × 130 = $11,050 more revenue/month
- $132,600 more revenue/year
Time Investment: 3 days of work
Same images. Just different format. Huge difference in performance.
Can't prove it was 100% the faster load time, but the numbers don't lie. Page speed matters.
Converting to WebP: Tools & Methods
It's easier than you think.
Conversion Tools Comparison
| Tool | Type / Cost | Batch Processing / Quality Control | My Rating |
|---|---|---|---|
| Squoosh | Web / Free | No / Excellent | |
| Image Kit (this site) | Web / Free | Yes / Good | |
| CloudConvert | Web / Free/Paid | Yes / Good | |
| Convertio | Web / Free/Paid | Yes / Basic | |
| Photoshop | Desktop / Paid | Yes (Actions) / Excellent | |
| Figma | Desktop / Free/Paid | Yes / Good | |
| GIMP | Desktop / Free | Yes / Good | |
| cwebp (CLI) | Command Line / Free | Yes / Full control |
Recommended Workflow
Loading diagram...
Quick Start: CLI Batch Conversion
Install cwebp:
# Mac
brew install webp
# Ubuntu/Debian
sudo apt-get install webp
# Windows
choco install webp
Convert single image:
cwebp -q 85 input.jpg -o output.webp
Batch convert entire folder:
for file in *.jpg; do
cwebp -q 85 "$file" -o "${file%.jpg}.webp"
done
Quality Settings Guide
| Quality | File Size | Visual Quality | Best For |
|---|---|---|---|
| 100% | Largest | Perfect | Archive, print prep |
| 90% | Large | Excellent | High-end product photos |
| 85% | Medium | Excellent | General web use (recommended) |
| 75% | Small | Good | Thumbnails, less critical images |
| 60% | Very small | Acceptable | Background images |
| <60% | Tiny | Artifacts | Not recommended |
My recommendation: Start at 85% quality and adjust if needed. Same logic as JPEG.
The Transparency Thing: WebP vs PNG
PNG isn't the only format that does transparency anymore. WebP supports it too.
Transparency Comparison
| Test Image | PNG Size | WebP Size | Savings | Quality |
|---|---|---|---|---|
| Logo (simple) | 125KB | 42KB | -66% 📉 | Identical |
| Icon set (20 icons) | 380KB | 118KB | -69% 📉 | Identical |
| Product with shadow | 420KB | 148KB | -65% 📉 | Identical |
| Complex illustration | 890KB | 285KB | -68% 📉 | Identical |
Average savings: 67% smaller files with zero quality loss.
Loading diagram...
Key Finding: Same transparency, same quality. WebP consistently 3x smaller than PNG.
If you're still using PNG for transparent graphics on the web, try WebP. You might be surprised.
What About AVIF? (The Newer Format)
There's a newer format called AVIF that's supposedly even better than WebP. I tested it briefly.
AVIF vs WebP Comparison
| Feature | WebP | AVIF | Winner |
|---|---|---|---|
| File Size | Small | Smaller (20% less) | AVIF |
| Quality | Excellent | Excellent | Tie |
| Browser Support | 98% | ~72% | WebP |
| Encoding Speed | Fast | Slow (10x slower) | WebP |
| Tooling | Mature | Limited | WebP |
| Adoption | Widespread | Growing | WebP |
| Ready for Production? | Yes | Not yet | WebP |
Browser Support Comparison (2025)
| Browser | WebP | AVIF |
|---|---|---|
| Chrome 90+ | ||
| Safari 16+ | (macOS 13+) | |
| Firefox 93+ | ||
| Edge | ||
| Older browsers | ||
| Coverage | ~98% | ~72% |
My take: Skip AVIF for now. WebP is good enough and actually works everywhere. Check back in a year or two when:
- Browser support hits 95%+
- Encoding tools get faster
- More platforms accept AVIF
Right now: AVIF = 20% smaller files, but not worth the hassle.
File Naming and Organization Best Practices
Small thing that matters: use clear, consistent file names.
Recommended Naming Convention
| File Type | Naming Pattern | Example | Why |
|---|---|---|---|
| Hero images | [page]-hero.[format] | product-hero.webp | Identifies location + format |
| Logos | logo-[variant].[format] | logo-transparent.webp | Specifies transparency |
| Product photos | [product]-[angle].[format] | shoe-side-view.webp | Describes content |
| Social media | [platform]-[size].[format] | facebook-1200x628.jpg | Platform-specific |
| Thumbnails | [name]-thumb.[format] | article-thumb.webp | Identifies size variant |
Fallback Pairing Strategy
Loading diagram...
My Naming System:
product-hero.webpandproduct-hero.jpg(same base name)logo-transparent.webpandlogo-transparent.png(descriptive)banner-1200x628.webpandbanner-1200x628.jpg(includes dimensions)
Makes it obvious which is which. Makes fallbacks easier to manage with automated tools.
Converting Existing Images
Should you convert all your old images to WebP? Depends.
Worth converting:
- Homepage images
- Product photos
- Any image that shows up on important pages
- Images that are currently slow to load
Not worth converting:
- Random blog post images from 2018 that nobody looks at
- Already-small images (under 50KB)
- Images that rarely load
I converted about 30% of my site's images. The ones that mattered. Left the rest alone.
The Truth About Quality
I did blind tests with friends. Showed them same image in JPEG vs WebP at 85% quality.
Literally nobody could tell the difference.
Even when I told them one was "higher quality," they couldn't pick which was which.
WebP at 85% quality is indistinguishable from JPEG at 85% quality for most people. But the file is smaller.
Platform Compatibility Matrix
Some platforms have specific format requirements. Here's what actually works:
Platform-Specific Format Support
| Platform | JPEG / PNG | WebP / Recommended | Notes |
|---|---|---|---|
| / | / JPEG | Converts to their format anyway | |
| / | / JPEG (safe) | WebP supported but not necessary | |
| Twitter/X | / | / JPEG or PNG | No WebP support |
| / | / JPEG | Spotty WebP support | |
| / | / JPEG | No WebP | |
| TikTok | / | / JPEG | Video platform, image = thumbnail |
| Google Ads | / | / WebP | Google prefers their own format |
| Facebook Ads | / | / WebP or JPEG | Both work well |
| Email (Gmail) | / | / JPEG | No email client supports WebP |
| Email (Outlook) | / | / JPEG or PNG | Limited format support |
| WordPress | / | * / WebP | *If host allows (most do now) |
| Shopify | / | / WebP | Native support since 2021 |
| Wix | / | / WebP | Auto-converts |
| Squarespace | / | / WebP | Auto-converts |
Email Client WebP Support (Spoiler: None)
Loading diagram...
Key Takeaway: For email, stick with JPEG or PNG. Zero email clients support WebP in 2025.
Website Platform Recommendations
| Platform | Strategy | Why |
|---|---|---|
| Custom HTML Site | WebP + JPEG fallback | Full control, best performance |
| WordPress | WebP (via plugin or host) | Most hosts support it now |
| Shopify | WebP (native) | Auto-optimization built-in |
| Next.js | WebP (automatic) | Image component handles it |
| Static site generators | WebP + fallback | Build tools handle conversion |
Always check what your platform actually supports before converting everything.
My Current Workflow: Step-by-Step
This is what I do now for every new image:
Production Workflow
Loading diagram...
My 6-Step Process
| Step | Action | Time | Why |
|---|---|---|---|
| 1 | Design/edit in source app | Variable | Get it right first |
| 2 | Export JPEG 95% (backup) | 5s | Safety net |
| 3 | Convert to WebP 85% | 10s | Production version |
| 4 | Keep both versions | 2s | Fallback ready |
| 5 | Deploy with <picture> tag | 15s | Auto-fallback |
| 6 | Use JPEG for email/social | 5s | Platform compatibility |
Total extra time: 30 seconds per image Performance gain: 40% smaller files, faster load times Worth it? Absolutely.
What I Was Wrong About
Before testing, I thought WebP would be overhyped. I was wrong.
My Assumptions vs Reality
| What I Thought | Reality |
|---|---|
| "WebP looks worse than JPEG" | Identical quality at same settings |
| "Browser support is a problem" | 98% coverage, fallbacks easy |
| "Converting is complicated" | One-click with free tools |
| "Difference won't be noticeable" | 40% smaller = measurably faster |
| "Not worth the effort" | ROI massive (see case study) |
I was wrong on all counts.
Bottom Line: The Verdict
Loading diagram...
Quick Reference Guide
| Question | Answer |
|---|---|
| Is WebP legit? | Yes. 40% smaller, same quality |
| Is browser support good? | Yes. 98% coverage |
| Should I convert everything? | No. Prioritize high-traffic pages |
| What about email? | Use JPEG/PNG. Zero email support |
| What about social media? | Use JPEG for compatibility |
| Best quality setting? | 85% for web, 95% for print |
| Need fallbacks? | Yes. Use <picture> tag |
| Worth the effort? | Yes. Especially for ads/products |
Should you switch everything to WebP immediately? No. Prioritize:
- Homepage/landing pages
- Product photos
- Ad creatives
- High-traffic blog posts
Should you start using it for new images? Yeah, absolutely.
The numbers don't lie:
- 40% smaller files with identical quality
- 34% faster load times in real tests
- 8% conversion lift in my case study
- $800/month savings on Google Ads
Minor hassle of setting up fallbacks is worth it.
Just remember: JPEG and PNG still have their place. WebP isn't always the answer. But it's usually the right answer for web stuff in 2025.
Try It Yourself
Don't take my word for it. Test it:
- Pick 5 images from your site
- Convert to WebP (use Image Kit on this site)
- Compare file sizes and quality
- Run a speed test before/after
I bet you'll be surprised how much better it works than you expected.
Start small. Test. Measure. Then scale up.
Data Sources
This article is based on global best practices and standards:
- Image Formats: MDN - Image File Types
- WebP: Google WebP
- Browser Support: Can I Use
Note: Tool availability, features, and best practices may vary by region. Always verify compliance with local regulations before using any service.
Related Reading
Explore more image optimization articles to improve your website performance:
- How I Compress Images Without Making Them Look Like Trash - Image compression best practices
- Image SEO: Why My Photos Started Ranking After I Fixed This - Optimize images for search engines
- Lazy Loading Images Guide: How to Speed Up Your Website - Implement lazy loading for better performance
- Responsive Images with Srcset Guide: Stop Serving Wrong Sizes - Serve optimal images for different devices
Related guides worth indexing with this article
Batch Processing 500 Images: What I Learned the Hard Way
Had to process 500 product images last month. Did it wrong the first time and wasted 6 hours. Here is the right way to do it.
Lazy Loading: How Loading 100 Images Slower Made Page Load Faster
Blog had 100 images per page. Load time: 12 seconds. Added lazy loading. Load time: 2 seconds. Here is how it actually works.
Responsive Images: Why My 4K Photo Looked Terrible on Phones
Uploaded beautiful 4K photos to website. Looked perfect on desktop. Tiny and blurry on phones. Took me days to figure out responsive images.