WebP vs JPG vs PNG vs AVIF: which image format to use on your website in 2026

Images are usually the heaviest thing on a page, and the format you pick can halve their weight — or double it — without changing how they look. The four formats that matter on the web in 2026 each make a different trade, and the good news is that the choice is now mostly mechanical: what’s in the image, plus who needs to open it, gives you the answer.

The four formats in one table

	JPG	PNG	WebP	AVIF
Compression	Lossy	Lossless	Lossy and lossless	Lossy and lossless
Transparency	No	Yes	Yes	Yes
Animation	No	No (APNG is rare)	Yes	Yes
Best for	Photos where compatibility matters	Graphics, logos, screenshots (as a source)	Almost everything on the web	Photos and hero images on the web
Photo size vs JPG at equal quality	100%	500–1000%	~65–75%	~40–60%
Browser support (2026)	Universal	Universal	~96% of users	~94% of users
Opens in old desktop software / email	Yes	Yes	Often not	Rarely
Encoding speed	Fast	Fast	Fast	Slow (matters for on-the-fly conversion, not for build steps)

Size figures are typical ranges for photographic content at matched visual quality; your mileage varies with the image.

What each one is for

JPG compresses photographs by discarding detail the eye doesn’t notice — smooth gradients, subtle colour shifts. It’s been universal since the 1990s and still is: every camera, phone, browser, email client, CMS and government upload form accepts it. Its weaknesses are no transparency, visible blocky artefacts on sharp edges and text, and degradation every time it’s re-saved. Use it when the file has to work everywhere, or as the last fallback in a <picture> chain.

PNG stores every pixel exactly. That’s perfect for logos, icons, UI screenshots and diagrams, where a JPG would smear the edges of text — and terrible for photos, where “every pixel exactly” means a 25 MB file. PNG’s other job is transparency: until WebP, it was the only mainstream way to put a cut-out on a page. Today think of PNG as the format you keep (your lossless master) rather than the one you serve.

WebP, from Google, does both lossy and lossless with transparency and animation, and at equal quality is roughly a third smaller than JPG and a quarter smaller than PNG. Support is effectively universal in browsers — the holdouts were Safari before 14 and Internet Explorer, both long gone. Its remaining weakness is outside the browser: some older photo viewers, design tools, and especially upload forms reject .webp. For anything displayed on your own site, it’s the default.

AVIF, based on the AV1 video codec, is the newest and smallest: photos come out 20–50% smaller than WebP at the same visual quality, and it handles high-dynamic-range and wide-colour images that WebP can’t. Support reached the last major browser (Edge) in early 2024 and now covers about 94% of users; the gap is iPhones stuck on iOS 15 or earlier and out-of-date enterprise browsers. Encoding is slow, so it belongs in build pipelines and CDNs, not in scripts that convert on request. Use it for the images that dominate page weight — hero photos, product shots, galleries — always with a fallback.

The decision, in order

1. Is it a photo or a graphic? Photos → lossy (WebP or AVIF, JPG fallback). Graphics with sharp edges, text or flat colour → lossless (WebP lossless, or PNG if the consumer can’t read WebP). Screenshots of UI are graphics; screenshots of video are photos.
2. Does it need transparency? Then JPG is out. WebP handles it in both modes; AVIF too.
3. Where will it be opened? In your own web pages → WebP/AVIF. Emailed, uploaded to a third-party form, or opened in someone’s desktop software → JPG (photo) or PNG (graphic). This is the question people skip, and it’s why “the site converted my logo to WebP and now the print shop can’t open it” is a common complaint.
4. How heavy is the page? If images dominate your load time, add AVIF for the largest ones and measure. If the page is light already, WebP alone is simpler and close enough.

The pattern that makes the choice safe

You don’t have to bet on one format. The <picture> element lets the browser choose 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="Trail runner at sunrise" width="1600" height="900" loading="lazy">
</picture>

Modern browsers take the AVIF, slightly older ones the WebP, and anything else gets the JPG. No JavaScript, no user-agent sniffing, and the <img> still carries the alt, dimensions and lazy-loading attributes. Most static-site generators and image CDNs generate this markup for you; if yours doesn’t, it’s a five-line component.

Converting well

Two rules keep conversions clean. Convert from the best source you have — a lossless PNG or an export from RAW — rather than from an already-compressed JPG, because no format can recover detail that’s gone; converting a heavily compressed JPG to PNG just makes a large file with the same artefacts baked in. And don’t chain lossy formats casually — JPG → WebP → AVIF stacks three rounds of loss. Go source → target in one step.

The Image Converter handles PNG, JPG and WebP in both directions; JPG to WebP and PNG to WebP are the two most common one-step jobs, and AVIF to JPG rescues AVIF files that a form or an old app won’t take. All of them run in the browser — files aren’t uploaded — and if the target has a hard size cap, the Image Compressor finishes the job.

Quick reference

• Photo on your site → AVIF with WebP and JPG fallbacks; or WebP alone if you want simple.
• Logo, icon, screenshot on your site → lossless WebP (PNG if you must).
• Anything you email or upload elsewhere → JPG for photos, PNG for graphics.
• Transparency needed → WebP or PNG; never JPG.
• Keep the master as PNG or the original RAW/HEIC; serve derivatives.
• Measure: the format that saves 40% on a 2 MB hero matters more than the one that saves 40% on a 4 KB icon.