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

Short answer: use AVIF for the smallest photos, WebP when you want a safe modern default, JPEG when the file has to open absolutely anywhere, and PNG for screenshots and graphics that must stay pixel-perfect. Every current browser displays all four. Here’s how they compare, and how to pick for websites, email and everyday use.

The formats at a glance

*Relative to a JPEG of similar visual quality. The real ratio depends on the image: AVIF gains most on smooth photos, less on fine texture.

JPEG: the one that works everywhere

JPEG has been the standard photo format since the early 1990s, and every device, app and upload form on earth accepts it. It has no transparency and its compression is old: at low quality you get blocky artefacts and colour smearing around edges. A modern encoder such as MozJPEG gets noticeably more out of it than a phone or old software does, so a JPEG re-saved at quality 75–85 is often a fraction of the camera’s original size with no visible change.

Use it for: photos you email, upload to forms, print or send to people with unknown software.

PNG: lossless, and big for photos

PNG never throws detail away, which makes it right for screenshots, diagrams, logos and anything with sharp edges or text, where JPEG’s artefacts would show. It supports full transparency. The trade-off is size: a photo saved as PNG is typically several times larger than a JPEG, with no visible benefit. Tools such as OxiPNG can shrink a PNG further without changing a single pixel.

Use it for: screenshots, UI images, logos and graphics, especially with transparency.

WebP: the modern default

Google released WebP in 2010, and since Safari added it in 2020 every major browser displays it. Lossy WebP is typically 25–35% smaller than an equivalent JPEG, it supports transparency (so it can replace both JPEG and PNG on a website), and it encodes quickly. It’s what most big sites now serve, which is why images saved from the web so often turn out to be .webp.

The weak spot is outside the browser: some older editors, Office versions and upload forms still won’t take WebP. If you hit one, convert WebP to PNG (or to JPG for photos).

Use it for: website images when you want one format that works everywhere a browser is involved.

AVIF: the smallest files

AVIF stores images using the AV1 video codec. At the same visual quality it typically runs around half the size of JPEG and 20–30% under WebP, and it holds up much better at very low file sizes, softening gracefully where JPEG turns blocky. It supports transparency, HDR and wide colour. Chrome, Firefox, Safari and Edge all display it.

The costs: AVIF is slow to encode (seconds per image rather than milliseconds), and like WebP it isn’t accepted by everything outside the browser.

Use it for: website images, especially large hero images and photo-heavy pages, where it gives the biggest saving and the best Core Web Vitals.

What about HEIC, JPEG XL and GIF?

• HEIC is what iPhones save. It’s excellent for storage but poorly supported outside Apple products, and Chrome can’t display it. More on HEIC.
• JPEG XL is technically impressive, and can even repack existing JPEGs losslessly about 20% smaller, but browser support is still limited, so it isn’t yet a safe choice for a website on its own.
• GIF is limited to 256 colours. For animation, a short MP4 or WebM video is usually a tenth of the size.

Which format should a website use?

Serve AVIF with a WebP or JPEG fallback, or simply WebP if you want one file per image. With the <picture> element the browser picks the first format it supports:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" width="1600" height="900">
</picture>

Today every current browser supports AVIF, so the fallbacks mostly serve old devices. Format is only part of it: resizing images to the size they’re displayed at usually saves more than switching format. See our checklist for optimising website images.

How to convert between formats

The image converter reads JPG, PNG, WebP, AVIF, HEIC, GIF, BMP, TIFF and SVG, and writes AVIF, WebP, JPEG, PNG or JPEG XL. It runs in your browser, can batch a whole folder into a ZIP, and shows the exact output size before you save, so you can compare formats on your own image.

Frequently asked questions

Is WebP better than JPEG?

For websites, yes: about 25–35% smaller at the same quality, with transparency. For files you send to people or upload to forms, JPEG is still the safer choice because everything accepts it.

Is AVIF better than WebP?

AVIF files are usually 20–30% smaller at the same quality and look better at low sizes. WebP encodes much faster. Both work in every current browser.

Does using WebP or AVIF improve SEO?

Not directly: Google doesn’t rank pages higher for using a particular format. Smaller images make pages load faster, though, and page experience, including Core Web Vitals, is part of how Google evaluates pages.

Should I use PNG or JPG for photos?

JPG (or WebP/AVIF on a website). PNG is lossless, so a photo saved as PNG is several times larger without looking any better.

Which image format has the best quality?

Lossless formats, PNG or lossless WebP/AVIF, keep every pixel. Among lossy formats, AVIF gives the best quality for a given file size.