ABC Tools

Image Compression, Explained

After reading this you will know what a quality dial actually changes, how to predict file size before you export, and when compressing further only wastes bytes on artifacts.

What image compression does

An uncompressed photo stores one color per pixel. A 4000 by 3000 photo has 12 million pixels, and at 3 bytes each (red, green, blue) that is 36 MB. No one ships 36 MB photos on the web, so every common format squeezes that number down.

There are two kinds of squeezing. Lossless compression rebuilds the exact original pixels; PNG works this way. Lossy compression throws away detail your eye barely notices and keeps the file small; JPEG and WebP work this way. A single JPEG quality setting can take that 36 MB photo down to 900 KB, a 40 to 1 reduction, while still looking clean on screen.

The hook: the same photo at quality 90 and quality 75 can look identical at normal viewing size, yet the quality 75 file is often half the bytes. The whole skill of compression is finding that point where the size drops fast but the picture does not.

When to compress, and when to stop

Compress when the file will be viewed on a screen: web pages, email, chat, app assets. For those uses, a photo at quality 75 to 82 is almost always enough, and you save most of the bytes there.

Do not compress the file you plan to edit again. Every lossy save discards data permanently. If you compress a JPEG, edit it, and save again, you compress the already-damaged pixels a second time and artifacts pile up. Keep an original (or a lossless master) and export a compressed copy for delivery.

Re-saving a JPEG is not free even at quality 100. The format still runs its lossy transform, so a chain of ten saves at quality 100 visibly softens edges. Edit from the original, export once.

PNG deserves its own rule. Use PNG for logos, icons, screenshots of text, and anything with sharp edges or transparency. Use JPEG or WebP for photographs. A photo saved as PNG is often 5 to 10 times larger than the same photo as JPEG, with no visible benefit.

How the quality dial maps to size

JPEG and WebP split the image into 8 by 8 blocks and convert each block into frequency coefficients. High frequencies are fine detail; low frequencies are broad tone. The encoder divides each coefficient by a number from a quantization table and rounds. The quality slider scales that table.

Q_{table}(q) = \text{round}\left(Q_{base} \cdot \frac{s(q)}{100}\right), \quad s(q) = \begin{cases} \frac{5000}{q} & q \lt 50 \\ 200 - 2q & q \ge 50 \end{cases}

Here q is the quality value from 1 to 100, Q_{base} is a standard base table value, and s(q) is the scale factor. At q = 50 the scale is 100, so the table is used as-is. At q = 90 the scale is 20, so divisors shrink to a fifth and almost every coefficient survives. At q = 25 the scale is 200, divisors double, and most high-frequency detail rounds to zero.

Rounding to zero is the key. A block that becomes mostly zeros compresses to almost nothing, because runs of zeros are cheap to store. That is why dropping from quality 90 to quality 60 can halve the file: you are zeroing far more coefficients, not shaving a fixed percentage.

A worked example with the demo photo

One photo across the quality range

Take a 4000 by 3000 JPEG photo, the tool's default sample. Its uncompressed size is 36 MB. Watch how the exported size falls as you lower quality.

  1. At quality 95 the file is about 2.6 MB. Almost all detail is kept, so many blocks store their high frequencies.
  2. At quality 82 (a common default) the file drops to about 1.1 MB. That is a 58 percent cut from quality 95 with no visible loss at screen size.
  3. At quality 60 the file is about 620 KB, roughly another 44 percent smaller. Flat areas like sky are still clean; look closely at fine texture and you start to see softening.
  4. At quality 35 the file is about 360 KB. Blocky 8 by 8 artifacts appear around high-contrast edges.

Notice the shape. Going from 95 to 82 saved 1.5 MB. Going from 60 to 35 saved only 260 KB. Each further step down buys fewer bytes while costing more visible quality.

Size climbs slowly through the mid quality range, then shoots up above quality 90. The shaded band (75 to 85) is where most photos sit for web delivery.

Explore the quality curve

A 4000 by 3000 photo compresses to roughly 4.6 MB at quality 100, 2.1 MB at quality 90, 1.1 MB at quality 82, 725 KB at quality 60, and 400 KB at quality 35. The size falls steeply above quality 90 and flattens below quality 40, so the best value sits in the 75 to 85 range.

Scaling down at the same time

Quality is only one lever. The other is pixel count, and it is often the bigger win. File size scales roughly with the number of pixels, which scales with the square of the dimensions.

\text{bytes} \approx k \cdot W \cdot H

Here W and H are width and height in pixels, and k is bytes per pixel at your chosen quality (about 0.09 for a quality 82 photo). Halving both dimensions divides pixel count by 4, so the file also drops by about 4.

If a page displays your photo at 1200 pixels wide, shipping a 4000 pixel wide file wastes over 90 percent of the data. Scale to 1200 first, then compress. A 4000 by 3000 file at quality 82 near 1.1 MB becomes roughly 110 KB when scaled to 1200 by 900 at the same quality, a 10 to 1 cut with no visible loss at the display size.

Decide the display size first, then the quality. Scaling to the right dimensions usually saves more than any quality change, and it never adds artifacts the way aggressive quality cuts do.

Reading the before and after numbers

The tool shows original size, new size, and the reduction. Read the reduction as a ratio, not a fixed rule.

Compression ratio
Original bytes divided by new bytes. 36 MB to 1.1 MB is a ratio of about 33 to 1. Higher is smaller.
Percent saved
100 \times (1 - \text{new} / \text{original}). Going 1.1 MB to 620 KB saves 44 percent.
Bytes per pixel
New bytes divided by pixel count. Under 0.1 is efficient for a photo; above 0.5 means the image is either very detailed or barely compressed.

WebP usually beats JPEG at the same visual quality by 25 to 35 percent. If a JPEG lands at 1.1 MB, the WebP version at matched quality is often around 750 KB. Check browser support for your audience, but every current browser reads WebP.

PNG is a different problem

PNG never throws away pixels, so it has no quality dial. Its size depends on how repetitive the image is. A flat logo with 12 colors compresses to a few KB. A photo saved as PNG stays large because every pixel differs slightly from its neighbor.

To shrink a PNG this tool reduces the number of distinct colors (quantization). Cutting a screenshot from 200,000 colors down to a 256-color palette can shrink it 60 to 80 percent while looking unchanged, because most of those colors were near-duplicates. For photos, quantization introduces visible banding, so convert them to JPEG or WebP instead.

Common mistakes

Exporting at quality 100. The jump from 92 to 100 can double the file for detail no screen shows. Quality 100 is not lossless; it is just wasteful lossy.

Compressing the working file. Each lossy save is permanent. Keep an original and export copies.

Skipping the resize. A perfectly compressed 4000 pixel image is still four times bigger than it needs to be if the page shows it at 2000 pixels.

Forcing photos into PNG. You get a large file and no quality gain. PNG is for flat graphics.

Related tools

To change pixel dimensions precisely before compressing, use the Image Resizer. To trim to a shape or ratio first, use the Aspect-Ratio Crop. To enlarge a small source cleanly, see the Image Upscaler. To turn one image into a full icon set, use the Favicon Generator.

Frequently asked questions

What quality should I use for web photos?

Start at 82. For most photos it looks identical to the original at screen size while cutting the file by more than half compared to quality 95. Drop to 70 only if you need the bytes and the image has no fine texture.

Is quality 100 lossless?

No. JPEG and WebP still run their lossy transform at quality 100. It only means minimal quantization, which produces a large file. For a true lossless copy, use PNG.

Why did compressing my PNG barely change the size?

PNG is lossless, so it only removes redundancy. If your image is a photo with millions of subtly different pixels, there is little redundancy to remove. Convert photos to JPEG or WebP for real savings.

Does compressing twice halve the size again?

No, and it hurts quality. A file already at quality 82 recompressed at 82 comes out a similar size but with added artifacts, because the encoder is now working on damaged pixels. Compress once from the original.

Are my images uploaded anywhere?

No. All processing runs locally in your browser, so the files never leave your device.

Try it yourself in the tool

Related tools

Image Resizer

Resize one image or a whole batch to exact dimensions.

Aspect-Ratio Crop

Crop images freely or locked to presets like 1:1 and 16:9.

Favicon Generator

Every favicon size plus manifest from one image.

Image Upscaler

Enlarge images 2-4x with Lanczos or pixel-art algorithms.

Seam Carving (Content-Aware Resize)

Shrink or stretch a photo without squashing it: remove the boring pixels, keep the subject.

EXIF Viewer & Remover

See and strip photo metadata: camera, GPS, dates.