WebP: One image format to rule them all
#performanceI'm too old for this sh**.
This post has already become quite old, and a lot has changed in that field since I wrote it. The examples I provide might not work anymore or are not suitable for how we work today. Please be aware of that while reading it.
In my last article I wrote about the importance of images regarding performance. Hugo Giraudel pointed out, that I forgot to write about the WebP image format and he was right. So I needed to get myself familiar with this format in order to update my article. It turned it was impossible to summarise this amazing topic in a few sentences. This is why I decided to give WebP the attention it deserves and why I wrote this new little article about it.
WebP is a new image format by Google which can be used for all kinds of images for the web. It supports lossy and lossless image compression, as well as transparency. This means you do not have to think about if JPG, PNG or GIF would be the best decision for your needs. Additionally WebP images are 20-30% smaller in file size which is a lot. It achieves better compression by spending more CPU cycles. Compared to JPG, encoding and decoding of a WebP image is much slower, but due to the smaller file size it is still loaded faster.
I already wrote about the importance of images regarding front-end performance and how we can optimise them, but this even better. In a test for my own portfolio site I was able to reduce the data size by 37% from the already optimised files. This is incredible!
So why is not everybody already using WebP?
Support
A big downside here is the support. WebP is supported by Chrome, Opera and Android 4+. This means it cannot be used in all versions of IE and Firefox yet. But Mozilla is already reconsidering their former decision not to support WebP. File size reduction is just too important. They can't ignore that chance to make their browser and the web faster.
We decided to re-open this based on new data that shows that WebP has valid use cases and advantages. We will evaluate a refreshed patch and take it from there.(Andreas Gal, Mozilla)
Examples
So let us take a look at some examples. Ebay has already tested WebP on a site with 50 images. On WebPagetest you can see that WebP images are loaded much faster compared to JPGs.
Facebook has already tested this new image format too. Uploaded JPGs were converted to WebP files and delivered to browser which support that format. Problems occurred when users saved those images to their computer and tried to open them. WebP is not natively supported by Windows or OS X.
Personally, I am thrilled about WebP and progressive JPEGs, and I hope more browser providers will come on board to support WebP in the future.
Tools
Since WebP is still a new and young format nearly no applications support it natively. I guess this will change soon, but in the meantime we will have to extend our apps by our own.
There is a command-line converter tool by Google available for Windows, Linux and Mac OSX. Additonally there is also a handy online converter tool called IMG2WebP which is perfect for a quick look at WebP images and a Adobe Photoshop Plugin. Take some time and convert a bunch of your images, play with the settings and watch yourself getting excited about this image format too.
Client-side implementation
So what are our possibilities to work with this format today?
To be honest, there are just a view. On the client side we can detect if a browser supports WebP through JavaScript. There is a non-core detection available through Modernizr.
if ( !Modernizr.webp ) {
image.src="image.jpg";
}
If WebP is not supported, I just change the image src attribute. A big disadvantage here is, that the WebP version is loaded too, even if the browser doesn't support it. Upcoming CSS image fallbacks will do the trick for background-images. As you can see you will be able to list fallback images if a certain format is not supported or a file cannot be found. We need to provide the image format next to the WebP URL in order to prevent browsers to try to decode files they don't know. This would be the case when they don't support WebP images. This technique is by Jake Archibald.
Server-side implementation
We saw that the client-side implementation isn't very satisfying. What can do on the server?
An interesting technique here is to write a rule for file formats. First we are going to check browser support for WebP. If this is true, then we are going to deliver different files from the ones requested to the browser. Let's take a look at the code.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !(Chrome\/[0-8]|Android\s[0-3])\.
RewriteCond %{HTTP_USER_AGENT} Chrome [OR]
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond /www/htdocs/rootofyoursever/christoph/tests/webp/$1.webp -f
RewriteRule ^(images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
The cool thing here is, we do not have to change the markup. We are asking the server for a JPG or PNG file, but we are getting back a WebP one if supported.
Conclusion
WebP is definitely a great new image format that could change the way we handle images for the web. It combines all benefits from the formats we use today while providing a smaller file size. Awesome! Unfortunately support for WebP is very low yet and therefor I would't recommend implementing this new file format right now. Of course when you are dealing with lots of images the user doesn't need to download and browser support satisfies your needs, then WebP could improve your projects even today. Either way you should make yourself familiar with it, since it could become the web image format number one.