Last updated
JPEG Compression Quality Levels
The Image Compressor reduces file sizes while maintaining visual quality. JPEG quality settings control the trade-off between size and quality:
/* JPEG quality comparison for a 3000×2000px photo */
Quality 100 (lossless): 8.4 MB — no compression, maximum quality
Quality 90: 2.1 MB — excellent quality, 75% reduction
Quality 85: 1.4 MB — very good quality, 83% reduction ← recommended
Quality 75: 0.9 MB — good quality, 89% reduction
Quality 60: 0.6 MB — acceptable quality, 93% reduction
Quality 40: 0.4 MB — noticeable artifacts, 95% reduction
Quality 20: 0.2 MB — heavy artifacts, 98% reduction
/* Recommended quality by use case */
Hero images, product photos: 85-90 (high quality, reasonable size)
Blog post images: 75-80 (good quality, fast loading)
Thumbnails, previews: 60-70 (acceptable quality, very small)
Background images: 60-75 (quality less critical)
Print-quality output: 95-100 (maximum quality)PNG Lossless Compression
PNG compression is lossless — no quality is lost, only redundant data is removed:
/* PNG compression results */
Original PNG (unoptimized): 245 KB
After lossless compression: 168 KB (31% reduction)
After palette optimization: 42 KB (83% reduction — for logos/icons)
/* When to use PNG vs JPEG */
Use PNG for:
- Logos and icons (sharp edges, transparency)
- Screenshots (text must be crisp)
- Images with large flat color areas
- Images requiring transparency
Use JPEG for:
- Photographs (complex color gradients)
- Product photos
- Background images
- Any image where small file size matters more than perfect quality
/* PNG-8 vs PNG-24 */
PNG-24: Full color (16.7M colors) — use for photos with transparency
PNG-8: Indexed color (256 colors) — use for logos, icons, simple graphics
/* Example: logo optimization */
logo.png (PNG-24): 89 KB
logo.png (PNG-8): 12 KB (87% reduction — same visual quality for simple logo)WebP Format Conversion
WebP provides 25-35% better compression than JPEG at equivalent quality:
/* WebP vs JPEG comparison */
hero-image.jpg (quality 85): 142 KB
hero-image.webp (quality 80): 98 KB (31% smaller)
product-photo.jpg (quality 85): 89 KB
product-photo.webp (quality 80): 61 KB (31% smaller)
/* Implementing WebP with JPEG fallback */
<picture>
<source srcset="hero.webp" type="image/webp">
<source srcset="hero.jpg" type="image/jpeg">
<img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>
/* CSS background with WebP fallback */
.hero {
background-image: url('hero.jpg'); /* fallback */
}
@supports (background-image: url('test.webp')) {
.hero {
background-image: url('hero.webp');
}
}
/* Next.js automatic WebP conversion */
import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={1200} height={600} />
/* Next.js automatically serves WebP to supported browsers */Responsive Image Generation
The compressor generates multiple sizes for use with HTML srcset for responsive images:
/* Generated responsive image set */
hero-320w.jpg → 320px wide, 28 KB
hero-640w.jpg → 640px wide, 68 KB
hero-1024w.jpg → 1024px wide, 142 KB
hero-1920w.jpg → 1920px wide, 312 KB
/* HTML srcset implementation */
<img
src="hero-1024w.jpg"
srcset="
hero-320w.jpg 320w,
hero-640w.jpg 640w,
hero-1024w.jpg 1024w,
hero-1920w.jpg 1920w
"
sizes="
(max-width: 320px) 320px,
(max-width: 640px) 640px,
(max-width: 1024px) 1024px,
1920px
"
alt="Hero image"
width="1920"
height="1080">
/* WebP srcset with fallback */
<picture>
<source
type="image/webp"
srcset="hero-320w.webp 320w, hero-640w.webp 640w, hero-1024w.webp 1024w"
sizes="(max-width: 640px) 640px, 1024px">
<img
src="hero-1024w.jpg"
srcset="hero-320w.jpg 320w, hero-640w.jpg 640w, hero-1024w.jpg 1024w"
sizes="(max-width: 640px) 640px, 1024px"
alt="Hero image"></picture>Metadata Stripping
EXIF metadata adds file size without benefiting web users. The compressor strips it by default:
/* EXIF data in a typical camera photo */
Camera make/model: Canon EOS R5
Lens: RF 24-70mm f/2.8L
Focal length: 35mm
Aperture: f/4.0
Shutter speed: 1/250s
ISO: 400
GPS coordinates: 37.7749° N, 122.4194° W ← privacy risk!
Date/time: 2024-01-15 14:32:07
Software: Adobe Lightroom 7.0
Copyright: © 2024 Photographer Name
/* Metadata size impact */
Photo with EXIF: 2.4 MB
Photo without EXIF: 2.3 MB (saves ~100KB per image)
/* Privacy consideration */
/* GPS coordinates in EXIF reveal where photos were taken */
/* Always strip EXIF before publishing photos online */
/* Preserving useful metadata */
/* The compressor can optionally preserve: */
Copyright information → useful for licensing
Color profile (ICC) → important for color accuracy
Orientation tag → needed for correct display rotation