# WebP vs AVIF vs JPEG vs PNG: Which Format When

[Home](/)

[Guides](/#guides)

PixSquish Guides · Published July 2026 · Reviewed August 2026

![Four identical photo prints on differently colored paper mats, compared side by side](https://pixsquish.com/wp-content/themes/pixsquish/assets/img/article-formats.webp)

Four image formats cover practically everything you will publish on the web. They differ in three things that actually matter: **how small they compress**, **whether they keep transparency**, and **where they open**. Everything else is detail.

## The one-table answer

| Format | Best for | Transparency | Typical size* | Support |
| --- | --- | --- | --- | --- |
| **JPEG** | Photos that must open anywhere | No | 100% | Universal, since 1992 |
| **PNG** | Screenshots, logos, text, pixel art | Yes | Large for photos | Universal |
| **WebP** | The modern web default | Yes | ~65–75% | Every current browser |
| **AVIF** | Smallest files, image-heavy sites | Yes | ~50% | All modern browsers; encoding is slow |

**Rough file size for comparable photo quality, JPEG = 100%.*

## JPEG: the format that refuses to die

JPEG compresses photographs well and opens on a 20-year-old printer kiosk. It cannot store transparency and it degrades every time you re-save it. Choose it when compatibility beats everything else: email attachments, government upload forms, anything that might meet old software.

## PNG: lossless, not “better”

PNG stores pixels exactly. That makes it perfect for screenshots, UI elements, logos and any image with hard edges and text — and terrible for photos, where it can be 5–10× the size of a good JPEG with no visible benefit. If your photo is a PNG, converting it to WebP is usually the single biggest size win available.

## WebP: the sensible default

WebP does both jobs: lossy compression that beats JPEG by roughly a quarter to a third, plus optional transparency and lossless modes. Browser support stopped being an argument years ago — every current browser renders it. When in doubt, publish WebP.

## AVIF: smallest, with caveats

AVIF (based on the AV1 video codec) produces the smallest files of the four, especially at low bitrates where JPEG falls apart. The costs: encoding is noticeably slower, very old devices skip it, and some tooling still handles it clumsily. For image-heavy pages where bandwidth matters, serve AVIF with a WebP or JPEG fallback via `<picture>`.

## Decision rules

- Photo for the web → **WebP** (or AVIF with a fallback).

- Screenshot, logo, diagram → **PNG**; consider lossless WebP for size.

- Needs transparency + small size → **WebP**.

- Unknown destination software → **JPEG**.

Ready to switch? Drop your files into the [converter](/convert/) — it runs in your browser and nothing gets uploaded. Related reading: [how compression actually works](/articles/how-image-compression-works/) and the [3-step size-reduction workflow](/articles/reduce-image-file-size-for-web/).

## Standards and references

- [PNG specification, third edition](https://www.w3.org/TR/png-3/)

- [WebP compression techniques](https://developers.google.com/speed/webp/docs/compression)

- [AV1 Image File Format specification](https://aomediacodec.github.io/av1-avif/)