PNG, JPG or WebP: Which Format and How Much Compression

Choosing a format is not a question of which one is smaller, it is a question of whether the content can survive at that size. Reverse the order and compression just postpones the problem.

Decide the Use Case Before the Format

The most common mistake is seeing a large file and going straight to compression until the target size is hit. The result is usually blurred text, banding in gradients and compression artefacts along edges. The size did come down — but the content is no longer usable.

The right order answers two questions first: where will this image be placed and at what display size, and what is in it. Those two answers set the format, and the format sets the compression approach.

Use case	Recommended format	Why
Article body image	WebP or JPG	Photo-like content; choose WebP when transparency is needed
Card background image	PNG	Needs transparency and clean text edges
Images containing text	PNG	Lossy compression destroys text edges first; lossy WebP has the same problem
Flat illustration or solid shapes	PNG or SVG	The content is discrete colour, so lossy compression adds unwanted noise
Thumbnails and avatars	WebP	Small files, small display size, losses go unnoticed

How the Three Formats Actually Differ

PNG

Lossless, with alpha transparency. Suited to text images, UI screenshots and artwork that needs exact colour. The cost is size — a photographic PNG can be several times larger than an equivalent JPG. Compression only removes redundancy and cannot discard pixel data, so the goal "compress this PNG a lot" is not achievable.

JPG

Lossy, no transparency, efficient compression. Suited to photos, gradients and natural scenes. What it discards is high-frequency detail the eye barely notices, so photographic content survives almost unnoticed — but on text, edges and flat colour regions it leaves visible artefacts immediately.

WebP

Supports both lossy and lossless, plus transparency, and is usually smaller than an equivalent JPG or PNG. Modern browser support is broadly in place. The caveat is occasional compatibility trouble in older workflows, so confirm preview behaviour on the target platform before rolling out.

Do not compare the sizes of one image in two formats — a PNG and a JPG of the same content are not comparable. Comparisons belong inside one format and one quality setting.

Compression Ratio or Target Size — Which to Use

The two control modes differ in what they specify: a ratio says "how much to compress", a target size says "how large the result should be". Which one to use depends on where the constraint comes from.

The platform has an explicit size cap (2 MB per file, 5 MB per post) — use target size and give it a number.
No hard cap, you just want the file smaller — use a ratio; 60% to 80% is the range that balances quality and size.
Photo-like content being compressed lossily — target size is easier, since photos are not sensitive to file size.
Text or interface images — do not use lossy compression; reduce the resolution instead.

If an image will not compress no matter what, the problem is usually not the compression setting but the source resolution or the amount of colour information. Lowering the resolution is far more effective than tuning the ratio again.

Batch Compression

Image Compressor accepts a batch of PNG, JPG and WebP files, offers lossy and lossless modes, and lets you set either a compression ratio or a target size in KB or MB. Everything is local — originals are never uploaded.

1Upload the batch of images.
2Choose lossy or lossless mode.
3Set a compression ratio, or a target size.
4Preview each one at full size to confirm the quality is acceptable.
5Download in bulk.

Do not skip the preview step. Differences are invisible in a thumbnail; you have to open the full size to judge whether text and edges are still intact.

Frequently Asked Questions

How much does lossless compression actually save?

Very little. Lossless only removes redundancy without discarding pixels, so it is for the case of "a bit smaller without changing the content" — for example keeping the original available for later editing. To cut size substantially you must use lossy.

Can lossy compression be undone?

No. Pixel data discarded by lossy compression cannot be recovered, and re-compressing a saved file compounds the loss. Back up the original first if you need to keep full quality.

Why did the file size not change?

Two possibilities: the source is already a heavily compressed JPG, so a second pass gains almost nothing; or the setting range did not trigger an actual re-encode. Switch to target size and lower the value — that usually resolves it.

How many files can I upload at once?

There is no cap on the number of files. Volume does affect browser memory, so very large batches may slow the browser down, but that is not a tool limit.

Summary

Three decision points: pick the format from the use case, pick ratio versus target size from the shape of the constraint, and always verify the quality by eye. Skip any one and the result is a gamble.

If compression is only to make uploads smoother, see the handling of exported image sizes in How to Make a Set of Image Cards. For the border-then-compress pipeline, see Add Borders to Images.