Image compression reduces file size by removing redundant data or approximating visual information that the human eye cannot easily distinguish. The right compression strategy can cut file sizes by 60-90% with minimal visible quality loss — dramatically improving page load speed, reducing bandwidth costs, and meeting email attachment limits.
This guide explains the difference between lossy and lossless compression, how quality settings affect output, and when to use each approach for web, email, social media, and print workflows.
Lossy vs lossless compression
Lossless compression (used by PNG and lossless WebP) reduces file size without discarding any image data. The decompressed image is bit-for-bit identical to the original. This is ideal for screenshots, diagrams, logos, and any image where every pixel matters.
Lossy compression (used by JPG, standard WebP, and AVIF) achieves much smaller files by discarding visual information the human eye is less sensitive to — high-frequency details, subtle color gradients, and noise. At quality settings of 80-85%, the difference is imperceptible for most photographs, while file size drops by 50-80%.
Understanding quality settings
Quality is typically expressed as a percentage from 1 (maximum compression, lowest quality) to 100 (minimum compression, highest quality). The relationship between quality setting and file size is not linear — dropping from 100 to 85 often halves the file size, while dropping from 85 to 70 saves another 20-30%.
The sweet spot for most web images is 75-85% quality in JPG or WebP format. Below 70%, compression artifacts become noticeable on detailed images — blocking patterns in gradients, ringing around sharp edges, and color banding in smooth areas. For thumbnails and previews, lower quality (60-70%) is acceptable since the small display size hides artifacts.
Choosing the right format for compression
For photographs and complex images: use WebP at 80-85% quality for the best compression-to-quality ratio, or JPG at 80-85% for maximum compatibility. AVIF offers 20-30% smaller files than WebP but takes longer to encode.
For screenshots, diagrams, and images with text: use PNG (lossless) to preserve sharp edges and readable text. If file size is critical, lossless WebP typically produces files 20-25% smaller than PNG.
For a detailed format comparison, see our image format comparison guide.
Compression workflow: resize first, compress second
Always resize images to the dimensions you actually need before compressing. A 4000px-wide photo resized to 1200px for web use is already 90% smaller before any compression is applied. Compressing the resized image then achieves the final target file size.
Use the Compress Image tool to apply quality-based compression after resizing. For batch workflows, process each image individually — the tool preserves EXIF orientation data so photos display correctly regardless of how they were taken.
Key takeaways
- Lossy compression (JPG, WebP, AVIF) is best for photographs — 80-85% quality is the sweet spot for web images.
- Lossless compression (PNG, lossless WebP) preserves every pixel — use for screenshots, diagrams, and text-heavy images.
- Always resize images to target dimensions before compressing — this has the biggest impact on file size.
- WebP offers the best balance of compression, quality, and browser support (97%+ coverage) for web use.
- Below 70% quality, lossy compression artifacts become noticeable on detailed images.
Frequently asked questions
Does image compression reduce quality?
Lossy compression (JPG, WebP) slightly reduces quality, but at 80-85% settings the difference is imperceptible. Lossless compression (PNG) reduces file size without any quality loss.
What is the best image compression for websites?
WebP at 80-85% quality offers the best compression-to-quality ratio with 97%+ browser support. AVIF is even smaller but has less browser coverage.
Should I resize or compress first?
Resize first. Reducing dimensions from 4000px to 1200px cuts 90% of the data before compression even starts, producing much smaller final files.
Can I undo image compression?
Lossless compression is fully reversible. Lossy compression permanently removes data — always keep the original file if you may need the full-quality version later.
Related tools
Related guides
JPG vs PNG vs WebP vs AVIF: Which Image Format to Use
A detailed comparison of popular image formats covering compression, transparency, browser support, and the best use case for each format.
How to Optimize Images for Website Performance
Practical techniques for optimizing images to improve website loading speed, including resizing, compression, format selection, and responsive images.