{"id":21210,"date":"2013-09-30T13:06:23","date_gmt":"2013-09-30T13:06:23","guid":{"rendered":"http:\/\/transparent_webp_format_cdn_delivery_based_on_visitors_browsers"},"modified":"2025-11-06T12:47:45","modified_gmt":"2025-11-06T20:47:45","slug":"transparent_webp_format_cdn_delivery_based_on_visitors_browsers","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/transparent_webp_format_cdn_delivery_based_on_visitors_browsers","title":{"rendered":"Cloudinary WebP | Boost Site Speed by Auto-Converting Images to WebP"},"content":{"rendered":"
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.<\/div>\n
<\/div>\n
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.<\/div>\n
<\/div>\n
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<\/strong>.<\/div>\n
<\/div>\n

The Power of WebP Format<\/h2>\n
<\/div>\n
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.<\/div>\n
<\/div>\n
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.<\/div>\n
<\/div>\n
\n

While Google\u2019s popular\u00a0<\/span>Chrome<\/b>\u00a0web browser, <\/span>Safari<\/b>, and the\u00a0<\/span>Opera<\/b>\u00a0browser 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.<\/span><\/p>\n

Cloudinary supports WebP, too:<\/span>\u00a0<\/span>How to support WebP images, save bandwidth and improve user performance<\/b><\/a>. <\/span>In that article, we described how you can set Cloudinary\u2019s 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.<\/span><\/p>\n

In this blog post we\u2019ll explore\u00a0<\/span>Cloudinary\u2019s seamless support for dynamic delivery of WebP images<\/b>.<\/span><\/div>\n

<\/div>\n

Cloudinary WebP <\/span>| Enabling Automatic WebP Delivery<\/span><\/h3>\n
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<\/strong>.<\/div>\n
<\/div>\n
To leverage this capability, and tell Cloudinary to automatically use WebP when applicable, all you need to do is add ‘f_auto<\/span><\/strong>‘ (Format = Auto) to Cloudinary\u2019s smart delivery URLs.<\/div>\n
<\/div>\n
Below you can see two sample images. The image on the left uses a URL without Cloudinary\u2019s new \u2018f_auto\u2019 flag and is therefore delivered in<\/span>\u00a0<\/span>JPG<\/span><\/a>\u00a0<\/span>format across all browsers (while being scaled on-the-fly to 300px width with its aspect ratio retained). The image on the right includes \u2018f_auto\u2019 in its delivery URL and so delivered as WebP if you are using Google Chrome. The resulting WebP image weighs only\u00a0<\/span>6.9KB<\/b>, which is\u00a0<\/span>60% smaller<\/b>\u00a0than its counterpart JPEG version delivered to our IE visitors.<\/span><\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,f_auto\/nice_beach.jpg<\/strong><\/a><\/div>\n
<\/div>\n

\"JPG<\/a>\u00a0 \u00a0\u00a0\"Image<\/a><\/p>\n

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 16.9KB JPG \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a06.9KB WebP (or 16.9KB JPG)<\/span><\/div>\n
<\/div>\n
<\/div>\n
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 \ud83d\ude42<\/div>\n
<\/div>\n
Notes:<\/strong><\/div>\n
\n