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 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:

according to

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

GigaOM reports

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 

Firefox is considering support

 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  







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 

CDN Connect

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

That's a 78% size reduction

! 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:

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 

server-driven content negotiation

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


header has been overlooked by most browsers.

Ilya Grigorik

, developer advocate on the

Make The Web Faster

team at Google, summarized the



sent by various browsers


BrowserAccept Header Values
Internet Explorerimage/png,image/svg+xml,image/*;q=0.8, */*;q=0.5
Operatext/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1

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 

this Chromium bug


 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

bug for WebP support

 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,

Opera supports WebP


Chrome will implement

the Accept header soon, and 

Mozilla is taking a closer look


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

Nginx Log (11kb transferred):"GET /maxcdn/MaxCDN-WebP.png HTTP/1.1" 200 11581 HIT - "Opera/9.80 (Macintosh; Intel Mac OS X 10.8.3) Presto/2.12.388 Version/12.15"

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 (

X-Cache: HIT


Firefox ...

Firefox Firebug: Request and Response

Nginx Log (52kb transferred):"GET /maxcdn/MaxCDN-WebP.png HTTP/1.1" 200 52779 HIT - "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:19.0) Gecko/20100101 Firefox/19.0"

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

Make The Web Faster

 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:


















server {

   listen 80;


   set $webp "";

   if ($http_accept ~* image/webp) {

           set $webp "webp";


   location ~ /purge(/.*) {


           deny all;

           proxy_cache_purge my_diskcached ei8gd7lwnymbl2d.cdnconnect10$myae$webp$1$is_args$args;


   location / {


       proxy_cache_key ei8gd7lwnymbl2d.cdnconnect10$myae$webp$uri$is_args$args;



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

MaxCDN's network

, 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:

Want to try WebP?

CDN Connect

 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!