Why WebP Is The Rockstar of Image Formats for Web Designers

posted in: Blog | 0

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.

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.

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.