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

WebP Cons

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 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 or libvips.

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:

You can incorporate it into your HTML code with:

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 prefered 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.

Compare WebP vs JPEG vs PNG

Upload a PNG or JPEG image on https://webp-vs-jpeg-vs-png.oya.to/ to compare its size and visual quality when converted to optimized WebP, JPEG and PNG.

Originally published at https://oyatocloud.com.

Improve SEO & website performance by 50% or more · No coding required · Static Prerendering · Responsive Image Resizing & Optimization · Free HTTPS/SSL