What is WebP? A guide to the new image format

Websites would be pretty boring without images to keep the attention of visitors. But sprucing up your site with images can come at a cost – slow page speeds (sad face). It’s been an ongoing battle for devs and designers, trying to reduce your file sizes as much as you can without compromising on image quality. The good news is that if you’re a web designer or a dev who strives to reduce and optimise your image file size, WebP should put a smile on your face.

Fast website loading speeds is what every website owner aims for, but you still want your site to look amazing – that includes using stunning images and graphics. Historically, even if you have fast web hosting, images can cause a bit of a headache if you don’t get the balance between file size and image quality right. That’s where Google’s new web image format WebP comes in. If you’ve not heard of WebP yet, we’re about to give you the lowdown on everything you need to know. Ready?

What is WebP?

So what is WebP? In short, WebP, or unofficially pronounced as weppy, is a relatively new format originally introduced by Google in 2010. An alternative to formats like PNG and JPEG, it’s finally reaching maturity and starting to be more widely adopted across the web.

You might be wondering why we need a new image format, what’s wrong with the other ones? Well, WebP was developed to take the best bits of PNG, JPEG and GIF and mix it all up into one format. So now we have an image format that provides both lossy and lossless compression, giving us smaller file sizes while still offering rich, high-quality images and animations.

Here’s a breakdown of WebP and what makes it so cool:

• A different file extension
  You can recognise a WebP file by its .wepb file extension (the bit at the end of the file name).
• Type of compression
  WebP supports both lossy and lossless compression that's more efficient than JPEGs and PNGs.
• Transparent backgrounds
  PNGs are often used when transparency is needed, but it comes at the cost of larger file sizes. Now you can use WebP for lossless transparency, i.e. PNG with alpha channel.
• Animation support
  WebP supports animation, so your Friday memes can now be in the smaller WebP format, rather than be larger-sized animated GIFs.

WebP vs PNG vs JPEG vs GIF

In a nutshell, WebP is capable of significantly reducing JPEG, GIF, PNG image file sizes. And not just a little bit… it reduces it by A LOT. Google has run its own tests to show how the new image format compares:

WebP vs PNG – WebP is on average 26% smaller in size compared to PNGs.

WebP vs JPEG – WebP images are 25-34% smaller than comparable JPEG files.

WebP vs GIF – Animated GIFs converted to lossy WebPs were 64% smaller and lossless files were 19% smaller.

To show you, we've exported the same image as a WebP, PNG and JPEG (saved at max quality). While there isn't much visible difference, the file sizes vary a lot:

What are the advantages of WebP?

You’ve probably got the message by now WebPs are a big deal because of how much they can decrease file sizes. But what does this mean for your site?

• No compromises on image quality

  We may have mentioned it already but while you can compress PNGs, JPEGs and GIFs to reduce their file size, you risk compromising on the image quality. WebP can produce smaller files without your image quality taking as much of a hit.

• Increase website performance

  One of the things that can weigh down site performance is heavy pages (pages with lots of data to load). Because WebP can produce smaller file sizes, your pages will become lighter and quicker to load – faster page speeds equals happier visitors (potential customers will get bored of a slow site and go elsewhere) and happier visitors means increased conversion rates.

• Takes up less bandwidth

  The rate at which your server transfers site data to visitors, your bandwidth speed is pretty important. Using smaller WebP files can free up bandwidth space which is especially helpful for image-intensive sites like portfolios, food/travel/photography blogs and even online stores.

• Multiple uses

  PNGs, JPEGs and GIFs each have their own uses. PNGs most notably for their support for transparency and GIFs for being animated images. WebP takes each of these and brings the best bits together with support for both transparent and animated images.

• Increase search engine rankings

  Site speed is key for search engine optimisation (SEO) so it goes without saying that using smaller WebP files to increase site performance can help your search engine rankings. Plus they can optimise your Largest Contentful Paint (LCP), Google’s Core Vitals Metric of how long content takes to load above the fold.

Are there any disadvantages of WebP?

The WebP image format brings a load of benefits with it, and while we wouldn’t necessarily call them disadvantages, there are a few things to keep in mind.

• Designed for the internet. The WebP image format is certainly designed with the internet in mind (increased page speeds and support for animations). If you’re using your images offline as well, you’ll want to have a PNG or JPEG copy too.
• Some browsers aren’t supported. Although WebP is currently supported in popular web browsers like Google Chrome 17+, Microsoft Edge 18+, Safari 14+ and Firefox 65+, not all previous versions are supported yet so you’d need to have a backup image to display to users who aren’t using a supported browser.
• Check application support. The same as with browsers, not all computer programs support the WebP format just yet. The good news is that Adobe Photoshop 23.2 has full support so if you’re an Adobe user you’re set! But if you use an older version, or a different program entirely, you may need to install a plugin to edit your files.

So, can you use it?

As we touched on above, browser support is critical, especially for getting WebP out of the research labs at Palo Alto and into the homes of web users. It’s still something that is being rolled out across platforms but if the current trend is anything to go by though, any platforms and browsers that don’t support WebP right now should soon follow suit. It’s easy to keep up with developments in WebP support so you can stay in the loop.

If you want to manipulate (resize, scale, etc) or create WebP images within web apps you’ll need server-side support. This is something that you’ll need to check with your hosting provider – some have already started integrating support WebP.

What about WordPress?

Our WordPress Hosting also supports WebP, but there are a few more things to consider.

Starting with WordPress 5.8, you’ve been able to use the WebP image format the same way as JPEG, PNG, and GIF formats. Just upload your images to your Media Library and include them in your content. From WordPress 5.8 onwards the WebP format is supported by default, so you don’t have to install third-party plugins to upload WebP images. That should suffice for most common use cases.

However, around 5% of people (mainly Safari users on older macOS) use a web browser that doesn’t support WebP. If you convert WebP images and use them directly in your content, those visitors wouldn’t be able to see your images, which would ruin their browsing experience.

Also, generating WebP images isn’t as straightforward as getting a JPEG/JPEG image, which is the default image file format on most cameras, smartphones, and online image libraries. WordPress doesn’t support automatic image conversion to WebP format (yet!).

Don’t fret – there’s a solution…

WordPress plugins for WebP

You can use a WordPress plugin that converts your original images to the WebP format and also provides the original image as a fall-back if a visitor’s browser doesn’t support WebP.

For example, if you upload a JPEG file to your site, the plugin will:

• Convert the JPEG file to WebP and serve the WebP version for Chrome, Firefox, Edge, etc.
• Show the original JPEG file to visitors browsing with Safari (on older macOS versions) and other browsers that don’t support WebP.

That way, everyone can see your image, and everyone gets the fastest experience possible – win-win!

The development of WebP certainly is not just for designers and devs looking to speed up their sites, but also freelancers and small businesses wanting to get the most from their hosting.

Looking for more ways to speed up your website? We have a whole post that looks at what’s slowing down your WordPress site and how to fix it. Or you can check more interesting website reads over on our blog.