You are viewing the legacy StackPath SecureCDN Help Center. Please use if you signed up after July 1, 2018 or log in through

StackPath Support

WebP Image Resizing Walkthrough

A straight to the point walkthrough of how to optimize and resize your WebP Images on your website.

Browsers may use the Accept 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 MaxCDN and StackPath 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: according to, they comprise over 60% of the transfer of average webpage. GigaOM reports that web pages 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, WebP, 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 last we heard, 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  .jpg.pngand .gif files?


The “Accept” Header Has The Goods 

MaxCDN and StackPath made using WebP seamless, and it boils down to using the Accept HTTP request header. Every browser request includes details like the software platform, cookies, language settings, and so on. For us, the Accept 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. But until recently, the Accept header has been overlooked by most browsers.

Ilya Grigorik, developer advocate on the Make The Web Faster team at Google, summarized the Acceptheaders sent by various browsers:

Browser Accept Header Values
Chrome image/webp, image/*,*/*;q=0.8 - */* (before webp support)
Safari */*
Firefox */* (since Firefox 47) - image/png,image/*;q=0.8,*/*;q=0.5 (before)
Internet Explorer image/png,image/svg+xml,image/*;q=0.8, */*;q=0.5
Opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1

Opera and Chrome are browser that can both view WebP images and officially accepts the image/webpcontent type.

In summary, Opera and Chrome are supporting webp, 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  image/png in the Accept header, the content-type of the response is still image/webp. 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 image/webp is missing from the Accept 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 Accept-Encoding header informs the server whether the browser can handle GZIP compression, we’ll use the Accept 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 “$webp” 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 and StackPath's network, you can take advantage of powerful, globally-available caching methods available today.

Opt-In for the Win Win

Modern browsers with the Accept 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

Enabling WebP for your site

I order to enable WebP on MaxCDN and StackPath side, simply enable the Enable WebP option in your MaxCDN pull zone or StackPath site under Edge Settings.






Return to top