Image Compression Guide

Why image compression matters

Large images slow down web pages, consume excessive bandwidth, and take up storage space. A web page with uncompressed images can take several seconds longer to load, which increases bounce rates and hurts search rankings. Compressing images reduces their file size while maintaining acceptable visual quality, resulting in faster pages and a better user experience.

For e-commerce sites, image compression directly impacts conversion rates. Faster page loads lead to higher engagement and more sales. For content sites, compressed images reduce bandwidth costs and improve Core Web Vitals scores, which are a search ranking factor.

Lossy vs lossless compression

Lossy compression reduces file size by discarding visual information that the human eye is less sensitive to. The compressed image is not identical to the original, but the difference may be imperceptible at appropriate quality settings. JPG and WebP (in lossy mode) use lossy compression. The advantage is dramatically smaller file sizes. The disadvantage is that quality is reduced and the reduction is irreversible.

Lossless compression reduces file size without discarding any information. The compressed image is pixel-identical to the original. PNG and WebP (in lossless mode) use lossless compression. The advantage is perfect quality. The disadvantage is that file sizes are larger than lossy compression.

For most web use cases, lossy compression with a high quality setting produces excellent results with file sizes much smaller than lossless. For images where every pixel matters, such as medical images or technical diagrams, lossless compression is the right choice.

How image compression algorithms work

Lossy compression algorithms like JPG analyze the image in blocks and discard high-frequency detail that the eye is less sensitive to. They also convert the image to a frequency representation and quantize the frequencies, which reduces precision but saves space. The quality setting controls how aggressively frequencies are quantized. Higher quality means less quantization and larger files.

Lossless compression algorithms like PNG use techniques similar to ZIP compression. They find repeating patterns in the image data and encode them more efficiently. Because no information is discarded, the decompressed image is identical to the original. The compression ratio depends on the image content: images with large areas of uniform color compress better than images with lots of detail.

WebP supports both lossy and lossless compression and uses more modern algorithms than JPG and PNG, which is why it produces smaller files at equivalent quality.

Choosing the right quality level

For lossy compression, the quality setting is the primary control over the size-quality tradeoff. Quality settings between 80 and 90 produce results that are visually indistinguishable from the original for most photographs, while reducing file size by 50 to 70 percent. Settings between 60 and 80 produce smaller files with minor visible artifacts, suitable for thumbnails and previews. Settings below 60 produce visible artifacts and are generally not recommended.

The right quality level depends on the use case. For hero images and product photos where quality matters, use 85-90. For content images and blog post images, 75-85 is usually sufficient. For thumbnails and previews where small size matters more, 60-75 is acceptable.

Compressing for the web

For web images, the goal is the smallest file size at acceptable quality. Start by choosing the right format: WebP for all modern browsers, with JPG or PNG as fallbacks for older browsers if needed. Then choose the right dimensions: do not serve images larger than the display size. A 4000-pixel-wide image displayed at 800 pixels is wasted bandwidth. Resize to the display dimensions before compressing.

After resizing, apply compression with the appropriate quality setting. Preview the result to ensure the quality is acceptable. If the image has transparency, use WebP or PNG. If the image is a photograph without transparency, use WebP or JPG.

For best results, use a tool that shows a before-and-after comparison and displays the file size reduction. This lets you find the quality level that produces the smallest file at acceptable quality for each image.

Step-by-step: compressing an image

1. Open a browser-based image editor like Pixbench at pixbench.explorme.com.

2. Upload the image you want to compress.

3. If the image is larger than the display dimensions, resize it first.

4. Select the compress operation and choose the output format (WebP for best compression).

5. Adjust the quality slider. Start at 85 for photographs and adjust based on the preview.

6. Preview the compressed image and compare it with the original.

7. If the quality is acceptable and the file size is reduced sufficiently, download the compressed image.

8. If the file is still too large, reduce the quality slightly or resize to smaller dimensions and try again.