JPG, PNG, or WebP: which image format should you use?

Most advice on image formats is a feature table. Feature tables do not help, because the right answer depends on one thing: what is in the picture. Here is the short version, then the reasoning.

• A photograph → JPG, or WebP if you want it smaller
• A screenshot, logo, diagram, or anything with text → PNG, or WebP
• Anything needing transparency → PNG or WebP, never JPG
• For your website → WebP, with AVIF worth testing
• An animation → WebP or MP4, not GIF

The one distinction that matters

Every format is either lossy or lossless, and this single property explains nearly all their behaviour.

Lossy formats (JPG, and WebP in its lossy mode) throw information away permanently to achieve small files. They exploit the fact that human eyes are poor at noticing small colour variations in complex, detailed areas. On a photograph this works remarkably well — you can discard 90% of the data and most people cannot tell.

Lossless formats (PNG, and WebP in its lossless mode) keep every pixel exactly. They compress by finding patterns and repetition instead of discarding detail. On a screenshot, where the same flat colours repeat across large areas, this is extremely efficient.

Now the failure modes follow logically. Save a screenshot as JPG and the sharp edges of the text develop grey smudges, because “small variations nobody notices” is a false assumption when the variation is the boundary of a letter. Save a photograph as PNG and the file is enormous, because a photo has almost no exact repetition to exploit.

Use lossy for photographs, lossless for graphics. Nearly every bloated or ugly image on the internet is this rule being broken.

The formats

JPG (JPEG)

Thirty years old and still the default for photographs, because it does that job well and literally everything can open it.

Good for: photographs, and any image with smooth gradients and complex detail.

Bad for: text, sharp edges, flat colour. It also cannot do transparency at all — a JPG with a “transparent” background comes out with a white one.

Watch out for: generation loss. Every time you open and re-save a JPG, it is re-compressed and degrades a little further. Edit from an original; do not repeatedly re-save the same JPG.

PNG

The right choice for anything crisp, and the reliable choice for transparency.

Good for: screenshots, logos, icons, diagrams, charts, images with text, and anything needing a transparent background.

Bad for: photographs. A photo saved as PNG is routinely 5–10× larger than the same photo as JPG, at no visible benefit.

Watch out for: the very common mistake of saving phone photos as PNG because it is “higher quality.” It is lossless, which is not the same as better-looking — you get an identical-looking image at many times the size.

WebP

Google’s format, and now supported by every current browser. It does both lossy and lossless, supports transparency and animation, and beats the older formats at all of them.

Roughly, expect 25–35% smaller than JPG at similar quality, and often far smaller than PNG for graphics — in our own testing, converting PNGs to WebP cut them by 78–80%.

Good for: almost everything, especially anything on a website.

Bad for: handing files to other people. Support in browsers is universal, but older desktop software, some printers, and a few corporate systems still choke on it. If you are emailing a client a photo, send a JPG.

AVIF

Newer, and compresses better still — commonly 20–30% below WebP. Browser support is now broad but software support outside browsers remains patchy, and encoding is slower.

Good for: websites where size is critical and you can serve a fallback.

Bad for: anything you need to hand to someone else, for now.

GIF

Effectively obsolete. It is limited to 256 colours, so photographs look terrible, and its compression loses badly to everything modern. An animated GIF is often 5–10× larger than the same animation as WebP or MP4.

It survives on inertia and on social platforms that expect it. For animation you control, use WebP or MP4.

HEIC

What your iPhone probably shoots by default. Excellent compression — roughly half the size of JPG at the same quality — and almost no support outside Apple’s ecosystem. This is why photos that look fine on your phone will not open on a friend’s Windows laptop.

If you keep hitting this, see our guide on HEIC photos and how to avoid the problem.

Choosing quickly

What you have	Use
Photo, for the web	WebP
Photo, to send to someone	JPG
Screenshot or diagram	PNG, or WebP for the web
Logo or icon with transparency	PNG, or WebP for the web
Anything going to print	The original, uncompressed
Animation	WebP or MP4

Two mistakes worth avoiding

Converting lossy to lossy. Turning a JPG into a WebP re-encodes an image that has already lost data — the artefacts from the first compression get faithfully preserved by the second. Convert from the highest-quality original you have.

Resizing by squeezing quality. If an image is too large for its purpose, check its dimensions first. A 4000-pixel-wide photo displayed in a 800-pixel column is carrying five times the pixels it needs. Resizing it will shrink the file far more than any quality slider, and it costs no visible detail at all — the pixels were never being displayed.

You can convert between formats and compress images here without uploading anything; both run entirely in your browser.