JPEG, PNG, WebP, AVIF: which image format should you actually use?

There are dozens of image formats, but for everyday work only four matter: JPEG, PNG, WebP, and AVIF. Pick the wrong one and you either ship a blurry mess or a file five times bigger than it needs to be. This is a decision guide, not a history lesson — by the end you'll know which to reach for and why.

The whole choice comes down to two questions about your image and one about your audience. Answer those and the format picks itself.

The two questions about the image

1. Is it a photograph, or is it graphics?

A photograph is continuous tone — millions of subtly different colors blending into each other: skin, skies, foliage, gradients. A graphic is the opposite — flat regions of solid color with hard edges: screenshots, logos, icons, charts, line art, text on a button.

This distinction decides whether you want lossy or lossless compression.

• Lossy (JPEG, and the lossy modes of WebP/AVIF) throws away detail the eye barely notices to get dramatically smaller files. It's perfect for photographs, where a little imperceptible smoothing in a sky saves enormous space. It's terrible for sharp-edged graphics, where it smears fuzzy halos — "mosquito noise" — around every crisp line and letter.
• Lossless (PNG, and the lossless modes of WebP/AVIF) reproduces every pixel exactly. It's ideal for graphics with hard edges and large flat areas, which it compresses efficiently. It's wasteful for photographs, where every pixel differs slightly and there's nothing to compress away cleanly.

A quick gut check: if zooming into the image shows smooth gradients, it's a photo (go lossy). If it shows crisp edges and flat color fills, it's a graphic (go lossless).

2. Does it need transparency?

Does part of the image need to be see-through so the background shows behind it — a logo over a colored section, an icon, a sticker with no rectangular frame? If yes, JPEG is out entirely. JPEG has no alpha channel; it always fills with a solid color, usually white. PNG, WebP, and AVIF all support transparency.

The one question about the audience

Where will this image be displayed?

• On the modern web (a site or app loaded in current browsers): WebP and AVIF are fully usable. Both are supported across all current major browsers, so you can lean on the smaller formats.
• Anywhere else — email clients, older content systems, design tools, chat apps that re-encode uploads, a file someone will download and open in random software: stick to JPEG and PNG. They open everywhere, no exceptions. Universal compatibility is sometimes worth more than saving 30%.

That's the whole framework. Now the formats themselves.

JPEG: the universal photo default

JPEG is lossy, has no transparency, and is supported by literally everything that displays images. It's the safe choice for a photograph that needs to work in unpredictable places — an email attachment, a marketplace listing, a document.

Quality settings between 70 and 85 are the sweet spot for photos. Below 70 you'll see blocky artifacts in flat areas like skies and skin; above 85 you're paying for fidelity nobody perceives. A typical 12-megapixel photo lands around 2–4 MB at quality 85, dropping toward 1–2 MB at quality 75.

Use JPEG when: it's a photo and it has to work outside a controlled web environment.

PNG: the right tool for graphics, the wrong one for photos

PNG is lossless and supports full alpha transparency. For screenshots, logos, icons, charts, and any image with text or sharp edges, PNG is excellent — it nails every edge with no artifacts and compresses flat color regions well.

The trap is using PNG for photographs. Because it's lossless, a photo saved as PNG can be 3 to 5 times larger than the same photo as JPEG, with zero visible benefit. A photo that's 2 MB as JPEG might be 8–10 MB as PNG. If you ever see a multi-megabyte PNG of a photograph, that's a format mistake, not a necessity.

Use PNG when: it's a graphic (especially with transparency or text) and you need guaranteed compatibility.

WebP: the sensible modern default for the web

WebP does everything: lossy and lossless modes, plus transparency in both. On the web it's the pragmatic default because it's broadly supported and meaningfully smaller than the older formats.

Rough numbers:

• Against JPEG for photos, WebP is typically 25–35% smaller at equivalent visual quality. That 3 MB JPEG becomes roughly 2 MB.
• Against PNG for graphics, lossless WebP is commonly 20–30% smaller, and it keeps transparency.

So WebP can replace both JPEG and PNG for web delivery: lossy WebP for your photos, lossless WebP for your graphics. If you change one thing about your site's images, converting photos to WebP is the highest-leverage move.

Use WebP when: the image is going on a modern site or app and you want smaller files without giving up transparency.

AVIF: smallest files, with a cost

AVIF is the newest of the four and usually the smallest. For photographs it often beats WebP by another 20–30%, and it holds quality better at very low bitrates, with fewer blocky artifacts. It supports transparency and a wider color range too.

The cost is encoding effort. AVIF encoding is computationally heavier and slower than the others, and tooling support outside browsers is still thinner. That makes it ideal for a high-traffic hero image where shaving every kilobyte pays off across millions of loads, and overkill for a one-off screenshot on an internal page.

Use AVIF when: it's a photo on a high-traffic web page and the bandwidth savings justify the slower encode.

Putting it together: a fast chooser

Walk it top to bottom and stop at the first match:

• Screenshot, logo, icon, chart, or anything with text and sharp edges? PNG for maximum compatibility, or lossless WebP on the modern web to save 20–30%.
• Photo that must work everywhere (email, downloads, old software)? JPEG at quality 75–85.
• Photo on a modern website or app? WebP at quality 75–85 — about a third smaller than JPEG.
• Photo on a high-traffic web page where size is critical? AVIF, accepting the slower encode.
• Needs transparency and must run anywhere? PNG. Needs transparency on the modern web? WebP or AVIF.

The two biggest size mistakes

Most bloated images come from one of two errors, and both are format-choice errors:

1. A photo saved as PNG. Multiply the size by 3–5 for nothing. Convert it to JPEG or WebP.
2. A simple graphic saved as JPEG. Fuzzy halos around every edge and often a bigger file than a clean PNG would be. Convert it to PNG or lossless WebP.

Switching format is the win that costs you nothing in quality. To move between any of these, use the Image Converter — drop in a PNG photo and pull out a WebP, or vice versa. Once the format is right, dial in the file size with the Image Compressor by adjusting quality, and compare at 100% zoom: if you can't tell two versions apart, ship the smaller one.

Format first, quality second. Get the format right and you're already most of the way to a fast, sharp image.