Using WebP today

This is a translation of an article by guys from Aristotle Interactive.
They say photography is worth a thousand words. But on the net, a photo can take a thousand kilobytes or more! According to the HTTP Archive, images on average occupy up to 64% of a web page. Considering this, image optimization is an extremely important aspect, especially taking into account the fact that many users will simply leave the site if it does not load in a few seconds.

The problem with image optimization is that we want to preserve the size of images without sacrificing quality. Previous attempts to create file types that would optimize images better than standard JPEG, PNG, and GIF did not succeed.

Meet WebP

WebP is an image format created in 2010 and developed by Google. This format provides image compression with both lossy and lossless. Some large companies, such as Google, Facebook and eBay , are advised to use this format for image compression.

In our company, we always experiment with methods to improve the performance of sites. We launched several A / B tests to understand the impact of WEBP on image quality and how best to incorporate it into our clients' projects.
')
The main reason why we started to implement WebP is file size reduction.
According to Google:

• WebP compresses lossless images by 26% better than PNG.
• WebP compresses lossy images better than JPEG by 25-34% with the same structural similarity index (SSIM)
• WebP supports lossless transparency (known as the alpha channel) with an increase in size of only 22%.

Our tests showed the advantages and disadvantages of the WebP image format:

Benefits	disadvantages
Smaller file size	Poor browser support
Improved compression algorithm	Distortion has a plastic look
Better color transitions	Inconvenient export interface
Alpha channel mask

Image quality

WebP uses a new compression algorithm, so the distortion (i.e., warp and degradation) looks different with respect to other file types. WebP leaves clear edges of the photo, but at the same time the detailing and texture deteriorates, which is inevitable when it is compressed with losses. While a comparable JPEG file shows jitter on solid parts of the image, WEBP boasts smooth transitions even at the lowest quality settings.

The disadvantage of this is that people's faces may look plastic or posterized with a low quality setting.

The difference in quality between JPEG and WebP. ( Full version )

The difference in quality between JPEG and WebP when approaching. ( Full version )

There are a couple more features of the WebP format. Compression settings do not repeat exactly those in JPEG. Do not expect that 50% of the quality of JPEG will correspond to 50% of the quality of WebP. In the case of WebP, the quality drops quite rapidly, so it’s better to start with the highest values ​​and gradually reduce them. Another advantage in favor of WebP is the ability to add an alpha channel mask, just like in PNG. Unlike the competing format, the image of the WebP format you can compress to one tenth the size of the image in the PNG format. This is really what WebP stands out.

One life example: a PNG file of 880Kb in size (24-bit image with alpha channel) was compressed to 41Kb - 95% compression! Although this is not a common situation, the possibilities of WebP are visible.

The difference in texture quality. ( Full version )

To further reduce the file size, we may not include metadata by unchecking the “Save Metadata” checkbox in the save window of the image editor. For even greater results, you can choose “lossy alpha channel”.

The quality settings for the alpha channel apply to the image itself. For example, a 50% image quality will have a 50% alpha channel quality. In our testing, we expected mask edge distortion, however there were also noticeable changes in the entire image. Of course, this is an option to further reduce the size, but then you should very carefully monitor the image quality.

Also, pay attention to unwanted bands in the alpha channel.

The difference in the quality of the alpha channel. ( Full version )

We were very happy when we found the Plugin for Photoshop to support WebP. With it, you can easily adjust the quality of WebP images. True, the interface of the plugin leaves much to be desired. Currently you can not view the image to assess the quality parameters.

WebP Plugin for Photoshop.

As a workaround, you can compare files in Google Chrome. Opening the Save dialog box is also inconvenient in Photoshop. To do this, we have assigned a hotkey to not constantly use the dialog box. Despite the inconvenience, it is still worth it.

With excellent compression performance, good quality and alpha channel, WebP looks like a good rival to current image formats.

Despite promising test results, there is no definitive leader among all formats. Although WebP does impressively among other formats, JPEG and 8-bit PNG are sometimes still better than WebP in size and / or quality. Therefore, we advise you to conduct your own testing before transferring all your images to WebP, because it may not completely meet your requirements.

Implementation

Having determined that WebP can be an effective tool for us, we turned to our developers to implement this format. WebP is fully supported by Chrome, Opera, Opera Mini, Android-browser and Chrome for Android browsers. Firefox, Internet Explorer and Safari do not have full support, although Firefox with WebP has its own history. Fortunately, there are several ways to display WebP in these browsers.

We found 3 ways to support this format. It was important for us to understand that we use the best tool in terms of page size, remembering that the speed index is a key metric and taking into account any necessary Javascript polyfills.

We conducted 4 tests to determine which format suits us best. The first used JPEG as a reference sample, and the remaining 3 used the approaches described below. We used a JPEG image and a WebP image of the same quality (269KB JPEG and 52KB WebP).

The results of all tests are available in PDF .

In the second test, we included WebPJS , a 67Kb polyfill created by Dominic Homberger. It provides WebP support in all modern browsers, even in IE6 and higher. Polyfill is convenient because you don’t need to change the img tag in your code, you just need to change the image extension from .jpg and .png to .webp.

The next approach was to use Picturefill , a polyfill that allows you to use a tag, even when it is not fully supported. With it, you can use to share WebP and, if the format is not supported by the browser, give it a JPEG, PNG or other format.

The last test was to use the .htaccess file on the server to implement WebP. This version was developed by Vincent Orbach .

Using it, the code in .htaccess looks to see if there is a WebP version of each image on the page. If the browser supports WebP and the WebP image is available, it is sent, not JPEG or PNG. This is convenient and you do not need to change the layout of the web page.

After reviewing the results, we concluded that the WebP polyfill (from the second test) is the most lightweight solution that works in all browsers, but we were not satisfied with the speed index metric using this method. WebP polyfill displays images worse than the JPEG control test and worse than other implementations except iOS. We tend to use this implementation because of better browser support.

It was also noted that on iOS devices the files were 100KB more than on other devices. We found that in iOS5.1 in both IE 8 and IE9, the WebP image was loaded 3 times. Although an additional 2 times - this is not good, it took up less space than the JPEG equivalent. We did not test it in new versions of iOS, maybe it was already fixed there.

A look into the future

Our team decided to implement the method used in Test 3, using the tag for uploading WebP images to browsers that support them and returning JPEG or PNG to those that know nothing about WebP.

We believe that this is the best way to progressively improve and it supports image rendering in a format supported by the browser.

Initially, we used the method with a polyfill, but we considered that the result would not be perfect.
WebP cannot yet completely replace JPEG or PNG, but it will be a very cool tool in your arsenal.

From the translator : The authors used iOS 5.1 because at the time of testing the WebPageTest.org site only supported this version of the system. IE8 and IE9, to see how WebP will work in these old browsers + these browsers are still important for their clients. Now there are a lot of online versions of converters: examples .