WebP vs AVIF vs JPEG: which image format should your website use?

For about twenty-five years, the image format question for photos on the web had one answer: JPEG. Today there are two serious alternatives, and developers, plugins and hosting dashboards keep asking you to pick. Comparing WebP vs AVIF vs JPEG is not about finding a single winner. Each format trades file size against compatibility, creation speed and features in different ways. This comparison sets out those trade-offs so you can choose sensibly for photos, graphics and animations on a business site.

A quick profile of each format

JPEG

Standardised in the early 1990s, JPEG is lossy-only, supports no transparency and no animation. Its great strength is that every browser, phone, email client, messaging app and editing tool understands it. It is also fast to create and decode.

WebP

Developed by Google and released in 2010, WebP supports both lossy and lossless compression, alpha transparency and animation in a single format. After years of patchy support, it now works in all current major browsers, including Safari since version 14.

AVIF

AVIF is based on the AV1 video codec, developed by the Alliance for Open Media, and has gained browser support from 2020 onwards. It also supports lossy and lossless modes, transparency and animation, plus higher bit depths and wide colour gamut for HDR content.

Compression efficiency: how small can the files get?

At similar visual quality, the general pattern reported by browser vendors and independent tests is consistent: WebP files are usually smaller than equivalent JPEGs, and AVIF files are often smaller still. The exact margin varies a great deal with the image content and encoder settings, so treat any single percentage with suspicion.

Where the formats really separate is at lower file sizes. When pushed hard, JPEG breaks into visible blocks, while AVIF tends to degrade more gracefully, softening detail instead. That makes AVIF particularly attractive for large hero images and photo-heavy pages on mobile data.

The advantage narrows at very high quality settings. If you need near-perfect reproduction, the savings from switching formats become smaller.

Browser and platform support

• JPEG: universal, including old browsers, feature phones, email and every social platform.
• WebP: supported by current Chrome, Edge, Firefox, Safari, Opera and Samsung Internet. Very old iPhones and iPads that cannot update beyond older iOS versions lack it.
• AVIF: supported by current Chrome, Firefox, Safari (from version 16) and Edge (added later than the others). Older devices are more likely to miss it than WebP.

Browsers are only part of the picture. Customers may download a product image to share on WhatsApp, attach it to an email, or open it in an older photo viewer. Some desktop software still does not open AVIF files by default. For images that people are likely to save and reuse, such as brochures or price lists, a JPEG or PNG download link is kinder.

Encoding speed and server cost

Creating an image file is called encoding, and this is where AVIF has a real downside. AVIF encoders are typically much slower than JPEG or WebP encoders, especially at their higher-effort settings. Encoding a large batch of product photos can take noticeably longer and use more CPU.

That matters in practice:

• On shared hosting, converting thousands of uploads to AVIF can hit CPU limits.
• Generating AVIF on the fly for each request without caching can slow responses.
• Faster encoder settings reduce the time but also some of the size advantage.

Decoding, which happens on the visitor’s device, is fast enough for all three formats on modern phones. JPEG and WebP remain lighter to decode than AVIF, though this is rarely a visible issue for typical page images.

Transparency, animation and graphics

Transparency

JPEG cannot do it at all, which is why product cut-outs and logos traditionally used PNG. Both WebP and AVIF support transparency, including in lossy mode, which can make a transparent product image dramatically lighter than a PNG.

Animation

Animated GIFs are large and limited to 256 colours per frame. Animated WebP and animated AVIF are both far more efficient. For anything longer than a few seconds, though, a short muted MP4 or WebM video is usually the better choice.

Sharp graphics and text

Lossy compression in any format can blur fine lines and small text. For screenshots or diagrams, compare lossless WebP with PNG, and for logos and icons use SVG, which beats all three raster formats.

Side-by-side summary

• Smallest files at equal quality: AVIF, then WebP, then JPEG
• Widest compatibility: JPEG, then WebP, then AVIF
• Fastest to encode: JPEG and WebP, with AVIF slowest
• Transparency: WebP and AVIF yes; JPEG no
• Animation: WebP and AVIF yes; JPEG no
• HDR and high bit depth: AVIF strongest
• Editing and sharing outside the browser: JPEG easiest

Recommendations for different kinds of websites

Small brochure or service site

WebP for all photos, with the platform providing JPEG fallbacks automatically if possible, is a simple, safe choice. The handful of images involved means AVIF’s extra savings are modest.

Online store with large catalogues

Serving AVIF first, WebP second and JPEG as a fallback gives the best bandwidth savings across many product images. Do the conversion once at upload or through an image CDN, never on every request.

News portal or blog

Article images are viewed once and shared widely. WebP or AVIF on the page, with the original JPEG used for social sharing tags such as Open Graph images, avoids preview problems on platforms that may not handle newer formats.

Photography or portfolio site

Test AVIF at high quality carefully against your originals, paying attention to fine texture and skin tones. Keep full-quality masters regardless.

Deciding for your own site

Take five typical images from your site, export each as JPEG, WebP and AVIF at a quality where they look identical to you, and note the file sizes and time taken. That small test tells you more about your content than any generic chart. The next practical question is how to serve newer formats without breaking older devices, which is a matter of markup, server or CDN configuration.

If you would rather have this handled during a rebuild, our website development team can set a format strategy that suits your catalogue and hosting.

Frequently asked questions

Is WebP better than PNG?

For most photos and transparent product images, yes, because WebP produces much smaller files. For pixel-perfect screenshots, lossless WebP is usually smaller than PNG too, though PNG remains more widely accepted by editing software.

Does Google prefer WebP or AVIF for SEO?

Google Images supports common formats including JPEG, PNG, WebP and AVIF. There is no ranking bonus for a particular format; the benefit is indirect, through faster page loading.

Can I upload AVIF images to WordPress?

Recent WordPress versions support uploading AVIF files, provided your server’s image library also supports AVIF. Check with your host, as older server setups may not.

Should I stop using JPEG entirely?

No. JPEG remains the safest fallback and the best choice for downloadable or shareable files. Many sites serve newer formats to browsers that support them and keep JPEG available underneath.