Key takeaways
- JPEG quality 75-85 is visually near-identical to 100 at a fraction of the file size — start there, not at maximum quality.
- Resizing oversized images to their real display dimensions is the biggest free win: a 4000 px photo shown at 800 px wastes over 90% of its bytes.
- Format choice matters as much as the quality slider: the same photo is typically 25-35% smaller as WebP and smaller again as AVIF, at equal quality.
- Compress from originals, work on copies, and keep a lossless master — every lossy re-save throws away data permanently.
- If you cannot see a difference at 100% zoom, you have compressed well; chase bytes, not a target file size in the abstract.
Why Image Compression Matters
The average web page in 2026 transfers 2.2 MB, and images account for 45% of that. A single uncompressed product photo at 5 MB can add two seconds to a page load on 4G — and Google's Core Web Vitals penalise pages with a Largest Contentful Paint over 2.5 seconds.
Beyond web performance, file size matters for email sending limits (most providers cap at 25 MB total), cloud storage quotas (Google Drive gives 15 GB, iCloud 5 GB), upload limits on forms and applications, and mobile data costs for users in bandwidth-constrained regions.
The good news: most images can be compressed 60-90% without a human eye detecting any difference, because cameras and design tools produce far more data than is necessary for a good-looking image.
How Lossy Compression Works
Lossy compression reduces file size by permanently discarding image data that the human visual system is least sensitive to. In JPEG, this means converting each 8×8 pixel block into frequency coefficients (using the Discrete Cosine Transform) and rounding the small coefficients — representing fine detail — down to zero.
The quality slider (typically 0-100) controls how aggressively those coefficients are rounded. Quality 95 preserves almost all detail and gives 10-20% size reduction. Quality 80 discards invisible subtlety for 40-60% reduction. Quality 50 starts producing visible artefacts in complex scenes.
The key insight: lossy compression is not linear. Going from 100 to 80 saves 60% file size with zero visible change. Going from 80 to 60 saves another 20% with noticeable degradation in edges and gradients. Quality 80 is almost always the sweet spot.
How Lossless Compression Works
Lossless compression finds statistical redundancy in pixel data and encodes it more compactly without discarding any information. PNG uses DEFLATE (the same algorithm behind ZIP files) combined with per-row predictive filtering — storing only the difference between what the filter expected and what the pixel actually contains.
Tools like OptiPNG, Zopfli, and PNGOUT improve the encoding by searching for better filter choices and more optimal Huffman tables. These can reduce a PNG by 5-20% with no visual change whatsoever — just a smaller file that decodes to identical pixels.
Lossless WebP uses a similar prediction+entropy-coding approach with more modern predictors, achieving 26% average reduction over PNG. For images that must remain lossless (screenshots, technical diagrams, archival), converting to lossless WebP is pure win.
Optimal Settings by Image Type
Different content types compress differently. Applying the same settings to a portrait photograph and a UI screenshot produces suboptimal results for one of them.
Photographic images (portraits, landscapes, products): JPEG quality 78-85 or WebP lossy quality 75-82. These preserve visual quality while removing 60-80% of file size.
Screenshots with text: PNG (lossless) or lossless WebP. Lossy compression at any level causes text to bleed and develop ringing artefacts at small sizes.
Graphics with flat colours and transparency: PNG with lossless optimisation (Zopfli/PNGOUT pass) or lossless WebP. Lossy modes destroy flat colour boundaries.
Gradient-heavy images (product shots on solid backgrounds, digital art): quality 85+ to prevent banding, or lossless. JPEG is notorious for banding in smooth gradients below quality 85.
Animated GIFs: reduce frame count, use nearest-neighbour rescaling to reduce dimensions, or convert to MP4 (90% smaller with better colour).
Batch Compression vs One-at-a-Time
If you have more than three images to compress, batch processing saves disproportionate time. Opening images one at a time in Photoshop, exporting, checking file size, adjusting, and re-exporting takes 2-3 minutes per image. A batch compressor handles 20 images in under 30 seconds.
This is especially relevant for website migrations (every image on the site needs compressing), photography portfolios (200+ images per shoot), e-commerce catalogue updates, and social media content preparation.
A good batch compressor lets you set quality once and apply it to every file, then download the results individually or as a ZIP. Doing compression locally in your browser means zero upload time, which for 20 files × 5 MB each saves several minutes on even fast connections.
Online vs Desktop Compression
Desktop tools (ImageMagick, Photoshop export, Lightroom) give more granular control but require software installation, learning curve, and use local CPU resources.
Online tools offer convenience but raise privacy concerns: uploading a photo to a server means a copy exists outside your device, potentially in logs, temporary storage, or backup systems. For personal photos, screenshots containing sensitive data, or unreleased product photography, this is a real risk.
Browser-based tools occupy the best middle ground: they run locally using JavaScript and Canvas APIs, giving the convenience of a web UI with zero data leaving your device. No server to trust, no upload queue, no deleted-after-24-hours promise you have to take on faith.
How to Compress Images in Your Browser (Step by Step)
Using Collabs Tool's image compressor:
- Open the compressor page — no install, no sign-up, works immediately.
- Drag and drop up to 20 images at once, or paste from clipboard.
- The tool auto-detects format and shows current file sizes.
- Adjust the quality slider: 75-82 is ideal for photos, 90+ for graphics with text.
- Preview side-by-side: original left, compressed right. Check for artefacts in faces, text, and gradients.
- Download individually or batch-download the results.
- Your images never left your device — verify in the Network tab: no upload request is made.
Common Compression Mistakes
Compressing already-compressed files: converting a JPEG to another JPEG at lower quality compounds artefacts. Start from the highest-quality source you have.
Using JPEG for images with text: JPEG's block-based compression causes ringing around sharp edges, making small text unreadable. Use PNG or lossless WebP.
Over-compressing below quality 60: below 60, blocking artefacts and colour banding become immediately visible on any screen. There is no setting worth quality loss that the viewer can see.
Stripping metadata without thinking: EXIF data contains camera settings, GPS coordinates, and copyright. Some compressors strip it automatically. If you want EXIF removed for privacy, that is correct. If you want it preserved for cataloguing, choose a compressor that keeps it.
Ignoring the container: converting a 12 MB PNG to JPEG and compressing it well is good. But converting a 12 MB PNG to a lossy WebP at quality 80 is better — 30% smaller at identical quality than the JPEG.
Measuring Compression Success
A good compressor gives you a before-and-after file size percentage. A 70% reduction means the new file is 30% of the original — excellent for photographic images. Anything under 40% reduction at visible quality means the image was already well-compressed (or you are using lossless mode on a complex image where lossless cannot help much).
The true test is visual: open the compressed image at 100% zoom and look at faces (skin tones should be smooth), text (edges should be crisp), and gradients (no banding). If all three pass, the compression is good regardless of the percentage.
Frequently asked questions
The questions people ask most about how to compress images without losing quality (2026), answered directly.