Images account for over 50% of the average web page weight. Unoptimized photos and graphics slow down page loads, hurt Core Web Vitals, and drive visitors away. Yet most images can be compressed by 50 to 80% without any visible quality loss.
In this guide you will learn how image compression works, which formats to choose, and how to apply the right settings for your use case. Whether you maintain a personal blog or a large e-commerce catalogue, these techniques apply everywhere.
→ Jump straight to the tool: Compress images with Morphix
Why image compression matters
Page speed is a ranking factor for Google. It also directly impacts conversion rates: Amazon famously found that every 100ms of added latency costs 1% of revenue. Images are the single largest lever you can pull.
Beyond SEO and conversions, smaller images reduce bandwidth costs for you and data usage for your visitors. Mobile users on slower connections will especially appreciate the difference.
Core Web Vitals and images
Largest Contentful Paint (LCP) is often determined by the hero image. A 2MB JPEG that takes 4 seconds to load on a 4G connection can be compressed to 300KB in WebP and load in under a second. That alone can move your LCP from "poor" to "good".
Lossy vs lossless compression
There are two families of compression:
- Lossy removes data that the human eye barely notices. JPEG, WebP lossy, and AVIF are lossy formats. You control the trade-off with a quality slider (typically 75-85 is the sweet spot).
- Lossless reduces file size without discarding any data. PNG and WebP lossless are examples. The savings are smaller (10-40%) but the output is pixel-identical.
Rule of thumb: use lossy for photographs and complex images, lossless for screenshots, logos, and graphics with sharp edges or text.
Choosing the right format
| Format | Best for | Browser support | Typical saving vs JPEG |
|---|---|---|---|
| WebP | Photos, graphics, transparency | All modern browsers | 25-35% |
| AVIF | Photos, HDR content | Chrome, Firefox, Safari 16+ | 40-50% |
| JPEG | Universal compatibility | Everywhere | Baseline |
| PNG | Lossless, transparency, screenshots | Everywhere | N/A (different use case) |
If your audience uses modern browsers, WebP is the safest default. For maximum compression and you can accept slightly narrower support, go with AVIF.
Step-by-step compression workflow
1. Audit your current images
Use your browser DevTools Network tab to sort by size. Identify the heaviest images. Tools like Lighthouse or PageSpeed Insights will flag specific images that need optimization.
2. Resize before compressing
Compression alone is not enough if your source image is 4000px wide but displayed at 800px. Always resize to the actual display dimensions first, then compress. This alone can save 70%+ of file size.
3. Pick the right quality setting
For most photographs, quality 80 offers the best size-to-quality ratio. Below 70 you will start noticing artefacts. Above 90 the file size grows rapidly with diminishing visual returns.
4. Convert to a modern format
Switch from JPEG to WebP or AVIF. Even at the same perceived quality, modern codecs produce significantly smaller files thanks to better entropy coding and prediction models.
5. Automate for production
For websites with frequent uploads, integrate compression into your build pipeline or use an API. Morphix offers a REST API that lets you convert and compress images programmatically.
Common mistakes to avoid
- Over-compression: setting quality below 60 on photographs introduces visible artefacts, especially in gradients and skin tones.
- Ignoring dimensions: compressing a 5000px image and serving it at 300px wastes bandwidth. Resize first.
- Forgetting responsive images: use
srcsetand<picture>to serve different sizes for different viewports. - Skipping metadata removal: EXIF data (GPS, camera model, timestamps) can add 50KB+ to each file. Strip it unless you have a reason to keep it.
FAQ
What quality setting should I use for web images?
For photographs, quality 80 is the sweet spot. It reduces file size by 60-80% compared to quality 100 with no visible difference on screen. For images with text or sharp edges, use quality 90 or switch to PNG.
Is WebP better than JPEG for the web?
Yes, in most cases. WebP produces files 25-35% smaller than JPEG at equivalent visual quality. It also supports transparency (like PNG) and animation (like GIF). All modern browsers support WebP since 2020.
How much can I reduce image file size without losing quality?
With the right format and quality settings, you can typically reduce file size by 50-80% without any perceptible quality loss. The exact savings depend on the source image, its content, and the target format.
Should I use AVIF instead of WebP?
AVIF offers better compression (40-50% smaller than JPEG) but browser support is narrower: Safari only added full support in version 16. Use AVIF with a WebP or JPEG fallback for maximum savings with universal compatibility.
Do I need to compress images if I use a CDN?
Yes. A CDN speeds up delivery but does not reduce the file size. Compressing images before uploading them to a CDN gives you both benefits: smaller files delivered faster from edge servers.