How Much Can You Compress an Image Before It Looks Bad?

There is no single quality number that is safe for every image. A setting that is invisible on a busy landscape can ruin a screenshot of text. What you can do is understand what the setting does, know which images tolerate more compression, and run a quick visual test. This post explains how, and ends with a step-by-step workflow.

What a quality setting actually means

In JPEG and lossy WebP, quality is a slider from low to high. It controls how much detail the encoder is allowed to discard. Lower quality means coarser simplification and a smaller file. It is not a percentage of the file size and not a percentage of the picture kept, so "70%" does not mean 70 percent of the original bytes. It is only a scale specific to the encoder.

Because it is an encoder scale, the same number can look different between programs, and between JPEG and WebP. Treat it as a dial to test on your own image, not a fixed standard.

Compression is also not free to reverse. Once detail has been thrown away, saving at a higher quality afterward does not bring it back, it only makes a bigger file of the already-degraded picture. For the underlying idea, see lossy vs lossless image compression.

What degradation looks like

JPEG works on 8x8 pixel blocks, which explains the typical failure signs when quality gets too low:

• Blocking: visible squares in smooth areas such as sky, walls or skin.
• Ringing: faint halos or speckles around sharp edges, especially around text on a plain background.
• Banding: smooth gradients turning into visible steps.
• Colour smearing: fine coloured detail bleeding into its surroundings.

You will find these first in the places where the image is smooth or has hard edges next to flat colour. Busy texture such as foliage, gravel or fabric hides them well, because the eye cannot tell the difference between real detail and encoder noise.

Photos and flat graphics behave differently

Photographs are the natural target for lossy compression. They are full of gradual variation and texture, so a good deal of quality can be traded away before most people notice. Going from the highest setting to a moderate one often cuts the file size a lot, with only a subtle visual change. Exact figures vary by image, which is why testing beats guessing.

Flat graphics, screenshots and text are the opposite. They have few colours and hard edges, which lossy JPEG handles badly and lossless PNG handles well. Lowering quality on these images produces obvious artefacts long before it saves much. For them, the better levers are the format (PNG or lossless WebP) and the dimensions, not the quality slider.

Dimensions versus quality

Two different things make an image heavy: how many pixels it has, and how hard each pixel is compressed. They are separate dials.

Pixel count matters enormously. Pixel count scales with width times height, so halving both width and height leaves a quarter of the pixels. A phone photo of several thousand pixels across is often shown on a page in a column only a thousand or so pixels wide, so most of those pixels are never seen. Shrinking the dimensions to what will be displayed is usually the single biggest and safest saving, because it discards pixels nobody will look at rather than degrading the ones they will.

So the order of operations is: first size the image to how it will actually be displayed, then use quality to trim further. If the picture needs to be shown larger on high-density screens, allow some extra pixels beyond the on-page size and check the result.

How to test at 100 percent zoom

Quality judgments made while the image is shrunk to fit your screen are unreliable, because scaling hides artefacts. Instead:

• Open the original and the compressed version at 100 percent zoom, so one image pixel is one screen pixel.
• Look at the hardest areas: edges next to flat colour, text, faces, smooth gradients, dark shadows.
• Flip between the two, or place them side by side, and ask whether you would notice a difference without knowing which is which.
• If you see blocks, halos or banding, raise the quality a step and try again.

Then view the result at the size your visitors will really see it. If the difference is only visible when you zoom in far past that, it does not matter for that use.

A step-by-step workflow

This uses two Synthixx tools that run in your browser without uploading the image.

• Decide the display size. If the picture will sit in a column about 1200 pixels wide, that is your target width, with some allowance for sharper screens.
• Open the Image Resizer, load the image (it accepts up to 50 at once) and set the width and height. You can also use the quick percentage buttons. Keep the aspect ratio option on so the picture is not stretched.
• Download the result, then open the Image Compressor. It handles one image at a time.
• Choose an output format. Keep original is fine, or choose JPEG or WebP for photographs. Start with the default quality of 70 and process it.
• The tool shows the size before and after. Open the output at 100 percent zoom and inspect the hard areas.
• If it looks clean, try a lower value and repeat. If not, raise it. Stop at the lowest setting where you cannot see a difference in the size it will be used.

A few honest limits: the compressor's quality slider only affects JPEG and WebP output. A PNG kept as PNG stays lossless and will not shrink from the slider, so cap its dimensions or switch format if size is the concern. Choosing JPEG output puts transparent areas on a white background. Also, always compress from the original file rather than a previously compressed copy, since repeated lossy passes stack up damage. If a result ends up no smaller, the tool tells you there was no reduction, and keeping the original is the right call.

If you are preparing pictures for a site, why images slow down your website explains what size and weight are worth aiming for, and resize images for social media and print covers target dimensions for specific uses.

A simple rule of thumb

Fix the dimensions first, then lower quality until you can just see the difference at 100 percent zoom, and go back one step. Treat photos as forgiving and text or flat graphics as fragile, and always keep the original.