Compressing Images Without Making Them Ugly

Two separate jobs

Resizing changes how many pixels an image contains, and it is where the largest savings are.

Compression changes how efficiently those pixels are stored, and it is where the remaining savings are.

They are frequently confused, which is why people resize a photograph correctly, find the file is still six hundred kilobytes, and conclude the advice was wrong.

Both are needed. This is about the second, on the assumption the first has already been done.

What compression throws away

Photographic compression works by discarding detail the eye is poor at noticing.

Fine variations in colour, particularly in areas that are already busy, go first and go unnoticed.

What survives longest is sharp edges and strong contrast, which is where the eye is most sensitive.

This is why a photograph of foliage compresses enormously with no visible change while a screenshot of text falls apart at the same setting: one is full of the detail compression discards well, the other is full of exactly the edges it handles badly.

The quality setting

Most tools express this as a percentage, and the useful range is narrower than the slider suggests.

Between about seventy and eighty is where most photographs sit: a large reduction in size with no difference a visitor would ever see.

Above ninety you are storing detail nobody perceives, at several times the file size.

Below about sixty the damage becomes visible, and it appears first in specific places worth knowing.

Where the damage shows first

• Skies and gradients, which develop visible banding.
• Skin tones, which go blotchy before anything else does.
• Flat areas of colour, which acquire faint blocks.
• Edges against plain backgrounds, which grow a halo.
• Text within an image, which becomes fuzzy immediately.

Check a compressed image at full size in those areas rather than glancing at a thumbnail, which hides all five.

Which format for what

Choosing correctly matters more than the quality setting, because the wrong format cannot be rescued by any amount of tuning.

Photographs belong in JPEG, which is built for continuous tone and discards detail gracefully.

Graphics with flat colour, sharp edges, or transparency belong in PNG, which stores exactly what it was given and is therefore very large for photographs.

Logos, icons, and simple illustrations belong in SVG, which describes shapes rather than pixels, stays sharp at any size, and is usually tiny.

The most common and most expensive mistake is a photograph saved as PNG, which routinely produces a file five or ten times larger than it needs to be with no visible benefit.

The newer format worth using

WebP produces noticeably smaller files than JPEG at equivalent visual quality, commonly a quarter to a third smaller, and it supports transparency as well.

Support was the obstacle for years and largely stopped being one recently, with the last major holdout adding it in the autumn.

The sensible approach is still to serve WebP with a conventional fallback, so older browsers and devices receive something they can display.

Most content systems now handle this automatically through a plugin: you upload a JPEG, it generates and serves a WebP where supported. That is the least effort for the most benefit and is worth checking before doing anything by hand.

Newer formats again exist and offer better results, but support is not yet broad enough to rely on for a business site.

A worked example

A furniture maker had a portfolio of forty photographs, correctly resized to fourteen hundred pixels wide, and the gallery page still weighed eleven megabytes.

Every image had been saved as PNG, because that was the default in the software used to crop them.

Converting them to JPEG at seventy-eight percent quality brought the page to about one and a half megabytes.

Enabling WebP delivery through their existing plugin took it to just over a megabyte.

Printed side by side at full size, the maker could not distinguish the original from the final version on any of the forty.

The resize had already been done correctly. The format was doing all of the remaining damage.

Do not compress twice

A practical trap that produces genuinely ugly results.

Each time a photographic image is saved with compression, detail is discarded permanently, and saving an already-compressed file again discards more from what remains.

A photograph edited, saved, opened, cropped, saved again, and then run through a compression tool has been through the process three times, and the damage accumulates visibly.

Work from the original file each time, do all your editing, and compress once as the final step.

This is also the reason to keep untouched originals somewhere off the website, since a compressed web copy cannot be restored.

Tools that do this well

For a handful of images, a browser-based compressor will handle a batch, show you the result beside the original, and let you move the quality slider until you can see the difference and then step back.

For an existing library, a plugin that compresses what is already uploaded is the efficient route, though it is worth checking whether it keeps originals before running it across everything.

For ongoing work, the discipline is a rule rather than a tool: nothing goes onto the site without passing through a resize and a compression step.

Whatever you use, look at the output at full size before accepting it. Every tool has a default, and defaults are chosen to be safe rather than optimal.

The counter-case

There are images where aggressive compression is the wrong call.

Anything a customer will examine closely to make a decision: fabric texture, finish quality, a component detail, or a before-and-after where the point is what changed.

Anything containing text, which suffers first and worst, and which is usually better handled as real text on the page anyway.

And anything that will be printed or reused, which should be the original rather than the web copy.

Where detail genuinely matters, use a higher quality setting for that image specifically rather than raising it across the site. One photograph at ninety percent is a small cost; a whole gallery at ninety is the problem this article exists to solve.

The procedure

1. Resize first, then compress.
2. Choose the format by content, not by habit.
3. Set quality around seventy-five for photographs.
4. Check skies, skin, and edges at full size.
5. Enable WebP with a fallback.
6. Compress once, from the original.
7. Keep the originals off the website.

Step two resolves more weight than steps three to five combined on most sites.

Getting the dimensions right first is covered in images uploaded at camera resolution.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.