Cloudinary WebP | Boost Site Speed by Auto-Converting Images to WebP

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 file 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 file format adoption is that it’s not (yet) widely supported by even the most modern web browsers.

While Google’s popular Chrome web browser, Safari, and the Opera browser natively support WebP, Internet Explorer does not. As a result, supporting WebP requires messing around with dynamically deciding whether to deliver WebP file format or JPG/PNG images according to the browser used by each of your visitors.

Cloudinary supports WebP, too: 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.

In this blog post we’ll explore Cloudinary’s seamless support for dynamic delivery of WebP images.

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 file 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.

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” who statistically use Chrome much more than others 🙂

• ‘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.

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

cloudinary.url().transformation(
  new Transformation().width(300).crop("fill").fetchFormat('auto')).
    generate("sample.jpg");

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, transforming 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.

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 transformations on the fetched image. The following example crops the image to a square, makes it lighter in color and rounds its corners:

The WebP file format is a highly effective way to optimize your sites and apps. With Cloudinary 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.

When you sign up for Cloudinary, you can get Automatic Cloudinary WebP conversion and CDN delivery of WebP images for free and for life (and all of Cloudinary, too).