Every kilobyte matters on the modern web. Images account for roughly 50% of page weight on most sites, making compression one of the single highest-impact optimizations you can make. But 'compression' has become a loaded term — people hear it and assume visible quality loss. That does not have to be the case.
Lossy vs. Lossless — What Actually Happens to Your Pixels
Lossless compression reorganizes pixel data more efficiently without discarding anything. Think of it like packing a suitcase better — same clothes, smaller bag. PNG uses DEFLATE-based lossless compression. WebP lossless mode typically achieves 26% smaller files than PNG for the same visual output.
Lossy compression selectively removes data the human eye is unlikely to notice. JPEG has done this since 1992 using DCT (discrete cosine transform) to drop high-frequency detail. Modern codecs like WebP lossy and AVIF are dramatically smarter — they use perceptual models to preserve edges and textures that matter while aggressively compressing smooth gradients.
The Quality Slider Myth
Most tools expose a 'quality' slider from 0-100, but the relationship between that number and visible quality is not linear. For JPEG, anything above 85 produces nearly imperceptible differences on screen. For WebP, 80 is often the sweet spot. For AVIF, even 60-70 can look excellent because the codec is fundamentally more efficient.
A/B test your quality settings by exporting the same image at 70, 80, and 90 quality in WebP. View them at actual display size (not zoomed in). You will often find that 80 is indistinguishable from 90 at half the file size.
Format Selection: When to Use What
- JPEG — Best for photographs with millions of colors. Universal browser support. Use for hero images and photo galleries when you need maximum compatibility.
- PNG — Best for graphics with transparency, sharp text, or limited color palettes (logos, icons, screenshots). Larger files but pixel-perfect reproduction.
- WebP — Best general-purpose modern format. Supports both lossy and lossless, plus transparency. 25-35% smaller than JPEG at equivalent quality. Supported by all modern browsers since 2020.
- AVIF — Newest option, based on AV1. Around 50% smaller than JPEG in many cases. Great for high-resolution photography. Encoding is slower but decoding is fast. Browser support is above 93% globally.
Batch Compression: The Real Workflow
Compressing one image is easy. The real challenge is doing it at scale — 50 product photos, 200 blog illustrations, an entire portfolio. Most online tools limit batch sizes behind paywalls (5 images at a time is a common restriction).
Browser-based batch processing using WebAssembly (WASM) eliminates this bottleneck. Your CPU handles the work directly — no upload queues, no server timeouts, no file size limits imposed by HTTP upload constraints. The tradeoff is that processing speed depends on your hardware, but even mid-range laptops handle batches of 50+ images comfortably.
When batch processing, sort your images by source type first. Group photographs separately from screenshots and graphics. Apply different quality settings to each group — photos tolerate more lossy compression than screenshots with text.
Privacy Implications of Image Compression
Most people overlook this: when you upload images to an online compression service, those files often pass through third-party servers. EXIF metadata (GPS coordinates, camera model, timestamps) travels with them. Some services strip metadata, others do not. Some retain uploaded files temporarily for 'quality improvement.'
Local browser-based compression sidesteps this entirely. Your files never leave your device. There is no network request carrying your data. This matters for client work, medical imaging, legal documents, or any scenario where file confidentiality is non-negotiable.
Measuring Results: What to Look For
- File size reduction percentage — Aim for 60-80% reduction on unoptimized JPEGs, 20-40% on already-compressed images.
- Visual comparison at display size — Not at 400% zoom. View at the size your users will actually see.
- Core Web Vitals impact — Run Lighthouse before and after. Track LCP (Largest Contentful Paint) specifically.
- SSIM score — If available, a Structural Similarity Index above 0.95 means the compressed version is visually identical to most viewers.
Takeaway
Image compression is not a single action — it is a format selection plus quality calibration plus batch workflow. The best results come from matching each image type to its ideal format and quality setting, then processing everything on your machine for speed and privacy. You do not need paid subscriptions or desktop software to get good results.