The Image Format Wars

In the late 1990’s we experienced the browser wars between Internet Explorer and Netscape Navigator, more recently the battle has waged on between IE, Firefox, Chrome, Safari and Opera.   Now be prepared for the next battle – the image format wars.   Browsers are now battling for a more optimized image format with Microsoft, Google, and Mozilla all introducing new image formats, but before we go into these new image formats let’s look at why this is emerging and the history behind web based images.

 

The most popular image formats on the web today are GIF, JPEG and PNG.  The oldest image format is the GIF, introduced in 1987, although the oldest its popularity is waning in favor of image formats with more colors options and better compression algorithms like JPEG (introduced in the early 90s) and PNG (introduced in 1995) .   These image formats have worked for many years so why the sudden interest in introducing new file formats, if it ain’t broke don’t fix it.  

 

 

Well, it’s not that the image formats are broken, but rather how they impact page performance is the issue.   The size of the average web page is growing exponentially and the largest contributor to that is images.    According to HttpArchive images comprise 65% of the content of a typical web page at just over 1MB in total size.  This presents a huge opportunity for improving the web browsing experience.  Doesn’t everybody want a faster loading web page and to use less data on their smartphones?  This has lead to the search for a way to optimize images without sacrificing quality.  

This brings us to the introduction of new image formats and encoding algorithms that are in  contention to improve the performance of images on the web.  Google introduced WebP , Microsoft introduced JPEG XR in IE 9 , and Mozilla announced earlier this year a new project entitled mozjpeg.  Let’s start with WebP and JPEG XR both provide significant savings when it comes to the size of images.   We did some testing recently to see how much improvement can be achieved with WebP and JPEG XR.

The test consisted of 417 JPEG images and 50 PNG images.   The results showed that both provided substantial benefits reducing the file size by over 50%.  

 

 

 

 

 

If the results are this good, why aren’t more sites using these formats?  The answer: browser compatibility.   WebP only works in Chrome and Opera while JPEG XR only works in IE.   If you want your users to see the benefits of these new formats you need to create 3 versions of every image, which can be time consuming.    Luckily the image optimization functionality in BIG-IP Application Acceleration Manager allows an administrator to click a single check mark enabling an image to be converted to the appropriate format on a per client basis.  This eliminates the need to create multiple versions of the same object and all users can benefit from the optimizations.

No, wait – not all users, only clients connecting with certain IE version, Chrome and Opera will benefit from the new format types.  This is where mozjpeg is looking to change the game.   Mozjpeg’s goal is to improve the compressibility of JPEGs without sacrificing quality.   The beauty of this project is that the file format would remain a JPEG meaning that every browser and user would be able to see the benefits of reduced image sizes.   It is interesting to track the progress of this project and see who will win the image wars, in the meantime optimize the images you can for the users that you can.