Which image format should you use for a website?

By the EditXo team · Updated 6 October 2026 · 7 min read

Short answer: WebP for almost everything, AVIF if you can serve a fallback, PNG only for transparency you cannot get elsewhere, JPG when you need to be sure it opens anywhere. The longer answer is below, with file sizes we measured on the same images rather than quoted from a brochure.

Do it now in the editorFree. Nothing uploaded.

What we measured

We took two source images and encoded each with the same open-source library (sharp, which wraps libvips) at settings that look visually identical on a normal screen. The first is a real 800 x 500 screenshot of the EditXo interface: flat colours, text, and a photo region. The second is a 1200 x 800 test image with smooth gradients and fine noise, which behaves like a photograph. Your results will differ in detail, but the ratios are typical.

Format and setting	Screenshot 800x500	Photo-like 1200x800	Relative to JPG 85
PNG, lossless	212 KB	2,384 KB	6.6x and 15.8x larger
JPG, quality 85	32 KB	151 KB	1.0x
WebP, quality 80	16 KB	109 KB	0.49x and 0.72x
AVIF, quality 60	13 KB	63 KB	0.40x and 0.42x

What each format is for

Format	Compression	Transparency	Animation	Opens in	Use it for
JPG	Lossy	No	No	Everything, since 1992	Photos when compatibility matters more than size: email, old CMSs, print workflows
PNG	Lossless	Yes	No	Everything	Logos, icons, screenshots with text, anything needing exact pixels or transparency where WebP is not allowed
WebP	Lossy or lossless	Yes	Yes	All current browsers; Safari since 14 (2020)	Photos and graphics on any site you control
AVIF	Lossy or lossless	Yes	Yes	Chrome, Firefox, Edge; Safari since 16.4 (2023)	Smallest files; serve with a WebP or JPG fallback for older devices

A rule you can apply without thinking

Photo on your own website: WebP at quality 75 to 82. It is about a quarter to a half smaller than JPG at matching quality, and every current browser opens it.
Same photo, and you can set up fallbacks (HTML picture element, or a CMS that does it): AVIF first, WebP second. AVIF was roughly 40% of the JPG size in our test.
Logo, icon, diagram, screenshot with text: PNG if exact pixels matter, otherwise lossless WebP, which is typically 20 to 30% smaller than PNG.
Anything that leaves your control, such as an email attachment or a file for a client: JPG for photos, PNG for graphics. Nobody will ask what a .jpg is.
Transparency: WebP on the web, PNG everywhere else.

Quality settings that are safe

Encoders’ quality scales are not comparable across formats. In our measurements and in general practice, JPG 85, WebP 80 and AVIF 60 produce images that look the same at normal viewing size. Going from JPG 85 to 100 tripled the file in our screenshot test with no visible gain. Going from WebP 80 to 90 added 30% for a small gain. The place to spend bytes is resolution, not quality: a sharp image at quality 80 beats a soft one at 95.

Resize before you convert

The largest savings have nothing to do with format. A 4000-pixel-wide camera photo in a 800-pixel-wide slot is five times more data than needed, whatever the format. Resize to the largest size the page will display (double it for high-density screens if the image matters), then convert. EditXo’s Resize tool and Export dialog do both in the browser without uploading; batch mode handles a whole folder.

Does format affect SEO?

Indirectly. Google does not rank a WebP above a JPG, but it does measure page speed through Core Web Vitals, and Largest Contentful Paint is usually an image. Smaller images load faster, and faster pages rank and convert better. Google indexes WebP and AVIF in image search like any other format. Always give images a descriptive filename and alt text; that matters more than the format.

Frequently asked questions

Is WebP safe to use everywhere now?

In browsers, yes: every current browser supports it, and Safari has since 2020. Some desktop apps and older email clients still cannot open it, so keep JPG or PNG for files you send to people.

Should I convert my whole site to AVIF?

Only with a fallback. Safari before 16.4 and some older Android browsers cannot show AVIF. A picture element with AVIF, then WebP, then JPG covers everyone.

Does converting JPG to WebP lose quality?

A little, because both are lossy and you are re-encoding. At WebP quality 80 the loss is not visible. Convert from the original if you have it rather than from an already-compressed JPG.

How do I convert without uploading my images to a service?

EditXo converts in your browser: open the image, Export, pick WebP or AVIF, download. Batch mode converts a folder at once.