WebP Images & Performance
It's said that a picture is worth a thousand words, but online, a picture can be worth a thousand kilobytes or more! HTTP Archive shows that images make up 64% of a Web page's total size on average. With this in mind, image optimization is key, especially when you consider that up to 40% of users will abandon a request if it doesn't load within 3 seconds. The problem with image optimization comes when designers want to keep image file sizes small without sacrificing image quality. Past attempts to create new optimized image file types better than the standard JPEG, PNG and GIF formats have been unsuccessful.
WebP is an image file type that was created in 2010 and is currently being developed by Google. This image format provides lossless and lossy compression to images on the Internet. Several big names are campaigning for the use of WebP, most notably Google, Facebook, and Ebay.
At Aristotle, we are always experimenting with techniques that improve website performance for our clients, so we ran A/B tests to understand WebP's impact on image quality and how to best implement it in our clients' projects.
A major reason we considered using WebP is the smaller file size. According to Google:
- *WebP lossless image files are 26% smaller than PNGs. *
- *WebP lossy images files are 25-34% smaller than JPEG images at equivalent SSIM index. *
- WebP supports lossless transparency (also known as alpha channel) with just 22% more bytes.
Aristotle's tests have found pros and cons to the WebP image format:
|* Smaller file size||* Weak browser support|
|* Different compression algorithm||* Artifacting has plastic appearance|
|* Smoother color gradations||* Poor exporting interface|
|* Alpha channel mask|
WebP uses a new compression algorithm, so artifacting (distortion or degradation) looks different than with other file types. WebP does a nice job maintaining crisp edges in a photo but, of course, loses detail and textures as you would expect in a lossy file. Where a comparable JPEG file exhibits jittery artifacting in solid areas, WebP boasts smooth gradations down to the lowest quality settings. One downside of this is that human faces can take on a plastic or posterized appearance at lower settings.
There are a few other things to consider with the WebP image format:
Compression settings don't match up "one-to-one" with JPEGs. Don't expect a 50% quality JPEG to match a 50% quality WebP. Quality drops pretty sharply on the WebP quality scale, so it's best to start at a high quality and work your way down.
Another game-changing plus is the ability to add an alpha channel mask, much like a PNG. Unlike its lossless counterpart, however, you can often squeeze a usable WebP image to around 1/10 the size of its PNG equivalent. This is the real stand-out use for WebP, ushering in an army of options and features that would otherwise bring a website to a crawling halt with unwieldy file sizes. One real-world example compressed an 880kb PNG (24-bit with alpha channel) down to 41kb — a file savings of a 95%. While this is not the norm, it does illustrate the possibilities.
To further reduce the file size, we recommend omitting the metadata by unchecking "Save Metadata" in the dialogue. For even further compression savings, select "lossy alpha channel." Quality settings for the alpha channel mirror those of the image. For example, a 50% quality image will have a 50% quality lossy alpha channel. In our testing we expected artifacting around the masked edge, but there were also noticeable compression changes to the entire image. We certainly consider it an option to further shrink file sizes, but recommend closely monitoring the image quality when doing so. Also watch for unwelcome banding in the alpha channels with gradated fades.
We were excited to see that a Photoshop plugin-in was available for the WebP format. This allows an easy way to dial in quality settings for WebP images. The interface of the plug-in leaves something to be desired since it hasn't been fully adopted by Adobe Photoshop. At present, you cannot preview an image to assess quality settings, which is a major downside. As a workaround, you can use the Google Chrome browser for a quick comparison between files. It's also a bit awkward to access the save dialogue. To save time, we recommend setting up a keyboard shortcut to avoid repeated visits to the "Save as" drop down menu. In spite of these caveats, it's still worth the trouble.
With significant file size savings, good quality and game-changing alpha channel, WebP seems like a real contender among other image formats. While test results were optimistic, oddly there was no clear winner between formats. WebP often performed circles around the other formats, but JPEGs or 8-bit PNGs still occasionally beat WebP in size and/or quality. Be sure to do plenty of testing on your own before implementing WebP, as it may not be ideal for your needs.
After Aristotle designers determined that WebP would be an efficient tool to use in their process, we then turned to our developers to test implementation. WebP is only natively supported in Chrome, Opera, Opera Mini, Android Browser and Chrome for Android. Firefox, IE and Safari don't have native support, although Firefox has a history with WebP. Luckily, there are a few workarounds for the lack of browser support.
We ran four experiments to consider which direction to go.
The first test used a normal JPEG as a control, and the other three tests implemented the options listed below. We used a JPEG image and a WebP image of similar quality (269 kb JPEG and a 52 kb WebP). Here you can see the results from all four tests.
In test two, we included a 67kb WebP polyfill provided by Dominik Homberger. It allows WebP implementation on all major browsers, even IE 6 and up. This is a helpful polyfill because it doesn't require you to change the syntax of in existing code, just change .jpeg or .png to .webp and the polyfill will do the work for you.
Our next approach was to use the Picturefill polyfill to allow the use of
The fourth test used code in the .htaccess of the server to implement WebP. This option was provided by Vincent Orback. Using this approach, the .htaccess code will look for a WebP version of each image on a page. If the browser supports WebP and there's a WebP image available it, will use the WebP image rather than the JPEG or PNG. This is helpful and saves considerable time since you don't have to change the syntax of in the code or the extension of your images to .webp.
After reviewing the data, we determined that the WebP polyfill (Test 2) was the smallest implementation that worked on all browsers, but we weren't impressed with the Speed Index metric for this method.
Using the WebP polyfill seemed to load visually worse than the JPEG control test and the other implementations, except on iOS.
We also noticed that on iOS devices, file sizes were 100 kb more than the other devices. It seems that on iOS 5.1, IE 8, and IE 9 the WebP image gets downloaded 3 times. While the 2 extra requests are not ideal, this is still smaller than the JPEG equivalent. We haven't tested this on updated iOS versions so there's a chance this may be resolved for iOS 6 and later. We are inclined to use this implementation initially because of the better browser support.
While the WebP polyfill is a great patch for now, we know that this implementation won't be best in the future if other browsers begin supporting WebP. Our hope is that Safari, Firefox, and IE (particularly the Spartan Browser coming in Windows 10) will embrace the WebP image format soon. Once we begin seeing a larger adoption, we will implement the method used in Test 3, using the
WebP won't push JPEG or PNG out of the picture, but it is a superb tool to add to your arsenal. Get ready to welcome WebP and be prepared to do some of your own testing and comparison with each new project!
About Adrian James
Adrian James is a senior graphic designer at Aristotle Interactive. Designing award-winning work, he has produced a string of fifteen Bronze Quills, Addys and WebAwards. Adrian has crafted responsive website designs for tourism destinations such as Utah, Kentucky and Atlantic City. His knowledge of design extends to award-winning advertising campaigns and print work for a wide range of clients. A classically-trained violinist and studio musician in his spare time, Adrian is especially proud of his design work for pop culture icons Bob Marley, Elvis, Evanescence and Moby, including movie soundtrack and album covers, logos and websites.