Skip to content
PDFLove

jpg vs png vs webp

JPG, PNG, or WEBP: Which Should You Use?

The choice comes down to one question: does the image contain photographic detail or flat areas and sharp edges? Get that right and the rest follows.

01

The one distinction that matters

JPEG is lossy. It discards detail the eye is bad at noticing, which works brilliantly on photographs — smooth gradients, soft transitions, no hard edges — and badly on anything with sharp boundaries. Around high-contrast edges it produces visible fringing, which is why a JPEG screenshot of text looks faintly grubby.

PNG is lossless. Every pixel comes back exactly as it went in, and it compresses flat colour extremely well. A screenshot, a logo, a chart, a diagram — all of these are mostly large areas of identical pixels, which PNG stores in almost no space. Give PNG a photograph and it will faithfully preserve all the detail at three to five times the size of an equivalent JPEG.

So: photographs and photographic scans to JPEG. Screenshots, logos, line art, charts, and anything containing text to PNG.

JPG / JPEG
Lossy. No transparency. Best for photographs. Universal support.
PNG
Lossless, with alpha transparency. Best for graphics, text, and screenshots.
WEBP
Lossy or lossless, with transparency in both. Typically 25–35% smaller than JPEG.

02

Transparency settles a lot of cases

JPEG has no transparency at all. If an image needs a transparent background — a logo to sit on a coloured page, an icon, a cutout — JPEG is simply not an option, and every attempt to make it work ends with a white box.

PNG has a full alpha channel, meaning each pixel carries its own opacity rather than a single colour being designated see-through. That is what allows soft edges and drop shadows to blend cleanly over any background.

03

Where WEBP fits

WEBP does both jobs. Its lossy mode is typically 25–35% smaller than JPEG at comparable quality; its lossless mode usually beats PNG by around 20%. It supports transparency in both modes, which neither of the others manages.

On the web this makes it close to a straight upgrade. Every current browser supports it — Safari has since 2020 — so for images on a page it is usually the right default.

The caveat is everything that is not a browser. Older desktop software, some printers' workflows, various corporate document systems, and a number of upload forms will reject or fail to preview a WEBP. If the file is going to a person rather than a web page, JPEG or PNG remains the safer choice, and the size saving was never the point in that context.

04

Practical notes

Never convert a JPEG to PNG hoping to improve it. The detail was discarded when the JPEG was made; PNG will preserve the artefacts perfectly and triple the file size.

Avoid repeatedly re-saving a JPEG. Every save re-applies lossy compression to an already-compressed image, and the degradation accumulates. Edit from the original where you can.

For JPEG quality, 80–85 is the useful range for photographs. Above 90 the files grow quickly for differences nobody sees; below 70 the artefacts become visible on any image with fine detail.

When placing images into a PDF, the same logic holds — photographs as JPEG, diagrams and text as PNG. Choosing wrongly is one of the more common reasons a PDF ends up unexpectedly large or unexpectedly ugly.

FAQ

Related questions

Which format is best for scanned documents?

For a scan of printed text, PNG or a lossless mode preserves the sharp edges that OCR depends on. For a scan of a photograph, JPEG. For a mixed page, JPEG at a high quality setting is the usual compromise — and if the scan is destined for OCR, keep it lossless until after recognition.

Is WEBP safe to use everywhere?

On the web, effectively yes — all current browsers support it. Off the web it is patchier, and plenty of desktop applications, print workflows, and upload forms still do not accept it. Send JPEG or PNG to people; serve WEBP to browsers.

Does converting PNG to JPG reduce quality?

Yes, and irreversibly. It also flattens any transparency onto a solid background, usually white. For a photograph the loss is generally invisible and the size saving is large. For a screenshot or a logo it is very visible and not worth it.