Akamai Diversity
Home > Web Performance > Extreme Image Optimization: WebP & JPEG XR in Aqua Ion

Extreme Image Optimization: WebP & JPEG XR in Aqua Ion

Images are probably the simplest component on a web page today. They don't block the parsing of the HTML and don't get in the way of rendering other components. Generally, they just sit there and look pretty.

However, for what they lack in complexity, they compensate in volume. According to the HTTP Archive, images make up 61% of the bytes on the average desktop homepage, and 65% of the bytes on mobile. And to make things worse, the number of image bytes has grown by over 30% on the average web page in the last year alone!\

 

image transfer size.png

 

These stats demonstrate how important it is to minimize image bytes to the maximum extent. Various image compression techniques and smart image loading approaches like LQIP and responsive images can dramatically reduce the number of bytes required to communicate the same visual appearance.

Akamai's Aqua Ion has been applying the best Image optimizations possible for a long while now, and with the latest release our Image Optimizations got a significant new boost, by introducing support for WebP & JPEG XR.

WebP is a new image format, introduced by Google three years ago. Being 15 years or more newer than the common web image formats, WebP encompasses many technological advances developed during that time, along with some unique innovations. For instance, it uses a better mathematical encoding for compression; uses prediction logic adopted from the video encoding world; and uses a dynamic color palette to encode different parts of the image. As a result, WebP images tend to require 25-50% fewer bytes than the equivalent quality JPEG or PNG image.

JPEG XR is also a new image format, developed as an ISO Standard and backed by Microsoft. JPEG XR also builds on many technological advances, and - while very different than WebP - achieves significant file size reductions, often cutting image bytes by a third. In addition, JPEG XR supports progressive rendering, which WebP does not.

Both of these image formats are awesome, and are far better than their predecessors. However, deploying new image formats on the web isn't easy. Being new also means JPEG XR & WebP are not yet widely supported. WebP is only supported by Chrome, Opera and newer Android devices. JPEG XR is supported to a limited extent in IE 9, and only fully supported in IE 10+. This means that if you simply overhaul your images to any one of these formats, your site will be broken for a huge portion of your users.

Luckily, Aqua Ion is already setup to provide Situational Performance Optimization, and optimizes differently for different browsers, leveraging the relevant browser's capabilities. With our November launch, we've added support for WebP & JPEG XR, automatically converting images on your site to those formats and serving them only to the browsers that support them. Other browsers would still benefit from our existing Image Compression techniques, and we will start delivering the new formats to them as they build support for them.

In addition, if you want to roll your own version of Situational Performance and serve WebP or JPEG XR images only to supporting clients, you can use the flexible Property Manager UI to intelligently serve the right image to the right client (though in this case, you'll still be on the hook for creating the image versions themselves). This slide shows a simple example of how you can do deliver WebP using Accept Negotiation, which can be easily tuned to fit into your website's logic.

To summarize, WebP & JPEG XR are huge steps forward in the world of Image Compression. You can start reaping the benefits of them today by using Aqua Ion, or using Property Manager to intelligently deliver your homemade pictures, and get a substantial boost to your page load times.

Guy Podjarny is CTO for the Web Experience Business Unit at Akamai

Leave a comment