Published Tuesday 21st of October 2014 by Andy Talbot
The redtangle site uses some pretty large graphics, the spacemen graphics are fullHD with transparency, and that means that their file sizes are hefty. Not a problem if you're in a web design studio with a wonderfully fast internet connection, but unfortunately most people are not. The website already resizes images to deliver the best suited graphic to your needs, but even then, with transparency the file size can still be quite large.
Google have been creating a bit of a stir recently with their new image format webp, touted as being the single file format to replace jpg, png and gif files. It can do all the things those file types can do combined in one, and it does all this with a file size typically 25% smaller.
The downside so far though, it's so far only supported by Chrome, Opera and the Android browsers (caniuse.com). However Chrome is now the most popular browser, and on inspection of our own Google Analytics, 65% of our visitors use it. So clearly it was a viable option, but we needed to decide on how best to implement it.
We tried a Photoshop plugin to allow us to save the files directly, but it proved unreliable. Instead the best option we found was a command line tool cwebp, this was combined with a script to convert a folder full of jpg or png files in seconds. With no noticeable loss in quality, once converted, it was clear we were going to make a massive saving. The image assets of the website site saved as jpg and png total around 11MB but after conversion to webp these were down to 2.7MB. The assets are all uploaded to our Amazon cloud hosting, to be delivered at the fastest speed possible, and overall this has resulted in our home page average load time shrinking to appoximately one second for our Chrome visitors.
The last thing was to ensure we were only providing webp graphics to those people that can actually view them. We're doing this on the server side, we first check the user agent (the hidden information that says what browser is being used) and if it's Chrome or Opera then when writing any image paths to the page, we ensure we're using webp graphics rather than our jpg or pngs. It's as simple as that.
As we are no longer using scaled images for delivery to smaller devices running chrome or android, the images should appear crisper for high density displays, however it will mean bigger file sizes than needed. The next steps to a final solution will be to use webp graphics scaled to multiple sizes, and although this may result in excess time in the preperation stages, the savings in file size and load time will be greatly increased.