Images account for the largest share of most web pages’ weight. If you want a fast site, better Core Web Vitals, and higher conversions, learning how to compress images for the web is not optional. But the real question in 2026 is not whether to compress, it’s which format to pick: JPEG, WebP, or AVIF.
In this guide, we compare the three main web image formats with real file size and quality data, and we give you clear rules on when to use each one.
Why Image Compression Still Matters in 2026
Even with fiber connections and modern devices, heavy images are still the number one performance killer. Google uses Largest Contentful Paint (LCP) as a ranking signal, and images are almost always the LCP element on content pages.
- Faster page load = better SEO ranking
- Lower bandwidth = lower hosting and CDN costs
- Better UX on mobile networks
- Lower bounce rates and higher conversions
Quick Overview: JPEG, WebP and AVIF
Before we dive into numbers, here is what you need to know about each format:
JPEG (the veteran)
Created in 1992, JPEG is still the most universal format. Every browser, every CMS, every editor supports it. It uses lossy compression and works well for photos, less well for graphics with sharp edges or text.
WebP (the modern standard)
Developed by Google, WebP offers both lossy and lossless compression, plus transparency (like PNG) and animation (like GIF). It is now supported by 100% of modern browsers.
AVIF (the new heavyweight)
Based on the AV1 video codec, AVIF delivers the best compression of the three. It supports HDR, wide color gamut, transparency, and animations. Browser support reached full coverage across Chrome, Firefox, Safari and Edge.
Real File Size and Quality Comparison
We took the same source image (a 3000×2000 landscape photo, original PNG of 8.4 MB) and exported it in all three formats at visually equivalent quality settings.
| Format | Quality Setting | File Size | Savings vs JPEG | Visual Quality |
|---|---|---|---|---|
| JPEG | 80 | 612 KB | baseline | Good, slight banding in sky |
| WebP | 80 | 348 KB | -43% | Very good, cleaner gradients |
| AVIF | 55 | 198 KB | -68% | Excellent, no visible artifacts |
Key takeaway: at similar visual quality, AVIF is roughly 50% smaller than WebP and 65-70% smaller than JPEG. WebP sits comfortably between the two.
Format Feature Comparison
| Feature | JPEG | WebP | AVIF |
|---|---|---|---|
| Lossy compression | Yes | Yes | Yes |
| Lossless compression | No | Yes | Yes |
| Transparency (alpha) | No | Yes | Yes |
| Animation | No | Yes | Yes |
| HDR / wide color | No | Limited | Yes |
| Encoding speed | Very fast | Fast | Slow |
| Browser support | 100% | ~99% | ~95% |
When to Use Each Format
Use JPEG when:
- You need maximum compatibility (old email clients, legacy CMS, print workflows)
- You are uploading to platforms that re-encode uploads anyway
- You want the fastest possible encoding pipeline
Use WebP when:
- You want a strong balance between file size, quality, and compatibility
- You need transparency but do not want the weight of PNG
- You have simple animations that used to be GIF
- You do not want to deal with fallback complexity
Use AVIF when:
- Performance is critical (LCP images, hero banners, product galleries)
- You serve high resolution photography or e-commerce visuals
- You can implement a proper fallback with the
<picture>element - You want to reduce CDN bandwidth costs at scale
The Best Practice: Serve All Three with the <picture> Element
You do not have to pick just one. Modern browsers will grab the first format they understand, so serve AVIF first, WebP as a fallback, and JPEG as a last resort:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" loading="lazy" width="1200" height="800">
</picture>This gives every visitor the smallest file their browser can decode, with zero risk of broken images.
How to Compress Images for the Web: Step by Step
- Start from the highest quality source you have (PNG or original camera file). Never re-compress an already compressed image.
- Resize before compressing. A 4000px wide image displayed at 800px is wasted bandwidth. Match the actual display size (with 2x for Retina).
- Choose the right format using the rules above.
- Pick a smart quality level. For photos: JPEG 75-82, WebP 75-80, AVIF 50-60. These sweet spots are visually lossless for most users.
- Strip metadata (EXIF, GPS, color profiles you do not need) to shave extra kilobytes.
- Use
loading="lazy"on non critical images so they only load when scrolled into view. - Test with real tools like PageSpeed Insights and WebPageTest to confirm your LCP improved.
Tools We Recommend
- Squoosh.app – Google’s free tool, best for testing quality settings side by side
- Sharp (Node.js) – The go-to library for automated pipelines and build tools
- ImageMagick / cwebp / avifenc – Command line power for batch processing
- TinyPNG, Compressor.io, iLoveIMG – Fine for one-off compression, but limited on AVIF and quality control
- WordPress plugins like ShortPixel, Imagify, or Converter for Media handle AVIF and WebP generation automatically
Common Mistakes to Avoid
- Uploading massive images and relying on CSS to resize them
- Compressing an already compressed JPEG multiple times (quality decays fast)
- Using PNG for photographs (they will be 5 to 10 times heavier than needed)
- Forgetting to specify
widthandheightattributes, causing layout shift - Serving the same image to a phone and a 4K desktop screen
Our Verdict for 2026
If you are building or maintaining a modern website today, the winning strategy is simple:
- Primary format: AVIF for maximum compression
- Fallback: WebP for the 5% of edge cases
- Last resort: JPEG for the tiny fraction of legacy browsers
Automate this with your CDN, your CMS plugin, or your build pipeline. You will typically cut your image weight in half compared to a JPEG only site, without any visible quality loss.
FAQ
Is AVIF really better than WebP?
In file size and quality, yes. AVIF is roughly 50% smaller than WebP at equivalent quality. However, AVIF encoding is much slower and browser support, while excellent, is still slightly behind WebP.
Will using WebP or AVIF hurt my SEO?
No, quite the opposite. Google explicitly recommends both formats and uses page speed as a ranking factor. Just make sure to provide meaningful alt text and proper filenames.
How much can I compress an image before quality suffers?
For most photos you can safely go down to JPEG quality 75, WebP 75, or AVIF 55 without visible loss. Below those thresholds artifacts start appearing in gradients, skin tones, and edges.
Should I convert my existing JPEG library to AVIF?
Yes, but do it from the highest quality version you have. If you only have a compressed JPEG left, re-encoding it will save weight but will not restore quality. Ideally, keep original PNG or RAW files archived.
What about PNG and GIF?
PNG is still fine for logos, icons, and screenshots with sharp edges, but WebP lossless usually beats it. GIF should be replaced by WebP or AVIF animations, which are dramatically smaller.
Do I need a CDN to serve AVIF?
Not required, but recommended. Modern CDNs like Cloudflare, BunnyCDN, or KeyCDN can auto convert and serve the best format based on the visitor’s browser, which saves you from generating multiple files manually.
Need help implementing modern image optimization on your website? Our team at Custom Web Promotions can audit your site, set up automatic AVIF and WebP delivery, and boost your Core Web Vitals. Get in touch to learn more.