🗜️ Image Compressor

The tool decodes your image in the browser and draws it onto an HTML canvas. If you set a maximum width, the drawing is scaled down to that width with the aspect ratio preserved, so a 4000 by 3000 photo capped at 1920 becomes 1920 by 1440. The canvas is then re-encoded to the output format you chose using the toBlob method, with your quality slider passed through as the encoder quality parameter.

For JPEG and WebP that parameter drives lossy compression. The encoder transforms blocks of pixels into frequency coefficients and quantises them, discarding the fine detail the eye is least likely to notice. A lower quality number means coarser quantisation, a smaller file and more visible artefacts around sharp edges and flat gradients.

PNG is lossless, so no quality slider applies and the compressor hides it for that format. The only way to make a PNG meaningfully smaller here is to reduce its dimensions with the max width option, or to output as WebP or JPEG instead. The reduction figure is calculated as (1 - compressed size / original size) x 100.

Start with a 3.2 MB JPEG straight from a phone camera at 4000 by 3000 pixels. That is 12,000,000 pixels, far more than a web page ever displays.

Set the max width to 1920 and the tool scales the image to 1920 by 1440, preserving the 4:3 ratio. The pixel count drops to 2,764,800, a reduction of about 77 per cent before any quality change is applied at all. Resizing is usually where most of the saving comes from.

Now set quality to 75 per cent and re-encode as JPEG. A photo of this kind typically lands somewhere around 380 KB. Since the original was 3.2 MB, or about 3,277 KB, the reduction reads as (1 - 380 / 3277) x 100, which is roughly 88 per cent.

Choosing WebP as the output at the same quality generally produces a smaller file again for the same visual result. The exact output size always depends on the picture: a detailed landscape with foliage compresses far less than a portrait against a plain wall, so check the reported figures rather than assuming a fixed ratio.

For photographs on a web page, quality between 70 and 80 per cent is the usual sweet spot: the file shrinks dramatically and the loss is hard to see at normal viewing size. Below about 50 per cent, blocking around edges and banding in skies become obvious. For images that will be cropped, zoomed or printed, stay above 85 per cent.

Match the format to the content. JPEG suits photographs. PNG suits screenshots, logos, diagrams and anything with sharp text or flat colour, where lossy encoding creates visible fringing. WebP handles both cases and usually produces the smallest file of the three at a comparable quality, and it is supported by all current browsers.

Two caveats are worth knowing. Lossy compression is cumulative: re-compressing an image that has already been compressed degrades it further, so always start from the best original you have rather than a file you shrank yesterday. And converting a PNG with transparency to JPEG discards the alpha channel, filling transparent areas with solid colour. Choose WebP if you need to keep transparency. For an animated GIF, only the first frame is processed.