JPG vs PNG vs WebP vs AVIF: which image format should you use?

The four formats at a glance

Three of these formats matter for almost everything you'll do, plus one newer one worth knowing. JPG (also written JPEG) is the photo workhorse. PNG is the format for graphics and anything that needs transparency. WebP is a modern format that does both photos and transparency at a smaller size. AVIF is newer still and squeezes files even harder, at the cost of slower encoding and patchier support.

Lossy vs lossless: the core difference

Every format choice comes down to one underlying mechanism: how it throws data away, or whether it does at all. Understanding this makes the rest of the decisions obvious.

Lossy compression (JPG, and WebP/AVIF in lossy mode)

Lossy formats discard detail your eye is unlikely to notice (subtle colour shifts, fine gradients) to make the file dramatically smaller. The trade is that each re-save throws away a little more, so a JPG that has been opened, edited and saved many times develops blocky artefacts and fuzzy edges. For a photograph this is usually invisible at a sensible quality (around 80–85), and the file is a fraction of the lossless size. That's why photos almost always ship as JPG.

Lossless compression (PNG, and WebP/AVIF in lossless mode)

Lossless formats reconstruct the original pixel-for-pixel, so nothing degrades no matter how often you re-save. The downside is that for a busy photograph there's little redundancy to exploit, so a lossless PNG of a photo can be three to five times the size of the equivalent JPG. Where lossless shines is flat-colour content (logos, screenshots, charts, line art) that compresses tightly and stays razor-sharp, with no artefacts around text or hard edges.

Transparency and animation

If any part of your image needs to be see-through (a logo on a coloured background, a sticker, a cut-out product shot), JPG is out, because it has no alpha channel and fills empty areas with white. Your choices are PNG, WebP or AVIF.

• Need transparency and the widest compatibility (email, older apps, print): export a PNG. It's larger but accepted everywhere.
• Need transparency and a smaller file for the web: export a WebP, which supports alpha at a fraction of PNG's size.
• Need an animated image: WebP and AVIF both support animation in one file; GIF is the old fallback but is heavy and limited to 256 colours. PNG itself doesn't animate (the separate APNG format does).
• Saving a logo or icon for a website: a transparent PNG or WebP keeps the edges clean against any background colour.

A common mistake is saving a photo as PNG because the editor offered it, which gives you a file several times larger with no visible benefit. Reserve PNG for graphics and transparency; send photos as JPG or WebP. If you have a PNG photo bloating an upload, convert PNG to JPG and watch the size drop.

Browser and app support, and where WebP/AVIF still fail

Support is the quiet reason JPG and PNG refuse to die. Both have been universal for decades, so every browser, phone, printer, email client and government portal opens them without fuss. WebP is now supported in every current desktop and mobile browser, so for a website you control it's safe. AVIF support is broad but not complete, so it's usually served with a JPG fallback rather than on its own.

The friction appears outside the browser. Many upload forms, exam portals, job applications and older desktop programs only accept JPG (and sometimes PNG), and will reject a WebP or AVIF outright. Some chat apps and email clients won't preview WebP inline either. So the format that's best for page speed is often the wrong one for a form.

The web performance angle

On a website, image weight is usually the biggest single factor in how fast a page loads, and lighter images directly improve Core Web Vitals like Largest Contentful Paint. This is where WebP and AVIF earn their place: serving the same hero image as WebP instead of JPG can cut 25–35% off its weight, and AVIF can do better still on the right image, with no visible quality loss at sensible settings.

• Convert large JPG and PNG assets to WebP before uploading them to your site or CMS, so the smaller file downloads faster on every visit.
• Keep an original JPG or PNG as a fallback if you support browsers or tools that can't read WebP.
• Resize the image to the size it's actually displayed at first; a 4000-px-wide photo shrunk in the browser still downloads at full weight. Drop the dimensions with resize in pixels before converting.
• After converting, you can still trim further by compressing to a target KB if you have a strict budget.

The order that works well is resize, then convert to WebP, then compress only if you still need to. Doing the dimensions first means every later step works on a smaller image and runs faster.

Converting between formats without losing quality

Converting is safe in one direction and lossy in the other, and knowing which is which saves you from quietly degrading an image. Going from a lossless source (PNG) to a lossy target (JPG or lossy WebP) discards detail once and can't be undone, but for a photo that's fine and intended. Going from JPG to PNG does not restore lost detail; it only wraps the already-degraded JPG in a bigger lossless container, so the file balloons for no quality gain. Only convert to PNG when you genuinely need transparency or lossless editing.

1. Identify what you actually need: smallest web file (WebP/AVIF), universal compatibility (JPG), transparency or sharp graphics (PNG/WebP).
2. Resize to the dimensions you'll display or upload at, so you're not converting a needlessly huge image.
3. Convert: to WebP for the web, JPG to PNG when you need transparency or a lossless copy, or PNG to JPG to shrink a graphic-saved photo.
4. If a form rejected your file's format, convert it to JPG and re-upload; that clears the vast majority of format errors.
5. Compress to a KB target only if you still have a strict size limit after converting.

Every conversion above happens locally in your browser. The image is decoded, re-encoded and downloaded on your own device, so nothing is sent to a server. For more on protecting quality while you shrink files, see the companion guide on compressing images without visible quality loss.

Quick decision rules

If you remember nothing else, these four lines cover almost every real situation.

• Photograph for the web → WebP (with a JPG fallback if you need maximum reach).
• Photograph to upload, email, print or attach → JPG.
• Logo, icon, screenshot, chart or anything with transparency or hard edges → PNG, or WebP for a lighter web version.
• Chasing the absolute smallest file on a modern site you control → AVIF, served alongside a WebP or JPG fallback.

And the single most common fix: if an upload form says the format is invalid, it almost always wants JPG. Convert and try again.