Smaller images with WebP - Yireo

Introducing WebP

I just mentioned WebP^[1] is new. That's actually not true at all. The WebP format has been out there for quite some time already. However, to my opinion, it has not received all the attention yet that it deserves. And that's a pity, because it has so much to offer: WebP offers an alternative to PNG, GIF and JPG. It allows images to be compressed using the WebP codec and this cuts the image size a lot - really a lot. In some cases, the sizes of photos (traditionally JPEGs) are downsized to 50% of the original - without less of quality.

There's a catch though: As of yet, not all browsers support WebP. Chrome and Opera do out of the box, however for Firefox an additional plugin is needed and IE does not support it all. This might keep you from implementing WebP, but you should not. Using smart JavaScript logic, WebP support can easily be detected, so that all browsers that know WebP actually use it.

For example, more than half of the web - in December 2014, this was 61% - uses Chrome, so is capable of viewing WebP images. If you would implement WebP to downsize all your images with 40% on average, this would result in a 20% reduce of bandwidth: Every Chrome user will thank you for smaller webpages and a faster browse experience. And more and more browsers^[2] are supporting WebP. It is a win-win situation.

How WebP comes to live on your site

The entire WebP implementation is kind of technical. Usually (or at least with us), it goes as follows: To make sure images are served as WebP to Chrome users and JPEG to other users, the HTML is modified so that the img element no longer has a src attribute but some kind of other attribute that points to the original image. Next, some detection of WebP takes place: This involves user agent checks, cookies and JavaScrip generated WebP images. Depending on the outcome of these checks, WebP is either used or not. If WebP is used, the img element gets a src attribute pointing to the WebP image. Alternatively, the src attribute points to the original image. This works quite smoothly actually, once implemented correctly.

To use a WebP image on your site, you first have to create it. The Google project site for WebP^[3] includes binaries that you can install on your server. This allows for manual conversion which is quite fast as long as you are not trying to convert too many images at once - count on about 100ms for small images and about 1 second for photos. Besides the command line tools, there is also a PHP GD implementation available that allows for the automatic generation of WebP images. Both these methods are implemented by our extensions.

Our extension make your life easier

While the previous paragraph explained a technical way of implementing WebP, you don't need to worry about these technicalities: Our extensions do all the hard work for you. Simply install our Joomla plugin^[4] or our Magento module^[5] and you are just about done. The detection of WebP support is handled by our extension. Even the conversion of the original JPGs and PNGs is done automatically for you.

The only thing that requires a bit more thinking over, is the conversion. As mentioned earlier, the conversion is either based on the command line tools, or on a PHP GD implementation. Our extensions support both methods. However, if you want to use the command line tools, you will need to install those yourself on your server - usually, shell access is needed for this (so, something for the server admin). If you don't have server access, you can also opt for the PHP implementation instead. This works out of the box ... Well, if you are using a fresh PHP version.

Get your PHP version up to date

The recent updates of our extensions implement this new PHP GD support for WebP. However, it was only added to PHP 5.5.0 and later. Currently, a lot of hosts are still running PHP 5.3, while luckily enough PHP 5.4 is gaining momentum. It is a pity that this process is kind of slow. A lot of hosting providers are hesitant to migrate to newer PHP versions, most likely because it simply gives them extra work. And again, there is so much to gain. With PHP 5.5, code performance has been improved a lot - really a lot -, resulting in faster websites simply by upgrading PHP.

Both Joomla 3 and Magento 1.9 run smoothly and stable under PHP 5.5. We are running and supporting numerous sites ourselves under 5.5 and haven't had any issues so far. As soon as you do upgrade to PHP 5.5 yourself, cool new technologies like WebP require just a few simple steps of installing our free extensions. Gaining performance becomes easier and easier. So get yourself updated and gain from it!