How To Reduce Image Size With WebP Automagically » MaxCDN Blog

This guest post is by Adam Bradley, founder and developer of CDN Connect. He specializes in image optimization, resizing, content-aware cropping, and responsive web design, with the goal of keeping content strategies and workflows simple.

 Browsers may use the

header to indicate supported content types. This lets you serve optimized images to minimize bandwidth and improve page load, without any changes to HTML/CSS or the images themselves. Here's how:

• The WebP image format offers better compression and smaller file sizes
• The HTTP Accept header lets origin servers determine the best image format to send the browser
• Services like CDN Connect can send back WebP images (where supported), without a single site change

The Problem: Big Images

It’s common to minify CSS and JavaScript files by removing whitespace and comments, renaming variables, and a few other tricks. The main benefit is reducing download times and providing visitors with a faster page load. But on the average webpage, we're overlooking the gigantic elephant in the room: images. Images can dwarf text files like CSS and JavaScript:

, they comprise over 60% of the transfer of average webpage.

that webpages grew by 50% between November 2010 and May 2012, and estimates an average size of 2MB by 2015. Combine this growth with the increasing use of mobile devices (i.e., expensive, capped bandwidth), and we're heading in the wrong direction.

The Solution: Optimize Images With WebP

Fortunately, Google and other companies are working to reduce bandwidth usage. A major achievement is a new image format, 

, which handles lossy (JPEG) and lossless (PNG) images, all while reducing file sizes. According to Google:

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels. 

Chrome and Opera support WebP, and 

 as well. With increasing adoption and bandwidth benefits, WebP may become the go-to web image format.

This is great news, but WebP raises several questions, especially for graphic designers, web designers and developers. How can we use WebP without an involved manual process? How can we serve images to browsers that don't support WebP? How can we update existing references to our  

,

and

files?

Wouldn’t it be great if we could upgrade to WebP Automagically?

Don't believe me? Let's see it in action. The example image below looks the same for all visitors: it's served as WebP if supported, and PNG otherwise. The original PNG file (exported from Photoshop) was 52kb.

But with 

’s automatic image re-encoding, this 52kb PNG shrunk to a 11kb WebP image.

! Just imagine this image was referenced on every page of your site, and you had handfuls of similar images to download. The potential bandwidth savings and performance improvements are enormous. Additionally, there were no site changes:

• No JavaScript hacks
• No DOM manipulation
• No edits to HTML or CSS
• CDN Connect + WebP just works

For this image, the 78% size reduction worked extremely well. Google found the average savings around 25-34%, still a sizable improvement.

The “Accept” Header Has The Goods 

CDN Connect and

collaborated to make using WebP seamless, and it boils down to using the

HTTP request header. Every browser request includes details like the software platform, cookies, language settings, and so on. For us, the

header is the key: the browser tells the server, “Hey, here are the file types I understand.”

Officially, the HTTP/1.1 protocol solved 

 years ago (fancy jargon, I know). But until recently, the

header has been overlooked by most browsers.

, developer advocate on the

team at Google, summarized the

headers

:

Opera is the only browser that can both view WebP images and officially accepts the 

content type. Chrome can view WebP, but at the time of this writing, doesn’t specify it in the header. The good news is that according to 

, 

 will be added to the

header soon (and given the amazing rate of Chrome's development, we're not worried about waiting long). The Firefox

 includes the suggestion “it would he helpful if your changes also included modifying the

header for image and HTML requests”. Because Firefox made a similar change when supporting PNG (adding 

 to the accept header), we imagine the same will happen for

. In summary,

today,

the Accept header soon, and 

.

Server-side Content Negotiation In Action

Let's load images with Opera, which supports WebP, and see the request and response headers (screenshot below). Even though the request for "MaxCDN-WebP.png" includes  

 in the

header, the content-type of the response is still

. Even though every browser requests the same url (the ".png"), the server decided the WebP format was the best one to send back. Remember, a filename is just a name: the content-type determines what sort of file it is.

Opera Dragonfly: Request and Response

Now let's try Firefox. Notice that

is missing from the

header, and the server responds with the default image encoding (PNG). Any browser without declared WebP support will get the PNG version. Additionally, notice the file was correctly cached by Nginx (

).

Firefox Firebug: Request and Response

Caching on the Edge

MaxCDN has a worldwide network of Nginx servers, but it can be tricky to cache different content types at the same URL as we did above (both image versions showed X-Cache: HIT). If done incorrectly, a cached WebP image could be sent to a browser that doesn't support it.

We worked with Google's

 team and quickly found a solution. Similar to how the

header informs the server whether the browser can handle GZIP compression, we'll use the

header to distinguish the image formats internally. Here's how MaxCDN configured Nginx to cache images:

Notice how the "

" variable gives us different cache keys for the various versions. Previously, similar content negotiation required a giant database of User-Agent strings to determine browser capabilities (which, as you can imagine, needs constant maintenance for new devices and browsers). And server-driven content negotiation often results in the fragmentation of cached data, or constant image processing. But with

, you can take advantage of powerful, globally-available caching methods available today.

Opt-In for the Win Win

Modern browsers with the

header let origin servers optimize image delivery. With server-side content negotiation, your entire organization gets awesome benefits:

• Graphic designers do not have to change workflows or manually resave files as WebP
• Web designers do not have to update any HTML or CSS
• Web developers do not need hacks to manually check for WebP support
• Existing caching mechanisms can be used
• Outbound bandwidth cost will be lowered
• Visitors will experience your site with better load times

Want to try WebP?

 will dynamically convert images to WebP without any code changes, providing the benefits above. For customers who opt-in to this feature, all configuration happens automatically. CDN Connect removes the burden of image resizing, content-aware cropping, image optimisation and file format conversion, all while hosting files from a fast, worldwide content delivery network built for a team environment. Start using WebP today!