JPEG, PNG, WebP and AVIF: which format for which job

Four formats cover almost everything you will publish. They are not interchangeable, and the differences are practical rather than academic.

JPEG

Thirty years old and still the safest choice for photographs. Every device decodes it, every tool exports it, and its lossy compression is well matched to natural imagery.

Its limitations are specific: no transparency, no animation, and visible artefacts on sharp edges and text. If your image contains a logo on a flat background, JPEG will make the edges fuzzy in a way that PNG will not.

PNG

Lossless, with a full alpha channel. That combination makes it the right answer for logos, icons, screenshots, diagrams and anything that will be composited onto an unknown background.

It is the wrong answer for photographs, where lossless encoding produces enormous files for no visible gain. The most common image mistake on the web is a PNG photograph.

WebP

The pragmatic modern default. It supports both lossy and lossless modes, transparency, and animation, and it is supported by every current browser. Lossy WebP is typically 25 to 35 percent smaller than JPEG at visually comparable quality; lossless WebP usually beats PNG.

If you are choosing one format for a website's photographic content today, WebP is the least argued-with choice.

AVIF

Derived from a video codec, and generally the most efficient of the four for photographs — often 20 percent smaller again than WebP at similar quality, with better behaviour in gradients.

The catch is asymmetry between decoding and encoding. Browsers that display AVIF happily may not be able to produce it from a canvas, which matters for tools that run in the browser. Encoding is also slower, which is invisible for one image and noticeable across a batch of five hundred.

A decision path

Start with the content, not the format.

Photograph, no transparency needed: WebP, with JPEG as the compatibility fallback and AVIF where you can produce it.

Graphic with hard edges or text: PNG, or lossless WebP if size matters more than universal tooling support.

Anything needing transparency: PNG, WebP or AVIF. Never JPEG.

Animation: WebP, or a video file, which will almost always be smaller than an animated GIF.

On quality numbers

Quality values are not comparable across formats. WebP at 75 and JPEG at 75 are not making the same trade-off, and neither number means "75 percent of the original". Treat them as dials to be judged by eye on your own images, and check a smooth gradient — skies and studio backdrops are where cheap encoding shows first.

Converting between them

Converting a JPEG to PNG does not recover quality; it produces a lossless copy of existing artefacts at a larger size. Converting a PNG with transparency to JPEG flattens it onto a background colour, permanently. Both conversions are useful in the right direction and destructive in the wrong one.

Transparency, and the semi-transparent trap

All three of PNG, WebP and AVIF store a full 8-bit alpha channel, so partial transparency — soft shadows, feathered edges, anti-aliased curves — survives intact.

The trap is that flattening partial transparency is not reversible and not always obvious. A logo with a soft drop shadow, flattened onto white, looks perfect on a white page and shows a grey halo the moment it lands on any other background. This is one of the most common causes of "the logo has a box around it" and it happens at export time, long before anyone notices.

If an asset will be composited onto an unknown background, it must keep its alpha channel all the way through. That rules out JPEG entirely, regardless of how well it would compress the visible pixels.

Animation

Animated GIF is still widely used and is almost always the wrong choice. It is limited to 256 colours per frame, which is why gradients in GIFs look posterised, and its compression is poor enough that a few seconds of video-derived animation can run to several megabytes.

Animated WebP handles the same job with full colour at a fraction of the size. A short video file — MP4 or WebM — is usually smaller still, and can be made to behave like a GIF with autoplay muted loop playsinline.

The one reason to persist with GIF is context: some platforms and email clients accept it and nothing else.

Bit depth and 16-bit workflows

None of these four formats is appropriate for a master file in a serious editing workflow. JPEG and WebP are 8-bit per channel; PNG supports 16-bit but few tools take advantage of it; AVIF supports higher depths but is not a natural editing format.

Editing masters belong in TIFF, PSD or a raw format, where 12 to 16 bits per channel give you room to push exposure and colour without banding. The four formats here are delivery formats — what you export at the end, not what you work in.

A summary you can act on

Content	First choice	Fallback	Never
Photograph, web	WebP	JPEG	PNG
Photograph, print or client	JPEG (high quality)	TIFF	WebP
Logo, icon, diagram	PNG or lossless WebP	—	JPEG
Screenshot	PNG or lossless WebP	—	JPEG
Anything with transparency	PNG / WebP / AVIF	—	JPEG
Short animation	WebP or video	GIF	—
Email	JPEG / PNG	—	WebP