Lossy vs. Lossless Compression
All image compression falls into one of two categories:
- Lossless compression reduces file size by finding more efficient ways to store the same data — no quality is sacrificed. Every pixel is identical to the original. PNG is the most common lossless format. File size reductions: 10–30%.
- Lossy compression permanently removes data the human eye is least likely to notice. JPEG uses lossy compression. File size reductions: 50–90%, but quality degrades if taken too far. The goal is finding the "sweet spot" where the compression is invisible to viewers.
Choosing the Right Format
| Format | Type | Best For | Browser Support |
|---|---|---|---|
| JPEG / JPG | Lossy | Photographs, product images | Universal |
| PNG | Lossless | Logos, graphics with transparency | Universal |
| WebP | Both | Everything — replaces JPEG & PNG | 95%+ modern browsers |
| AVIF | Both | Next-gen compression (50% smaller than JPEG) | Growing support |
| SVG | Vector | Logos, icons, illustrations | Universal |
| GIF | Lossless | Simple animations only | Universal (use MP4 instead) |
The bottom line: Convert all JPEG and PNG images to WebP for an immediate 25–35% size reduction with no perceptible quality difference.
What "Quality" Setting Should You Use?
When using lossy compression (JPEG, WebP), you control quality via a 0–100 slider:
- Quality 90–100: Near-lossless. Use for images where tiny details matter (jewelry, fine art).
- Quality 75–85: The sweet spot for e-commerce product photos. Excellent visual quality, significant file size reduction.
- Quality 60–74: Acceptable for background images or thumbnail grids. Visible artifacts at 100% zoom.
- Below 60: Perceptible degradation. Avoid for all visible product pages.
Image Dimensions: Scale Before You Compress
Compressing a 4000 × 4000 pixel image that will be displayed at 800 × 800 pixels is wasteful — you're sending 25x the necessary data. Always resize images to the maximum display size before compressing:
- E-commerce product images: 800 × 800px to 1200 × 1200px (for zoom functionality)
- Blog/article hero images: 1200 × 630px (also your Open Graph image size)
- Thumbnails / grid items: 400 × 400px maximum
Impact on SEO and Core Web Vitals
Google's Core Web Vitals measure three things: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Image optimization affects all three:
- LCP (should be under 2.5 seconds): The largest visible element on initial page load is almost always an image. Properly compressed images are the #1 way to improve LCP.
- CLS (should be under 0.1): Always set explicit width and height attributes on
<img>tags. This reserves space and prevents layout shifts as images load.