Cloudinary Blog

Automatic WebP format CDN delivery based on visitors browsers

by Itai Lahan
Using WebP file format selectively to boost site speed
One of the hardest optimization goals when showing images to your website (and mobile application's) visitors, is to minimize the image file size while maintaining high enough display quality.
 
Smaller image file sizes directly translate to faster load times, reduced bandwidth costs and improved user browsing experience. But small file sizes directly translate to lower image quality and may harm visitor satisfaction. Maintaining just the right balance is both crucial and hard.
 
As a result, it's quite rare to find a solution that reduces image file sizes without sacrificing image quality. Fortunately, this is exactly the case with Google's WebP image format.
 
WebP is a powerful image format that was first introduced by Google in 2010. Using advanced compression techniques, the WebP format encodes photos using files significantly smaller than the popular JPEG (lossy) and PNG (lossless) image formats.
 
But if it's such an amazing image format, why don't we see it in every website out there? The main setback to a widespread WebP image format adoption is that it's not (yet) widely supported by even the most modern web browsers. 
 
While Google's popular Chrome web browser and the Opera browser natively support WebP, Firefox and Internet Explorer do not. As a result, supporting WebP requires messing around with dynamically deciding whether to deliver WebP format or JPG/PNG images according to the browser used by each of your visitors.
 
A few weeks ago we introduced Cloudinary's support for the WebP format: How to support WebP images, save bandwidth and improve user performance. In that article, we described how you can set Cloudinary's jQuery plugin to check whether the browser supports WebP, and if so, tell Cloudinary to dynamically generate and deliver WebP files instead of standard JPG/PNG ones.
 
While the jQuery lazy-loading client-side approach has its advantages, it could have been much simpler if this entire logic was handled transparently for you on the server side. This is exactly what we've been working on in the past few weeks.
 
In this blog post we wanted to introduce Cloudinary's seamless support for dynamic delivery of WebP images.
 

Enabling automatic WebP delivery 

Cloudinary can now identify when an image URL was requested by a browser that supports WebP. In such a case, Cloudinary will automatically convert your image, on-the-fly, to the WebP format and deliver it cached and optimized through Akamai's CDN
 
To leverage this capability, and tell Cloudinary to automatically use WebP when applicable, all you need to do is add 'f_auto' (Format = Auto) to Cloudinary’s smart delivery URLs.
 
Below you can see two sample images. The image on the left uses a URL without Cloudinary's new 'f_auto' flag and is therefore delivered in JPG format across all browsers (while being scaled on-the-fly to 300px width with its aspect ratio retained). The image on the right includes 'f_auto' in its delivery URL and so delivered as WebP if you are using Google Chrome. The resulting WebP image weighs only 6.9KB, which is 60% smaller than its counterpart JPEG version delivered to our Firefox, Safari and IE visitors.
 
 
 JPG Image    WebP Automatic Image 
                              16.9KB JPG                                            6.9KB WebP (or 16.9KB JPG)
  
 
That's it. This little addition is all you need for your web application to load faster and save significant bandwidth costs. This is especially true if your website caters to "techies" that statistically use Chrome much more than others :)
 
Notes:
  • Pasting a URL with 'f_auto' in your Chrome's address bar will always return a JPG image. The automatic WebP delivery only works for images embedded in HTML pages.
  • ‘f_auto’ is only supported for Cloudinary users that use our Akamai CDN delivery. It is currently not supported for users with a dedicated CloudFront distribution.
  • For our transparent WebP support to work, the delivery URL has to explicitly include 'f_auto’. Therefore, you can't set the fetch format to 'auto' inside of a named transformation. Instead, you can use a named transformation while chaining 'f_auto' to the URL.
 

Enabling WebP delivery programmatically 

Cloudinary's client integration libraries already support the new 'f_auto'  feature. Here are a few examples of how to generate such URLs in your favorite development framework:
 
Ruby on Rails:
<%= cl_image_tag("sample.jpg", :width => 300, :crop => :scale, :fetch_format => :auto) %>
 
PHP:
<?php echo cl_image_tag("sample.jpg",
        array("width" => 300, "crop" => "scale", "fetch_format" => "auto")); ?>
 
Python & Django:
cloudinary.CloudinaryImage("sample.jpg").image(width=300, 
   crop="scale", fetch_format="auto")
 
Node.js:
cloudinary.image("sample.jpg", { width: 100, crop: "scale", fetch_format: "auto" })
.Net:
cloudinary.Api.UrlImgUp.Transform(
  new Transformation().Width(300).Height(130).Crop("scale").FetchFormat("auto")).
    BuildImageTag("sample.jpg");
 
Java & Android:
cloudinary.url().transformation(
  new Transformation().width(300).crop("fill").fetchFormat('auto')).
    generate("sample.jpg"); 


Remote fetching of existing images

So far our examples focused on WebP support for images that were uploaded to Cloudinary first, either using our upload API from your server code or directly from your visitor's browsers. 
 
In addition to direct uploads, Cloudinary also supports fetching images via their public URLs, manipulating these on-the-fly and delivering the resulting images optimized via a CDN (see this blog post for more details). 
 
This means, for example, that you can easily integrate Cloudinary with your website without modifying your infrastructure and code. Simply prefix your image URLs with Cloudinary's fetch URL.
 
With Cloudinary's new WebP support, you can now set the fetch format to 'auto' to dynamically convert images to the WebP format when applicable and improve your site's performance.
 
For example, the following URL delivers a picture of Usain Bolt from a remote Wikimedia Commons HTTP URL. The remote image is fetched by Cloudinary, stored persistently in the cloud, dynamically converted to WebP where supported and delivered optimized and cached through a high-end CDN. 
 
 
Usain Bolt - Fetch - WebP
 
 
Notice that WebP reduced the size of the image above by 50% from 33.6KB to 16.8KB without affecting the display quality in a visible way.
 
You can dynamically apply any of Cloudinary's image manipulations on the fetched image. The following example crops the image to a square, makes it lighter in color and rounds its corners:
 
 
Usain Bolt - Fetch - WebP with effects

Summary

The WebP format is a highly effective way to optimize your sites and apps. With Cloudinary’s WebP support, we hope we’ve made the WebP conversion and delivery process so simple its a no brainer to use, with nearly zero technical effort on your R&D and IT side.
 
Automatic WebP conversion and CDN delivery of WebP images is now available for all of our free and paid plans. 
 
It would be great if you try it out and let us know what you think. Any feedback or suggestion would be highly appreciated!
 

Recent Blog Posts

Taking the labor out of baby books

by Nicole Amsler
How Baby's Firsts save development time with Cloudinary
Cloudinary helps Baby’s Firsts App deliver images quickly and preserve consistency from app to print. Baby’s Firsts is a free iPhone app that helps parents collect photos, instantly share photos via Facebook, Twitter and Flickr, and produce photo albums of their baby’s first year. Using more than 300 creative, developmentally timed reminders to capture key moments and milestones, the easy-to-navigate app enables parents to store photos in the cloud and create customized photo pages that are then transformed into heirloom-quality, printed baby books. 
Read more

Lossy compression for optimizing animated GIFs

by Meir Feinberg
How to optimize animated GIFs with lossy compression

Animated GIFs keep getting more and more popular, but they are generally very big files with slow loading times and high bandwidth costs, while the format itself is quite old and not optimized for modern video clips. As developers, you need to allow users to upload their animated GIF files, but you also need to deliver them optimized, which can be a complex, time consuming process.

Read more
Building and scaling a cloud service for developers

Last month I was invited to speak at Daho.am, Munich's developers conference. This conference was organized by Stylight, a very successful fashion technology startup.  Stylight signed up for a free Cloudinary account about 3 years ago and similarly to Cloudinary back then, Stylight were quite a young startup. Since then both companies have grown impressively together and Stylight are now a premium customer of Cloudinary, managing hundreds of millions of images.

Read more
10 Startups managing images in the cloud, Part 6
Cloudinary’s customers can range in size, be found in a variety of verticals and boast multiple use cases. Large and small, our customers are our backbone and we like to support them by highlighting their stories on our blog.
 
Check out the ten featured startups below who are Cloudinary’s customers and utilizing the service as their image management system of choice.
Read more
Automatic visual image enhancement for web apps

Various factors can have an effect on the visual quality of photos captured by a wide variety of digital cameras. Technical limitations of cameras, coupled with changing conditions in which users take photos, results in a wide range of visual quality. Camera-related limitations arise from a combination of poor optics, noisy sensors, and the modest capabilities of mobile camera phones that are used to take photos in conditions that range from bright daylight to indoor scenes with incandescent light or even dark night scenes.

Read more