SEO

WebP and AVIF

Also called next-generation image formats

Two newer image formats that hold the same picture in a smaller file than JPEG or PNG, with broad browser support.

Quick facts: WebP and AVIF

Category
SEO
Also called
next-generation image formats
Level
Intermediate
Affects
Page weight, mobile load time, storage and bandwidth
Where to see it
Squoosh, Chrome DevTools Network panel, your CMS or CDN image settings
In this article4
  1. How WebP and AVIF work
  2. Why WebP and AVIF matter
  3. Common mistakes with WebP and AVIF
  4. How to act on it

How WebP and AVIF work

Both formats are newer ways of encoding a picture. They use techniques borrowed from video compression to describe the same image with less data, so a photo saved as WebP or AVIF is normally lighter than the same photo saved as JPEG at a similar visual quality, and the visitor sees no difference.

WebP is the older and safer of the two. It handles photographs and flat graphics, supports transparency and animation, and every current mainstream browser displays it. AVIF is newer and generally squeezes harder, particularly on photographs and on images with wide colour or gradients. It also supports transparency. Its trade-off is encoding: producing an AVIF file takes noticeably more processing than producing a WebP, which matters when a site converts images on upload or on the fly.

Why WebP and AVIF matter

Images dominate the weight of most pages, so the format is one of the few decisions that lightens every image at once without changing how the page looks or how it was designed. Nothing has to be redrawn and no layout has to move.

That is worth most on mobile connections, which is how the majority of visitors to a Nepali business site arrive. A lighter hero image means the main content appears sooner and costs the visitor less of their data bundle. It is one of the rare changes that helps speed, cost and experience together, and it can usually be automated once rather than managed image by image.

Common mistakes with WebP and AVIF

The first is converting without resizing. A camera-width photograph converted to AVIF is still a camera-width photograph; the format saves a slice of a file that should never have been that large. Get the dimensions right first, as part of proper image optimisation, then change format.

The second is assuming the format works everywhere. Browsers are fine, but email clients, older in-app browsers, some social preview scrapers and plenty of desktop software are not, so a file that displays perfectly on your site can break in a newsletter or a shared link.

The third is repeated re-encoding. Converting an already compressed JPEG to WebP, then editing and saving again, stacks compression damage that cannot be undone. Keep the original.

How to act on it

Let something else do the work. A capable CMS, image plugin or content delivery network can convert on upload or on request and serve the modern format to browsers that accept it while falling back to JPEG or PNG for anything that does not. That fallback is the whole safety net, so confirm it exists before switching anything.

Then judge the results by eye rather than by file size alone. Compare the original and the converted version at full size, especially on product photographs and images with large flat areas, where aggressive settings show first. Keep the untouched originals in your own storage, and use JPEG or PNG deliberately where a file has to travel outside your website, such as in an email or an attachment.

Do and do not

Do

  • Serve modern formats with a JPEG or PNG fallback
  • Resize the image before converting the format
  • Compare the converted file against the original by eye

Do not

  • Convert a badly sized image and call it optimised
  • Assume email clients and older software display them
  • Re-encode an already compressed file repeatedly

Questions people ask about this

Should I use WebP or AVIF?

WebP is the safer default: broad support, quick encoding, and it works well for both photographs and flat graphics. AVIF generally produces smaller files, especially for photographs, at the cost of slower encoding. Many sites serve AVIF where the browser accepts it and fall back to WebP, then to JPEG, which needs no decision made image by image.

Will WebP or AVIF images break for some visitors?

Not in current mainstream browsers, which display both. Problems appear outside the browser: email clients, some in-app browsers, older software and certain link preview scrapers may not render them. This is why a fallback matters, and why files that leave your website, such as images in a newsletter, are safer as JPEG or PNG.

Can I convert my existing images in bulk?

Yes. Most content management systems have plugins that convert a media library in the background and serve the new format automatically, and delivery networks can convert on request without touching your files. Keep a backup of the originals before any bulk run, and check a sample of product and detail images afterwards for visible quality loss.

Related terms

Found this useful?

Share it, or ask an AI to summarise it

Back to the glossary

Knowing the term is the easy part

Applying it to your own site and budget is the work. Book a call and I will tell you what actually applies to you.