Definition

WebP is an image format developed by Google that supports both lossless and lossy compression for images on the web. It generally produces smaller file sizes than equivalent PNG or JPEG images at comparable quality.

WebP lossless files are around 26% smaller than PNGs, and lossy WebP images are roughly 25–34% smaller than comparable JPEGs at equivalent quality. The format also supports transparency with modest overhead and animated images as a smaller alternative to GIF. Lossy compression uses predictive coding derived from the VP8 video codec, while lossless compression reuses previously seen image fragments. WebP is supported natively by current versions of major browsers including Chrome, Firefox, Safari, Edge and Opera. Serving smaller images can help loading metrics such as Largest Contentful Paint.

Examples

• Image optimisation

  A site converts large JPEG product photos to WebP, cutting their file size by roughly a third while keeping similar visual quality.

• Transparency support

  A logo that previously needed a PNG for its transparent background is saved as a lossless WebP, producing a smaller file with the same transparency.

Sources

• Google for Developers — An image format for the web (WebP)
• web.dev — Use modern image formats

Related terms

• Image SEO
  The practice of structuring images and surrounding markup so search engines can discover, understand and surface them in image and web search results.
• Alt Text
  Text in an image's `alt` attribute that describes the image. Used by screen readers and by search engines that cannot see the picture.
• Lazy Loading
  A technique that defers loading of off-screen images, iframes, or other resources until the user is about to scroll them into view.
• Page Speed
  How quickly a web page loads and becomes interactive, measured by metrics such as Largest Contentful Paint, Interaction to Next Paint, and Time to First Byte.
• Largest Contentful Paint
  A Core Web Vitals metric measuring how long the largest visible content element on a page takes to render after loading begins.
• Core Web Vitals
  A set of three Google metrics that measure real-world page experience: loading speed, interactivity and visual stability.

Where QueryCatch uses this

• Image Optimisation
• Page Optimisation