Deutsch
Headings, images & media

WebP / AVIF

Also known as: WebP, AVIF

WebP is an image format developed by Google for the web. It supports lossy and lossless compression, transparency and animation. AVIF is a newer format built on the AV1 video codec with the same aims. Both produce smaller files than JPEG and PNG at comparable quality, and Google Search can index both.

Why do WebP and AVIF matter for SEO?

Google reports that lossless WebP files are 26% smaller than PNGs and lossy WebP files are 25–34% smaller than comparable JPEGs. web.dev puts the typical saving at 25–35% against JPEG and PNG. Smaller files shorten load times, which matters most for Largest Contentful Paint (LCP) when an image is the largest element on screen.

For indexing, Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF, as long as the image is referenced in the src attribute of an <img> element.

MDN lists WebP as supported in current versions of Chrome, Edge, Firefox, Opera and Safari. AVIF arrived later. According to caniuse.com it is supported from Chrome 85, Edge 121, Firefox 93 and Safari 16.4, with partial support in Safari 16.1 to 16.3. MDN recommends a <picture> element with fallbacks, so that a browser picks the first source format it understands.

Example

HTML
<picture>
  <source srcset="/img/shoe.avif" type="image/avif">
  <source srcset="/img/shoe.webp" type="image/webp">
  <img src="/img/shoe.jpg" alt="Red running shoe, side view" width="800" height="600">
</picture>

Common mistakes

  • Renaming photo.jpg to photo.webp. The extension does not change the encoding.
  • Serving a hero image with loading="lazy" although it is the LCP element (assessment, not a Google rule).
  • Leaving out the fallback <img>, which breaks the image for browsers without support.

FAQ

Is WebP better than JPEG? For web delivery, files are usually smaller at similar quality. JPEG remains common for print workflows and compatibility with older software.

What is WebP used for? Photos, graphics with transparency and short animations on web pages.

Sources

  1. An image format for the Web (WebP) – Google for Developersdevelopers.google.com
  2. Serve images in modern formats (WebP) – web.devweb.dev
  3. Image types guide (AVIF, WebP) – MDNdeveloper.mozilla.org
  4. Google Image SEO best practices – Google Search Centraldevelopers.google.com
  5. AVIF image format – caniuse.com (browser support data)caniuse.com

Last updated: