WebP is making headway in the image format space this year. The image format — which is developed by Google — uses both lossy and lossless compression by utilizing technology that Google purchased from On2 Technologies.

WebP has been around a while now, actually, and it first made headlines in a 2010 Google press conference. But, like any new technology, it had some initial rough patches. Today, WebP is on version 1.0.0, so we thought it would be a great time to talk about what makes WebP so powerful, and why it’s a fantastic option for web designers and developers. Before we proceed to describe what WebP actually is, let us focus on why it matters—it’s not only about making images smaller, but it’s also about why and how the images need to be made smaller.

You may have heard about design mistakes killing your SEO and conversion rates. While there are some aspects that CSS or JavaScript are responsible for, like blocking rendering, the images nowadays are a huge part of any website’s weight. Therefore, users on slower connections will have troubles interacting with your website (unless it’s an AMP).

Just recently, we’ve published an article about website optimization. It’s an interesting area of expertise, where you take care of lots of small things to deliver one big thing—a superfast, superlight website that reads on any device and looks amazing at the same time.

What is WebP?

WebP is an image format that utilizes both lossy and lossless compression formats. Being able to create images that use mixed compression formats lets you create richer images that are smaller in file size than other formats.

WebP essentially combines the features of all other image formats (JPEG, PNG, and GIF) together in a surprisingly seamless way. WebP offers file sizes that are around 30% smaller than JPEG without a quality gap. It also provides transparency (alpha channel) like PNG, and the ability to animate images like the GIF format.

Chances are, you’ve seen WebP images before. If you open YouTube in Google Chrome, all of those thumbnails are going to be WebP thumbnails. If you were to open the Facebook app on your android phone, all of the images that you see would be WebP. It’s definitely being utilized by various companies around the world to increase performance. The only reason that it hasn’t completely overtaken other image formats is due to compatibility — more on that later.

We now know that WebP utilizes both lossy and lossless compression, but, what are lossy and lossless compression?

What is Lossy Compression?

Lossy compression creates images that are approximately the same (data is in the same approximate position) which reduces the file size post-compression.

So, usually lossy compression images are much smaller in size than lossless compression images, but they suffer a quality loss. Lossy compression also has the disadvantage of generation loss. Every time you compress the same image using lossy compression it becomes less and less recognizable.

The image above—quote by Smashing Magazine’s “The WebP Manual”—depicts three JPEG encoders which, at the lowest end of the quality spectrum, slightly outperform WebP. Please note though that as the quality increases into usable ranges, WebP easily outperforms other encoders.

But how about recompressing from lossy sources? Smashing’sJeremy Wagner ran several tests. “To figure out the impact of lossy recompression on file size and visual similarity, I recompressed JPEGs in the research image set from the various JPEG encoders (…). I also did the same for lossy WebP images at the same quality setting of 75.”

While the file size was similar for WebP (which was still a tiny bit better), it is clear that WebP can save file size “without degradation in perceptible visual quality”, as Mr. Wagner points out.

What is Lossless Compression?

Lossless compression is the opposite of lossy. Instead of approximating data positions, lossless compression uses exact matching to place data points in their specific places. This makes images that do not lose any quality post-compression but render much larger file sizes.

While lossless compression makes images look much better, dealing with large file sizes can bog down your server or make websites load slower than usual.

As you can see on the graph above, using WebP versus PNG is a no-brainer. While PNG optimizers do a good job of reducing image sizes, WebP is a whole another category. What’s more important is that there is no risk of sacrificing visual quality to achieve lower file sizes.

What About Compatibility?

Even though WebP was announced in 2010, it isn’t universally compatible as of yet. It’s 100% compatible for anyone that’s using Chrome or Opera (which accounts for around 63% of users.) Currently, neither Firefox nor Safari natively support WebP without plugins.

This isn’t a big deal usually, because the Safari and Firefox users will just get JPEG versions of your images (which you’re probably already using.)

The main downside to compatibility when it comes to WebP is content management systems (CMS.) If you use WordPress, Drupal, Joomla, etc. you’re going to have to install an extension that lets you use WebP.

While this is easy-to-do, it has made WebP’s forward progress more stalled than it should be.

The main pain-points of compatibility come through on the web developers end. In the end, if you install the extensions on your CMS and actually use WebP, your website will most likely load faster for Chrome and Opera users (and any other browser users that have WebP plugins.)

WebP vs. PNG

Now that we know what WebP is, in basic terms, let’s compare WebP to other popular image formats that are currently available.

PNG is probably the most valuable image format currently on the market besides WebP. PNG supports transparency, which is a critical element of web design. Transparency lets you structure images so that they don’t conflict with each other while retaining a consistent design framework on your website.

WebP also supports transparency, which makes it a stand-out image for web designers who want the freedom that transparency provides.

Essentially WebP offers the following benefits over PNG.

• WebP offers 26% smaller file sizes than PNG, while still providing transparency and the same quality.
• WebP loads faster (due to file size) than PNG images.

That last point is a big deal. The way that WebP is structured, WebP will only load the image with the smallest file size at the time. So, if you had a PNG image that was smaller in file size than the WebP file (unlikely), your PNG image would load instead of the WebP image. Or, more likely, your PNG image would load for Safari users and your WebP image would load for Chrome users. This means that Chrome and Opera users would load your website faster than Safari and Firefox users if you took advantage of WebP.

WebP vs. JPEG

WebP vs. JPEG is a no-brainer.

WebP offers 25 – 35% smaller file sizes at the exact same SSIM quality index, which means that WebP images have smaller file sizes with the same quality.

There isn’t much more to say on this. WebP offers a better all-around package than JPEG as an image format. The only downside to WebP in this battle is that not all browsers can load WebP so some will load that JPEG file instead.

WebP vs. GIF

This is the only time in which WebP may not be the optimal file type.

Sure, WebP is better than GIF. It offers the same quality at a smaller file size. That being said, lossy compression isn’t the best for animated GIFS.

Since animated images heavily rely on lossless formatting, formats like APNG will win out — both in quality and file size — against WebP and GIF.

WebP does still hold an advantage against GIF, but APNG is the clear winner in the animated image category.

If You Want a Website, You Want WebP As Well

WebP is an absolutely amazing image format for website designers, and it would be a mistake not to utilize WebP’s impressive quality-to-size ration on your website. It will make your site load faster and look better. So, if you aren’t already using WebP, try it. We’re willing to bet that you will see a performance jump.