Sign In Sign Up

What is the WebP image format?

WebP — first announced by Google in 2010 — is an open image format based on the VP8 video format and is a more efficient alternative to PNG, JPEG and GIF.

In general you can expect a 25-35% size reduction in images converted to WebP, but in real-world usage you can often see reduction of up to 90% without visible quality loss.

WebP Pros

  • Typically smaller file sizes than JPEG, PNG and GIF (still images)
  • Supports both lossy (removal of less visible image information) and lossless (visually identical the original image) modes
  • Supports transparency (unlike JPEG)
  • Supports animation (unlike JPEG or PNG)

WebP Cons

  • Less browser support
  • Doesn't always perform well on lower quality GIF animations
  • Subjectively subpar visual quality when compressed with lower quality settings in lossy mode — you can compare for yourself below
  • Not as good as upcoming image formats like AVIF and JPEG XL — neither of which are supported by majour web browsers at this time.

WebP Browser Support

As of June 2020, All majour desktop and mobile browsers support WebP, with the exception of Internet Explorer and Safari (which will support it in version 14).

WebP: Coming soon to a Safari web browser near you!

On the 22nd of June '20, Apple released Safari 14 Beta and one of the most exciting new features was support for WebP images.

WebP support previously appeared in a beta of macOS Sierra and iOS 10, but was sadly later removed.

This meant Safari (before version 14) was the only mainstream browser — except Internet Explorer 11 which is slowly approaching its End of Life — left without support for WebP.

How to use WebP

By default oyato cloud automatically optimizes your images based on what the browser supports — with no need for manual conversion or code changes — but you can also do it manually.

How to convert images to WebP

You will first need to convert your existing images to WebP. You can use open sources tools like ImageMagick.

If you're using a CMS, CDN or site generator, it might also already support WebP.

Using WebP in your website/webapps

Give an existing image specified with HTML and a converted image.webp:

    <image src="image.jpg" alt="My Image">

You can incorporate it into your HTML code with:

    <picture>
        <source srcset="image.webp" type="image/webp">
        <image src="image.jpg" alt="My Image">
    </picture>

The picture element allows you to select from a number of different image formats.

Alternative image formats can be used by including one or more source elements, each with a srcset attribute specifying the URL of the alternate image and type (e.g. image/jpeg) specifying its format.

The browser checks each source from top to bottom and uses the first one it supports. This allows you specify your preferred format in-order in cases where you have multiple alternatives.

The original img element must come last and acts as a fallback when no alternative source images are supported.

Recent Articles