You might’ve heard of WebP images. Maybe not. But either way, the WebP image format is here to stay, especially now that browsers like Microsoft Edge and Firefox have come on board and are supporting it. SEO Melbourne explores what this means.

WebP Image Format

WebP is among the “next generation” of image formats that include the JPEG XR and JPEG 2000. Such formats are relevant simply because times are changing. Think about it. The GIF came out in ‘87, followed by the first JPEG standard in ‘92, and then the PNG became a W3C Recommendation in ‘96. Here we are thirty-odd years later – and our digital world is nothing like it was back then. We have more websites, countless blogs and web pages, online stores popping up all the time, and people’s attention spans are much shorter. So to stay ahead in the game, it helps to make use of this modern image format with superior compression capabilities.

What is WebP?

WebP is an image format (currently developed by Google) that enables smaller file sizes while maintaining image quality. Bloggers, web designers and developers can use WebP on JPEGs, graphical and translucent images to increase website speed significantly. How so? The fewer kilobytes an image has, the faster it loads when users click on the page, and more pleasant it’ll be to explore your site.

Currently, common web browsers such as Google Chrome (desktop and Android versions), Firefox, Microsoft Edge and Opera support WebP. Conveniently enough, developers have made it compatible with various image-editing tools like Photoshop, well as tools for animating, muxing and viewing WebP images.

Typically a WebP image goes through lossy or lossless compression, and each type has its pros and cons.

WebP Image Format

WebP “Lossy” Compression (Quality Loss)

Lossy compression produces images in which the data is pretty much in the same approximate position as the original. The file size drops considerably (more so than lossless compression). Lossy images are around 25-34% smaller than comparable JPEG images based on the equivalent SSIM quality index. For the sake of site speed, that’s surely useful.

What’s the flip side? Lossy compression images tend to lose their quality due to their smaller size. They’re also prone to “generation loss”, which means that each time you recompress the same image in lossy mode, it becomes even less and less recognisable.

Still, you can adjust the lossy compression of an image in a way that it’s small enough while still rich in quality. And thankfully, a WebP file has an average of 30% more compression than an equivalent JPEG or JPEG 2000 file.

WebP “Lossless” Compression (No Quality Loss)

Meanwhile, lossless compression is totally different. Rather than approximating data positions, lossless makes use of exact matching to put all data points in their respective and precise places. It involves looking at already seen image fragments to be able to replicate new pixels. This results in images that don’t sacrifice quality post-compression, but with considerably larger sizes than lossy compression files.

Google Developers WebP image format

Google Case Studies: WebP Image Format Saves Tons of Space

The benefits of WebP are clear cut, as the Google team themselves have discovered. In one Google study, they gathered a total of 12,000 randomly picked translucent PNG images online, recompressed them as WebPs and compared these to PNGs that were simply downsized. They found out in terms of both the size and processing speed, the WebP format makes a great alternative to the PNG for presenting visual content.

Many of the techniques in PNG compression – Huffman coding, dictionary coding, color indexing transform – also have WebP support. But what makes WebP compression even better is its extra features like separate entropy codes for different color channels, as well as a color cache of recently used colors.

Another study they did was a comparative evaluation of WebP and JPEG compressions, based on the new encoder that Google released in libwebp. They studied the file sizes of a set of images compressed in WebP, which were of the same quality level as their JPEG versions (equivalent SSIM index). And what they found out was the WebP format yielded additional 25-34% compression gains in comparison to the JPEG.

WebP Image Format Google study
A chart from Google which shows the difference in file size between select recompressed PNG images and their WebP (lossy and lossless) compression counterparts, which only evens out as the number of compressed images rises significantly.

Who’s Using the WebP Image Format?

WebP still has quite a way to go in the market, and not all web browsers support it (yet). However, you’d be surprised by the number of tech companies which have already learned to embrace it. There’s obviously Google, and in fact, you’re likely to have come across WebP images while seeing thumbnails on YouTube or while browsing the Google Play store. Among the other big names are Netflix, Yahoo, Amazon, Ebay, Pinterest and Walmart. Even The Verge got its site to load as much as 3 seconds faster by just partially switching to WebP.

Which Compression Works Best for Images on your Mobile Site?

Lossy. The answer here actually isn’t surprising. Sure, lossless compression images look better than their lossy counterparts. But when your goal is to grow your website traffic and keep your visitors engaged, the last thing you want is to give users any reason to get impatient and frustrated when browsing the site itself.

And really, how big or obvious can the differences in quality be when people view, swipe or scroll through most images on their smartphones? Not much – except if they decide to zoom in of course (which is where JPEGs come in handy for product images). But generally speaking, it’s about efficiency over quality. So lossy is your best bet.

WebP Image Format

A Summary of the WebP Image Format

  • WebP images are always smaller in size than JPEGs, PNGs and GIFs but the image quality can stay consistent.
  • WebP images are versatile as they share the capabilities of JPEGs, PNGs and GIFs in one single format. You can convert any PNG, GIF or JPEG into a WebP that often serves as a good replacement for web content.
  • Lossy WebP compression creates images that are comparable to JPEGs, except the size is 25-34% smaller. It supports transparency (alpha channel), unlike the JPEG format.
  • Lossless WebP compression produces images similar to PNGs, but they are 26% smaller in size. It also supports transparency, albeit with an extra 22% bytes.
  • Unless you really need high-quality images, choose lossy compression over lossless when it comes to your mobile site’s images. Larger file sizes tend to make a website load slower than usual. Also, they can potentially bog down your server.

2 thoughts on "Using The WebP Image Format to Speed Up Your Website"

  1. Ritika Goswami says:

    Good Helpful Information Such A Nice Blog Thanks For Your Help Keep Providing More

  2. Rahul Ahlawat says:

    This was worth reading information, great work.
    It helped me in speeding up my website after using webp compression.

    Keep up this work!!!

Leave a Reply

Your email address will not be published. Required fields are marked *