Images take up more bandwidth than anything else on your page. A single unoptimized hero image can add 2MB to your page weight. Compression cuts that number dramatically without making your design look broken.
Lossy vs Lossless Compression
Not all compression is equal. Choose the right method for the job:
- Lossy: Discards some data to shrink file size. Best for photos and complex images. Use quality settings between 70–85.
- Lossless: Reduces file size without losing any data. Best for logos, icons, and screenshots. Smaller savings, but perfect fidelity.
Quick comparison:
| Method | Size Reduction | Quality Impact | Best For |
|---|---|---|---|
| Lossy JPEG | 60–80% | Minimal at 75 quality | Photos, backgrounds |
| Lossless PNG | 20–40% | None | Logos, icons, text |
| WebP lossy | 70–85% | Minimal | Everything |
| WebP lossless | 25–35% | None | Graphics, screenshots |
Step 1: Pick the Right Quality Setting
For JPEG and WebP, quality is a number from 1 to 100. Higher means larger files. The sweet spot for web images is 75–80. At that range, most people cannot tell the difference from the original.
- 70–75: Aggressive savings. Use for thumbnails and background images.
- 75–85: Balanced. Use for hero images and product photos.
- 85–95: Conservative. Use when image quality is critical.
- 100: No compression. Only use for masters and originals.
Pro tip: Always compress at your target dimensions. Compressing a 4000px image to 75 quality still wastes bytes if you display it at 800px. Resize first, then compress.
Step 2: Strip Metadata
Photos from cameras and screenshots from design tools carry hidden metadata: EXIF camera info, GPS coordinates, color profiles, and creation timestamps. This data adds 10–100 KB per image with zero visual benefit. Strip it during compression.
Step 3: Use Modern Formats
WebP and AVIF are the modern standards. They beat JPEG and PNG on both size and quality. If your audience uses modern browsers, serve WebP with a JPEG fallback. The <picture> element handles this automatically.
Picture element example:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>Step 4: Lazy Load Offscreen Images
Not all images need to load immediately. Add loading="lazy" to images below the fold. The browser fetches them only when the user scrolls near them. This alone can cut initial page weight by 30–50% on image-heavy pages.
Step 5: Use the Image Compressor
Stop opening Photoshop for batch compression. The Image Compressor processes multiple images at once, strips metadata, and lets you control quality and output format. Everything runs in your browser — no uploads, no queues.
Browse all tools: AllOmnitools.com/all-tools/ – 20+ free online utilities, no account required.