You might’ve heard of WebP images. Or 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 is among the “next generation” of image formats that include the JPEG XR and JPEG 2000. Such formats are relevant as 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’ve got 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 site 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 the 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, with each type having its own pros and cons.
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 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.
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.
Browser Not Supporting WebP? Use a Java Decoder
If you’re in the unlikely situation of using a website browser with which WebP images are still incompatible, here’s something you should know. The WebP format actually has a Java decoder, which you can run in any browser that has Java enabled as a way to view what is otherwise unviewable WebP content.
Use Squoosh to Compare Resized & Reformatted Images
Google Chrome Labs earlier this year released an open-source, web-based app with the name Squoosh, and it’s quite a handy tool. In just a matter of clicks, this image editor shows exactly how much faster images can load using the WebP image format.
Here’s what developers need to do when using Squoosh: simply drag and drop an image file onto the app’s surface (running inside a web browser), choose image format, resize it, set the display quality and then reduce the color palette. That’s all. It’s very intuitive, and the app allows for a side-by-side comparison between the optimised version of that image and the original file, as well as with alternative formats. Formats aside from WebP which can be selected include JPEG, JPEG 2000, BMP, GIF, PDF, TIFF and Mozilla’s mozjpeg.
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.
To explore more SEO-related topics, check out SEO Company Melbourne – the experts in anything and everything SEO!
