How to Compress Images Without Losing Quality

Image files are frequently the largest assets on a web page, in an email attachment, or in a mobile app. Compressing them reduces bandwidth, speeds up page loads, and makes files easier to share: but doing it wrong produces blurry or artefact-laden images that look worse than the original. This guide covers every decision point: which compression type to use, which format to choose, what quality setting to target, and how to build an efficient batch workflow for teams processing hundreds of images at a time.

Lossy vs lossless compression: choosing the right approach

Lossless compression reduces file size without discarding any image data. PNG uses lossless compression: a decompressed PNG is pixel-for-pixel identical to the original. Lossless is right for logos, icons, screenshots, and anything with sharp edges or flat colour areas where even small quality reductions are visible. If you zoom into a losslessly compressed image and it looks perfect, that is by design.

Lossy compression removes image data that is unlikely to be noticed by the human eye. JPEG uses lossy compression: at a quality setting of 80%, the file is roughly 60% smaller than at 100%, and the difference is invisible in most photographs. Lossy is right for photographs and complex images where subtle detail loss is imperceptible. The human visual system is less sensitive to colour detail than to brightness detail, which is why lossy algorithms can discard significant amounts of colour information without creating visible artefacts.

WebP and AVIF support both lossy and lossless modes, making them more flexible than their predecessors. A WebP lossless image is typically 26% smaller than the equivalent PNG. A WebP lossy image is typically 25 to 35% smaller than the equivalent JPEG at the same visual quality. AVIF lossless is competitive with WebP lossless, and AVIF lossy can be 50% smaller than JPEG at equal quality.

Image format comparison: file sizes and browser support

Choosing the right format is often the single biggest lever for reducing file size, before you even touch a quality slider. Here is how the four major formats compare on a typical 1200 x 800 photograph:

The file size column shows representative ranges for the same source image. AVIF delivers the smallest files but has the narrowest browser support. WebP is the practical default for most web projects in 2025: near-universal support with 25 to 35% smaller files than JPEG. JPEG remains necessary when you need guaranteed compatibility across all devices including older mobile browsers.

WebP adoption in 2025: the numbers

WebP browser support now exceeds 97% globally according to caniuse.com data. Chrome adopted WebP in 2014, Firefox in 2019, and Apple added full WebP support to Safari in 2020. As of 2025, WebP is the default export format for Google's own image services, the recommended format in Google's Core Web Vitals guidance, and is served by default by Shopify, Cloudflare Images, and most major image CDNs.

If your analytics show less than 3% of users on legacy browsers (Safari 13 or below, Internet Explorer), you can safely serve WebP to all users without a fallback. If you need to support older browsers, use an HTML picture element with a WebP source and a JPEG fallback: modern browsers pick the WebP, older browsers fall back to JPEG automatically. Either way, the era of defaulting to JPEG for web images is over.

AVIF adoption is growing but slower. Safari added AVIF support in version 16 (September 2022), bringing global support to roughly 90% of browsers. For maximum compression on a portfolio, e-commerce catalogue, or media-heavy site, serving AVIF to supported browsers and WebP as a fallback is the highest-performance option available without sacrificing compatibility.

What quality setting should you use?

For web images, a quality setting of 75 to 85% is the industry standard starting point for JPEG. Below 70%, compression artefacts become visible in photographs: blocky patterns called DCT artefacts, colour banding in gradients, and smearing around high-contrast edges. Above 85%, file size grows rapidly without any visible quality improvement. The sweet spot for most JPEG images is 78 to 82%.

WebP quality settings are not directly comparable to JPEG quality numbers, because the two formats use different encoding algorithms. A WebP at quality 80 typically looks similar to a JPEG at quality 90 while producing a smaller file. Start at WebP quality 80 and compare visually: most people find the results indistinguishable from a higher-quality JPEG.

For thumbnails and small images displayed at low zoom levels, you can compress more aggressively (60 to 70%) because artefacts are less visible at small sizes. For hero images and product photos where users zoom in, stay at 80% or above. For images displayed at their natural pixel size (not scaled by CSS), quality 85 is a safe starting point.

Resizing vs compressing: which matters more?

The biggest file size reduction often comes from resizing, not compression settings. A 4000 x 3000 pixel photograph displayed at 800 x 600 pixels on a webpage contains 25 times more pixels than the display needs. Resizing to the display dimensions before applying compression reduces the file to a fraction of its original size before the quality slider is even touched.

A practical example: a 4 MB raw photograph at 4000 x 3000 pixels, resized to 1200 x 900 for a blog hero image, is now around 400 KB. Compressing that 400 KB image at 80% JPEG takes it to around 120 KB. Compressing the original 4 MB image at 80% JPEG without resizing takes it to around 900 KB. The resize did ten times more work than the quality setting.

The right display width depends on your layout. Check your CSS to find the maximum rendered width of each image container, then export at that exact width multiplied by 2 for high-DPI (Retina) screens. For a blog post with a 720px content column, export images at 1440px wide. Serving a 3000px image into a 720px container is one of the most common performance mistakes on content sites.

Agency batch compression workflow: processing hundreds of images efficiently

Individual image compression is straightforward. The challenge for agencies and teams is establishing a repeatable workflow that produces consistent results across hundreds of images without manual intervention on each one.

1. 1.Audit what you have. Before starting, identify the format, dimensions, and file size of every image that needs compressing. Sort by file size descending: the ten largest images will account for most of your total bandwidth savings. Fix those first.
2. 2.Standardise on two formats. Choose one lossy format (WebP for modern, JPEG for compatibility-required) and one lossless format (WebP lossless for graphics, PNG as fallback). Having a standard eliminates per-image format decisions.
3. 3.Establish dimension standards. Create a lookup table of standard image dimensions for your project: hero images at 1440px wide, card thumbnails at 600px, author avatars at 200px. Resize all images to their standard dimension before compressing.
4. 4.Set quality once, apply consistently. Choose a quality setting (80% for photographs, lossless for logos and icons) and apply it uniformly. Avoid adjusting quality image by image: consistency matters more than per-image optimisation for large volumes.
5. 5.Compress in batch, not one at a time. AlteredIdea's Image Compressor handles multiple files in a single session: upload a folder of images, apply a quality setting, and download the compressed versions as a ZIP. This handles dozens of images in a single pass.
6. 6.Do a final visual spot check. After batch compression, open 5 to 10 images from the batch at 100% zoom and compare against the originals. Look for blocky artefacts in high-contrast areas, colour banding in gradients, and blurring around text. If any of these appear, increase the quality setting and re-run the batch.
7. 7.Measure the outcome. Calculate the total size reduction across the batch and check the before/after page load time for key pages using browser developer tools. A well-executed compression pass on a media-heavy site typically reduces image payload by 40 to 70%.

Why browser-based compression is safer for client work

Most online image compression tools require uploading files to a remote server. For agencies working with client assets such as product photographs, brand imagery, and confidential documents this is a genuine risk. Files uploaded to third-party servers may be stored, indexed, or accessed by the service provider. Depending on the nature of the images and your client agreement, this could be a data handling violation.

Browser-based compression processes files entirely inside your browser using JavaScript and the Canvas API. Nothing is transmitted over the network. You can disconnect from the internet after loading the page and the tool continues to work. For agencies handling client NDA-protected materials or working in regulated industries, browser-based tools are the appropriate choice regardless of any server-side service's privacy policy.

Practical checklist for getting the best results

• •Resize to display dimensions before compressing: this alone reduces most images by 50 to 80%.
• •Use WebP as the default format for web images in 2025: it has 97% browser support and files 25 to 35% smaller than JPEG.
• •Start at quality 80% for photographs, lossless for logos and icons.
• •Always compare at 100% zoom, not zoomed out: artefacts invisible at 50% become obvious at 100%.
• •Target at least 40% file size reduction: if you are not hitting that, try a different format or a slightly lower quality setting.
• •For agencies, establish format and quality standards upfront so the whole team applies settings consistently.