Images typically account for 50–70% of a webpage's total transfer size — making them the single most impactful factor in load speed. Compressing images doesn't mean sacrificing quality. With the right format and quality settings, you can reduce file sizes by 60–80% with virtually no perceptible difference to the human eye.
1. Lossy vs. Lossless Compression: Principles and Trade-offs
Image compression falls into two categories. Which one to use depends on the image's purpose:
| Type | How it works | Formats | Best for |
|---|---|---|---|
| Lossy | Discards high-frequency details that the human eye barely notices; cannot be fully restored | JPEG, WebP (lossy), AVIF | Photos, realistic illustrations, social media |
| Lossless | Encodes repeating patterns for smaller size; can be fully restored | PNG, WebP (lossless), GIF | Screenshots, logos, icons, design assets requiring exact colors |
Common misconception: "PNG is always higher quality than JPEG." Quality is about compression type, not format. PNG is lossless and suits screenshots and icons; JPEG is lossy and suits photos. Saving a photo as PNG won't make it sharper — it'll just make the file bigger.
2. What Does the Quality Parameter Actually Mean?
JPEG and lossy WebP both have a 0–100 quality parameter. It's not linear — it corresponds to different amounts of detail discarded:
- 85–95: Nearly indistinguishable from the original; suitable for print or large display, but file sizes are large
- 75–85: The sweet spot for web photos — barely any visible difference, 40–60% smaller files
- 60–75: Acceptable for thumbnails and social media at small display sizes
- Below 60: Compression artifacts become visible; only suitable for very low-bandwidth scenarios
A practical workflow: start at quality 80, zoom to 100% and check for visible blocks or blurry edges, then keep lowering until you find the lowest value where artifacts are just barely invisible.
3. WebP: The Modern Web's Best Format
WebP was introduced by Google in 2010 and is now supported by all major browsers (Chrome, Firefox, Safari 14+, Edge). Compared to traditional formats:
| Feature | JPEG | PNG | WebP |
|---|---|---|---|
| Lossy compression | Yes | No | Yes, 25–35% smaller than JPEG at same quality |
| Lossless compression | No | Yes | Yes, ~26% smaller than PNG |
| Transparency (Alpha) | No | Yes | Yes |
| Animation | No | Limited (APNG) | Yes |
| Browser support | All browsers | All browsers | All modern browsers (no IE) |
If you don't need to support IE (which reached end-of-life in 2022), WebP is the best choice for photos and illustrations. Need transparency with smaller file sizes? WebP lossless is a direct PNG replacement.
4. Format Selection by Scenario
Photos (landscapes, people, products)
Use WebP lossy (quality 75–85), fallback to JPEG (quality 80–85). Don't use PNG — files will be several times larger with no quality benefit.
Logos, icons, screenshots
Use WebP lossless or SVG, fallback to PNG. Don't use JPEG — sharp edges and text will show visible blurring and blocking artifacts.
Images with transparency
Use WebP (supports alpha), fallback to PNG. JPEG doesn't support transparency — the transparent areas will turn white or black.
Animations
WebP animations are 64% smaller than GIF (lossy) to 19% smaller (lossless). When possible, prefer CSS animations or short MP4 videos — generally better performance.
5. Responsive Images: Different Sizes for Different Devices
Beyond compression, another commonly overlooked optimization is resolution matching. Displaying a 2400×1600 image on a phone (which typically shows 400px wide) wastes bandwidth downloading a file 6× larger than needed.
The HTML srcset attribute lets the browser automatically choose the most appropriate version:
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="description"
>
6. Images Inside PDFs
Oversized PDF files are often caused by uncompressed embedded images. Compress images to the appropriate quality (75–85) before embedding in a PDF, rather than embedding full-size images and relying on a PDF tool to compress afterward — the latter rarely achieves the expected reduction.
Summary
- Use lossy compression (JPEG, WebP) for photos; lossless (PNG, WebP lossless) for screenshots, logos, and icons
- Start JPEG/WebP quality at 80 and find the lowest value where artifacts are just barely invisible
- WebP is the best choice for modern web: 25–35% smaller than JPEG at the same quality, with transparency and animation support
- Responsive images (srcset) ensure each device only downloads the size it actually needs
- Compress images before embedding in PDFs for better, more predictable results