To WebP or not to WebP. That is the question.

Currently at IDRsolutions we are adding support for a new image format (WebP) to JDeli our Java image library, and so I decided to write a blog post this week to give people more of an idea about this image format and why you would either want to use it or run away screaming.

What is WebP?

WebP is an open source image format that was created to work on web browsers. It’s aim is to make smaller images that will speed up the web. Speed up web page generation and you can speed up search engines. Google created this project and open sourced the code under a BSD license, so that developers could help out and suggest improvements. For those of you who are interested you can find the Git repository information here.

WebP supports both lossy and lossless compression and lets you configure lossy compression so that you can find the right balance between file size and image quality. What are these compression types you ask?

Lossy compression
 can also be known as irreversible compression. This data compression method has the smallest file sizes because it discards data by using inexact approximations to represent the content. Since some of the data is discarded, the original data cannot be retrieved. Discarding data and effectively averaging it, can cause the quality off the data to drop, though a good lossy compression tool will significantly reduce the file size before the client notices the quality reduction. Audio formats like MP3 use lossy compression as extreme data (mainly the data that represents the sound ranges we cannot hear) is removed to reduce file size.

Lossless compression is a reversible data compression method. It allows the original data to be reconstructed from the compressed data, so even after conversion you can get your original data back. This is similar to how a ZIP file works. PNG and GIF files also use this compression method. This compression creates bigger file sizes than lossy compression but the data quality is preserved.

Want to see some examples? Then head over here to see a side by side comparison gallery that Google created after testing the WebP compression against PNG files. If you want real world comparisons (that weren’t created by the people who created the format) then check out this recent article. It offers a good explanation on how to convert images and findings from multiple conversion tests using a variety of images. Te below image is taken from the google comparison gallery.

flowerComparison

WebP can also be used to create animated images similar to GIFS. The maximum pixel dimensions for WebP images are 16383 x 16383.

Which browsers support WebP?

At the moment WebP is supported on Chrome, Chrome for Android, Opera, Opera Mini and Android Browsers. For more specific browser versions hop over to here.

Other major browsers can use the WebPJS JavaScript library to support the WebP format except Microsoft Explorer which has to use Flash. You can also gain support on your local machine to view and edit WebP formats. For example Google released a plugin that allows WebP images to work correctly with Windows Photo Viewer and other Windows Imaging components. Image editing software like Photoshop can acquire a plugin to work with WebP formats.

usages

Benefits

On average 60% of a web page is made up of images. This could be the backgrounds,  icons, logos, galleries and any other images that you incorporate into your websites. Customers are expecting fast, efficient and easy to navigate web pages that WebP offers with very small image sizes that allows for quick rendering and transferring.

Smaller image formats can also be created with no loss of quality. In comparison to JPEG and JPEG 2000, WebP files are 30% smaller which is crucial when you need to worry about your storage capacity.

As I previously mentioned WebP can also be used as a replacement for GIFS. Not only are the file sizes smaller (64% reduction from animated GIF’s to lossy WebP and 19% reduction when converted to lossless) but the quality is better.

WebP also supports 24-bit RGB colour with an 8-bit alpha channel while GIF’s only supports 8-bit colour and 1-bit alpha. Another benefit for the animated WebP is that it can combine frames with both lossy and lossless compression so you can choose which frames need better quality. You can also seek to different frames which helps recover the animation when scrolling occurs.

A possible security benefit for WebP is that you cannot view the images easily if they are downloaded to the local machine. Do you want to show a preview of artwork or desktop backgrounds, before someone separates from their hard earned money to purchase it? Well unless the person is knowledgeable about the WebP format and can convert the file, they won’t be using your images without paying for them.

Drawbacks

As with all new-ish formats. The support is currently being developed and is therefore not as wide for the WebP format.

Requires the help of other technology e.g. plugins to work on browsers that do not natively support the format, though if the format isn’t supported then the files are shown in a known format e.g JPEG or PNG.

The main use case for WebP would be to convert all your current images to the WebP format. This means the image would potentially have been compressed twice which may lead to a very slight loss in quality. See this article that I mentioned earlier for more information.

So there you have it a quick run through of the WebP image format.

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the  Blog RSS.

Related Posts:

The following two tabs change content below.

Georgia Ingham

Java Developer at IDRsolutions
Georgia is a Java Developer at IDRSolutions. She is currently working along side the team on the development of JPedal and JPDf2HTML5. Her hobbies include reading and cycling.
Georgia

About Georgia Ingham

Georgia is a Java Developer at IDRSolutions. She is currently working along side the team on the development of JPedal and JPDf2HTML5. Her hobbies include reading and cycling.

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>