Every image on the web is a trade-off between file size and visual quality. Too large, and your pages load slowly — hurting both user experience and search rankings. Too compressed, and your images look pixelated or blurry. The good news is that with the right techniques, you can dramatically reduce file sizes while keeping images visually indistinguishable from the originals.
Lossy vs Lossless Compression
Before diving into settings, it helps to understand the two categories of image compression:
- Lossy compression permanently removes image data to reduce file size. JPEG and WebP use lossy compression. The discarded data is chosen intelligently — the algorithm removes detail that the human eye is least likely to notice. At quality settings of 80–90%, most people cannot tell a lossy-compressed image from the original.
- Lossless compression reduces file size without removing any data. PNG and GIF use lossless compression. Every pixel is preserved exactly. Lossless is ideal for logos, icons, screenshots, and images that will be edited further.
For most photographs and images on the web, lossy compression at a high quality setting is the right choice. For graphics with text, sharp edges, or transparent backgrounds, lossless is better.
The Best Quality Settings for JPEG
JPEG quality is usually expressed on a scale of 1–100, where 100 is the least compressed (largest file) and 1 is the most compressed (smallest file, worst quality). The useful range for web images is 70–90.
- Quality 85–90%: Visually indistinguishable from the original for most photographs. This is the sweet spot for high-quality images where file size matters less — hero images, product photos, portfolio work.
- Quality 75–85%: A noticeable reduction in file size (typically 40–60% smaller than 90%) with only minor quality loss on close inspection. Ideal for blog post images, thumbnails, and social media.
- Quality 60–75%: Visible compression artifacts on close inspection, but acceptable for small thumbnails, preview images, and low-priority content.
Rule of thumb: Start at quality 85% and compare the output side-by-side with the original at 100% zoom. If you can see a difference, increase quality. If it looks identical, try 80%. Find the lowest quality where the difference becomes invisible.
Compressing PNG Files
PNG compression works differently from JPEG. Because PNG is lossless, the quality setting does not remove data — it controls how hard the encoder works to find patterns in the data. Higher compression levels produce smaller files but take longer to encode. The output is always pixel-identical.
For PNG files with many colours (like photographs saved as PNG), the file size is often enormous. In these cases, the best strategy is usually to convert to JPEG or WebP instead. Only use PNG when you genuinely need lossless quality or transparency.
For PNGs that must stay as PNG — icons, logos, UI graphics — palette quantisation is highly effective. Reducing a 24-bit PNG (16 million colours) to an 8-bit palette (256 colours) typically cuts file size by 60–80% with no visible difference for images that don't use photographic gradients.
WebP: Better Compression for Both Use Cases
WebP is a modern format developed by Google that supports both lossy and lossless compression. In lossy mode, WebP produces files roughly 25–35% smaller than JPEG at the same visual quality. In lossless mode, WebP is typically 20–30% smaller than PNG.
Browser support for WebP is now excellent — all modern browsers (Chrome, Firefox, Safari, Edge) support it. If you are serving images on the web, WebP is almost always the best format choice for new projects. The only exception is when you need broad compatibility with very old software or when uploading to platforms that don't accept WebP.
The Importance of Starting from a High-Quality Source
One of the most common mistakes is compressing an already-compressed image. Every time you save a JPEG, compression artifacts are introduced. If you compress a JPEG again from the already-compressed version, you are compressing the artifacts too — producing a noticeably worse result at the same file size.
Always start from the original, uncompressed source file (RAW, TIFF, or the highest-quality JPEG from the camera). Never re-compress a JPEG that has already been compressed.
Resize Before You Compress
The single most effective way to reduce image file size is to resize the image to the dimensions at which it will be displayed. Serving a 4000×3000 px photograph on a webpage where it displays at 800×600 px wastes bandwidth and processing time.
Resize your image to the exact display dimensions before compressing. A 800×600 px image at 85% JPEG quality will always be smaller than a 4000×3000 px image at the same quality, and it will look identical to the viewer.
Practical Workflow
- 1Start from the original high-quality source file.
- 2Resize to the exact display dimensions using a tool like our Image Resizer.
- 3Choose the right format: WebP or JPEG for photos, PNG for graphics with transparency.
- 4Set quality to 85% and export.
- 5Compare the output to the original at 100% zoom.
- 6If indistinguishable, try 80%. If visible artifacts appear, increase to 88%.
- 7Save the final file and use it on your website or application.
Summary
Compressing images without quality loss is not about using a single magic setting — it's about understanding the trade-offs and making deliberate choices. Resize to the display dimensions, choose the right format, use lossy compression at 80–90% for photographs, and always start from the highest-quality source. Following this workflow consistently produces images that load fast and look great.