How to Compress Images

Problem

Your images are too large and slow down your web page; you need to reduce their file size.

Prerequisites

• Understanding of image formats
• Knowledge of quality vs size trade-off

Steps

1. 1. Choose the output format

   JPEG is best for photographs (lossy, small). PNG is best for graphics with few colors or transparency (lossless). WebP is modern and outperforms both. AVIF is even newer with better compression. Choose based on content type and browser support.

   Input

   photo → WebP

   Output

   format selected

2. 2. Adjust quality and dimensions

   For lossy formats (JPEG, WebP), reduce quality (e.g., 80) to decrease size. Resize to the display dimensions — serving a 4000px image for a 400px display is wasteful. Generate responsive sizes (srcset) for different viewport widths.

   Input

   quality: 80, resize: 800px wide

   Output

   size reduced ~70%

3. 3. Compress and compare

   Compress the image and compare the output size with the original. Check visual quality at the display size — minor artifacts may be invisible. Iterate on quality until you find the best size-to-quality ratio. Use lossless compression for images where every pixel matters.

   Input

   original: 2MB → compressed: 200KB

   Output

   quality acceptable

Expected result

A significantly smaller image file with acceptable visual quality.

Common errors

Visible artifacts at high compression

Increase the quality setting or use a different format. WebP and AVIF handle high compression better than JPEG.

Image larger than original after compression

The original may already be well-compressed or very small. Resizing to smaller dimensions or using a more efficient format (WebP) can still help.

Troubleshooting

• If the image looks blurry, you may have resized too aggressively. Use the display dimensions as the target.
• For PNG, use lossless compression tools (pngcrush, oxipng) that optimize without quality loss.

Security limits

• Image compression is a local operation. No image data is transmitted.
• All processing happens in your browser.