Changes afoot for web images?

In web development we've been using GIF, JPEG and PNG image files for quite a while now.

Behind the scenes though, things might be changing for images on websites. There are new image technologies out and about.

Why would we want to change things?  Speed of loading is the main reason. On average, over 60% of webpage's content can be taken up by images.  

If a page takes a long time to load, a visitor might go elsewhere.  Also, Google uses speed of loading as a ranking signal, so the faster images can be loaded, the better.

Let's have a look at the new image formats that are getting some attention.

WebP

Being developed by Google, this format can provide both lossless and lossy image compression with file sizes that are 20-30% smaller than traditional PNG and JPEG formats.

Another major benefit for WebP is that it has the ability to accommodate an alpha channel mask, potentially providing transparency to photo images which at the moment would need a PNG of sizable proportions.

More details on WebP here.

BPG

BPG is an alternative to JPEG, which again provides much smaller files, apparently even smaller than WebP.

It is also capable of producing animation files in the same way as an animated GIF file, but again much smaller.  In fact, the animation file produced can be half the size of the original MP4 file used.

More details on BPG here, with some good examples of decoded BGP images here.

Support for the new formats

Right now WebP will work natively (not surprisingly) in Chrome and Android Chrome, the Android browser, and also in Opera and Opera Mini.

BPG doesn't work on any browser natively yet.

But they can both be implemented on browsers that don't support them natively, but various methods including Javasript polyfills/decompilers.

Coupled with the imminent <picture> tag which will allow different images to be served up depending on the requesting device, these new formats may well become very common.

comments powered by Disqus