PNG, JPEG, WebP or SVG: How to Choose an Image Format

Lossless formats reproduce every original pixel exactly. Lossy formats discard information the eye is unlikely to notice, which buys dramatically smaller files at some cost in fidelity. Neither is better in the abstract — the question is whether the discarded detail was information you needed.

The critical practical consequence is generation loss. Every time you re-save a lossy image, it is decoded and re-encoded, discarding a little more each round. Edit and re-save a JPEG a dozen times and the degradation becomes obvious. Always keep a lossless original and export lossy copies from it, rather than editing the copies.

JPEG is built for continuous-tone images where colour varies smoothly — photographs, essentially. Its compression works by discarding fine detail in a way that suits gradual gradients, which is why it can shrink a photo enormously with no visible difference at normal viewing sizes.

That same mechanism is what makes it wrong for graphics. Around hard edges — text, line art, a logo on flat colour — JPEG produces visible halos and blocking artefacts, often called mosquito noise. It also has no transparency, so an image needing a cut-out background rules it out immediately.

PNG is lossless and supports full alpha transparency, which makes it the correct choice for screenshots, logos, icons, diagrams and anything containing text. Because its compression exploits repeated runs of identical colour, flat-colour graphics compress remarkably well — often far smaller than the equivalent JPEG at usable quality.

Its weakness is photographs. With millions of distinct colours there is little repetition to exploit, so a photographic PNG can be several times the size of a JPEG that looks identical. If you find yourself struggling to get a photo under a size limit as a PNG, the format is the problem.

WebP does both jobs: lossy compression competitive with JPEG, lossless mode competitive with PNG, and transparency in both. It typically lands 25-35% smaller than the equivalent JPEG at similar quality, and browser support is now effectively universal, which makes it a sensible default for web delivery.

AVIF compresses better still, particularly at low bitrates, at the cost of slower encoding and slightly patchier tooling support. The pragmatic approach for a website is to serve modern formats with a JPEG or PNG fallback; for files you will send to other people, stick with the widely-understood formats, since a WebP attachment still confuses plenty of desktop software.

SVG is fundamentally different — it stores shapes, paths and text as instructions rather than a grid of pixels. That means it scales to any size with no quality loss whatsoever, and a simple logo often weighs less than a kilobyte. For logos, icons and diagrams it is almost always the right answer.

It cannot represent a photograph in any useful way, and it carries a security consideration the raster formats do not: SVG is XML and can contain scripts, so an SVG from an untrusted source should never be inlined into a page without sanitising it first.

Judging whether a file is compressed too far is a skill worth ten minutes of practice, because the damage has characteristic shapes and each one points at a different fix.

• →Blocking — faint 8×8 squares, most visible in skies and other smooth areas. This is JPEG quality set too low; raise it rather than reducing dimensions.
• →Ringing or mosquito noise — a shimmer of speckles hugging hard edges, especially around text. This means JPEG is the wrong format for the content, not that quality needs nudging.
• →Banding — smooth gradients breaking into visible steps. Usually too few colours, which points at an unnecessary conversion to a palette format.
• →Softness — fine detail smeared away. Either the image was enlarged from something smaller, or it was resized down and back up somewhere in the chain.

Assess at the size the image will actually be displayed, on the kind of screen it will be seen on. Judging a web image while zoomed to 400% rejects files that would have been indistinguishable in place, and judging a print image on a phone accepts files that will not hold up.

By every technical measure GIF should have been retired long ago. It is limited to 256 colours per frame, which makes photographs look posterised and gradients look banded. Its compression is far behind anything modern. Animated GIFs are frequently several times larger than an equivalent video file of better quality.

It survives on universality and one behavioural quirk. GIF plays automatically, loops silently, and works in contexts that block or complicate video — email clients, older chat applications, documentation that must render anywhere. It is understood by literally everything, which is a genuine feature when you cannot control the destination.

Where GIF still wins outright is a short animation destined for somewhere you do not control — an email newsletter, a third-party platform, a chat client. Everywhere else, it is a compatibility choice rather than a quality one.

Note the transparency column. GIF supports only fully transparent or fully opaque pixels, with nothing in between, which is why a GIF logo placed on an unexpected background shows a jagged fringe. PNG and the modern formats store a full alpha channel and blend cleanly against anything.

Is it a photograph? Use JPEG, or WebP if you control delivery. Is it a logo, icon or diagram that could be drawn with shapes? Use SVG. Is it a screenshot, or does it contain text or need transparency? Use PNG, or lossless WebP for the web. Does it move? Use video, unless the destination will not accept it.

Then check the result rather than trusting the rule. Compress to the size you need, view it at the size it will actually be displayed, and only accept the trade if you cannot see the difference. Most images are shipped far larger than they need to be simply because nobody looked.