{"id":21202,"date":"2013-07-18T14:47:51","date_gmt":"2013-07-18T14:47:51","guid":{"rendered":"http:\/\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance"},"modified":"2025-11-06T16:04:16","modified_gmt":"2025-11-07T00:04:16","slug":"how_to_support_webp_images_save_bandwidth_and_improve_user_performance","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance","title":{"rendered":"WebP Example | Automatically Dynamically Deliver WebP Images by Browser"},"content":{"rendered":"
Modern image compression techniques have had a large impact on our lifestyle. Digital cameras can save thousands of high-quality photos on a single memory card, smartphones can quickly share high resolution images on the fly, and websites and mobile apps can show rich media quickly. All of this just couldn’t have worked if image data was stored at its original, raw form.<\/div>\n
<\/div>\n
In this article, we\u2019ll review how to deliver WebP images automatically to the right browsers and include a<\/span> WebP example image<\/span> to show you how<\/span>.<\/span><\/div>\n

JPEG, PNG, and WebP<\/h2>\n
Through our apps, browsers and devices, we all use the JPEG lossy format<\/strong> to manage photos efficiently and the PNG lossless format<\/strong> to deliver graphics, icons and drawings.<\/div>\n
<\/div>\n
However, while video formats have gone a long way these past few years, image formats have stayed somewhat behind.<\/div>\n
<\/div>\n
This changed at 2010 when Google first introduced the new WebP<\/strong> (pronounced “Weppy”) format, an open sourced image format<\/a> that supports both lossy and lossless image compressions.<\/div>\n
<\/div>\n
WebP generates files significantly smaller than the popular JPEG and PNG formats. WebP also supports many advanced features, such as transparencies in its lossy mode, and more eye pleasing degradation in image quality on its lower quality, higher compression settings.<\/div>\n
<\/div>\n
Smaller files mean less bandwidth consumption and reduced traffic costs for your online services and better user experience with faster delivery & image sharing times for users of your web sites and mobile apps.<\/div>\n
<\/div>\n
In this blog post we wanted to introduce Cloudinary’s new cloud-based support for on-the-fly generation of WebP images<\/strong>.<\/div>\n
<\/div>\n

Generating Smaller Images of Equal (or Better) Quality<\/h2>\n
If you are already familiar with Cloudinary, you probably know that you can tell Cloudinary to do image format conversions on-the-fly simply by changing the file extension of your CDN delivered URLs.<\/div>\n
<\/div>\n
Consider for example, a JPG image that was uploaded to the cloud with the public ID ‘sample’. Now we want to embed a 300x200px thumbnail of this image on our website.<\/div>\n
<\/div>\n

Webp Browser Support<\/h2>\n
<\/div>\n
The left image below is generated by Cloudinary using the JPG<\/a> format while the right image is generated using the WebP example image<\/span> format. Note that you need a Google Chrome browser to view the WebP image correctly.<\/div>\n
<\/div>\n
…\/image\/upload\/w_300\/sample.jpg<\/a><\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0…\/image\/upload\/w_300\/sample.webp<\/a><\/strong><\/div>\n
<\/div>\n

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

\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a027.9KB JPG \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a012.4KB WebP<\/span><\/div>\n
<\/div>\n
If you check the network stats, you will notice that the JPG<\/strong> file is 27.9\u2009KB<\/strong> while the WebP<\/strong> file is just 12.4\u2009KB<\/strong> in size and looks almost the same. This means that we’ve just saved 56%<\/strong><\/span> in bandwidth. If your website includes many images, you can save half of your traffic, get your site to load twice as fast and make your visitors happy.<\/strong><\/div>\n
<\/div>\n
If you use our client libraries, either concatenate ‘.webp’ to the public ID or set the ‘format<\/strong>‘ parameter to ‘webp<\/strong>‘. For example, in Ruby on Rails and PHP:<\/div>\n
<%= cl_image_tag(\"sample.webp\", :crop => :scale, :width => 300) %>\n<\/pre>\n
<?php echo cl_image_tag(\"sample\", array(\"format\" => \"webp\", \"width\" => 300, \n                        \"crop\" => \"scale\")); ?>\n<\/pre>\n
<\/h3>\n
Lower Image Quality Equals Smaller File Size<\/h2>\n
JPG and WebP are lossy formats, allowing you to control the quality of the target image.<\/div>\n
<\/div>\n
There’s a clear tradeoff between the target image’s quality and its generated file size. In many cases, you will be able to considerably reduce the quality and size of your images while your users will barely notice the difference.<\/div>\n
<\/div>\n
The JPEG format has noticeable artifacts in lower quality levels, especially if fine details or texts are involved. The WebP format has less noticeable artifacts but tends to generate a slightly blurry image in its lower quality settings.<\/div>\n
<\/div>\n
You can test that yourself by setting Cloudinary’s ‘quality<\/strong>‘ parameter (or ‘q<\/strong>‘ for URLs) to any value between 1 to 99 (the default is 90).<\/div>\n
<\/div>\n
The following<\/span> WebP example image<\/span> comparison reduces the quality of the sample image to 30%. On the left there\u2019s a JPG of 30% quality and on the right a WebP of 30% quality.<\/span><\/div>\n
<\/div>\n
…image\/upload\/w_300,q_30\/sample.jpg<\/a><\/strong>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0…\/image\/upload\/w_300,q_30\/sample.webp<\/strong><\/a><\/div>\n
<\/div>\n
\"Image\u00a0 \u00a0\"Image<\/p>\n
\u00a0\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a010.6KB JPG \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a07.1KB WebP<\/span><\/div>\n
<\/div>\n
The sharp-eyed will notice the difference. On the other hand, the drastic quality reduction still resulted in an image that can be considered decent, especially when using the WebP format.<\/div>\n
<\/div>\n
The JPG<\/strong> of 30% quality is 10.6KB<\/strong> while the WebP<\/strong> of 30% quality is just 7.1KB<\/strong> in size.<\/div>\n
<\/div>\n
In this comparison, the WebP format saved 33% in size, which is very nice. It’s interesting to notice that this low quality WebP is just 25%<\/strong><\/span> the size of the original JPG while delivering a comparable result, quality-wise.<\/div>\n
<\/div>\n
The following Node.js and Django examples generate delivery URLs similar to the example above:<\/div>\n
cloudinary.image(\"sample.webp\", { width: 300, crop: 'scale', quality: 30 });\n<\/pre>\n
cloudinary.CloudinaryImage(\"sample.webp\").image(width = 300, \n                                                crop = 'scale', quality = 30)\n<\/pre>\n
<\/h3>\n
Semi-Transparent Images<\/h2>\n
Recently, Facebook, Google+ and many other websites, have started to display user profile pictures with a completely circular crop. In order to display such circular images on a non-solid or changing background, the images need to be semi-transparent. The JPG format doesn’t support transparent pixels, so you might be forced to use PNG which is far from optimal for this purpose.<\/div>\n
<\/div>\n
The following example uses Cloudinary to generate a circular face-detection based thumbnail in the JPG format. The JPG<\/strong> format is effective for this image and takes just 13.6KB<\/strong>. However, as you can see, you cannot place it on a non-white background.<\/div>\n
<\/div>\n
<\/div>\n
…\/image\/upload\/w_200,h_200,c_thumb,g_face,r_max\/face_left.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"<\/div>\n
<\/div>\n
<\/div>\n
In order to make the edges transparent, we convert the image to the PNG<\/strong> format. As you can see below, it looks great. But the resulting image is 63.6KB<\/strong> in size which is almost x5<\/strong> bigger than the JPG version. This will waste bandwidth & money and will harm the user experience.<\/div>\n
<\/div>\n
…\/image\/upload\/w_200,h_200,c_thumb,g_face,r_max\/face_left.png<\/a><\/strong><\/div>\n
\u00a0<\/strong><\/div>\n
\"Image<\/div>\n
<\/div>\n
The example below generates the same image with the WebP<\/strong> format. The image looks great, the edges are transparent and the file is just 9.8KB<\/strong> in size, which is even smaller than the non-transparent JPG version.<\/div>\n
<\/div>\n
…\/image\/upload\/w_200,h_200,c_thumb,g_face,r_max\/face_left.webp<\/a><\/strong><\/div>\n
\u00a0<\/strong><\/div>\n
\"\"<\/div>\n
<\/div>\n
Lossless WebP Images<\/h2>\n
Each<\/span> WebP example image<\/span> above used the lossy WebP format with a 90% quality, or lower.<\/span><\/div>\n
<\/div>\n
WebP also supports a lossless format<\/strong> similar to the PNG format. This lossless format is useful for rasterized vector graphics (e.g., logos), that might be visibly degraded in quality using the lossy format.<\/div>\n
<\/div>\n
In order to generate a lossless WebP file, simply set Cloudinary’s ‘quality<\/strong>‘ parameter to 100<\/strong>:<\/div>\n
<\/div>\n
…\/image\/upload\/w_300,q_100\/cloudinary_icon.webp<\/a><\/strong><\/div>\n
\u00a0<\/strong><\/div>\n
\"Image<\/strong><\/div>\n
<\/div>\n
Same example in Ruby on Rails:<\/div>\n
<%= cl_image_tag(\"sample.webp\", :quality => 100) %>\n<\/pre>\n
<\/h3>\n
Format Adoption<\/h2>\n
As mentioned above, not all browsers support the WebP format yet.<\/div>\n
<\/div>\n
At present, WebP is supported by Google Chrome, Android 4.0+, and Opera. This is a serious disadvantage, as you’ll need to selectively decide when to to utilize it.<\/div>\n
<\/div>\n
On the other hand, Chrome is quite popular, especially if you have an application targeted on early adopters and techies. Even if you improve the user experience only for your Chrome users and save only the part of your bandwidth that is consumed by Chrome, it might still be worth the hassle of using WebP.<\/div>\n
<\/div>\n
For example, below you can see the statistics of Cloudinary’s web site for the last 30 days. Chrome is responsible for 62%<\/strong> of our traffic.<\/div>\n
<\/div>\n
\"Image<\/div>\n
<\/div>\n
Dynamic WebP Generation Based on Visitor’s Browser<\/h2>\n
To support serving webp only to Chrome\/Android4\/Opera visitors, you can use Javascript code to lazy load images according to your visitors\u2019 browsers.<\/div>\n
<\/div>\n
Cloudinary’s jQuery plugin allows you to dynamically generate delivery URLs that will transform your images on the fly and deliver the result through a fast CDN with advanced caching.<\/div>\n
<\/div>\n
For example, you can define image tags in your HTML page by setting the ‘src<\/strong>‘ attribute to a blank image and set the ‘data-src<\/strong>‘ attribute to the public ID<\/strong> of the actual image uploaded to Cloudinary (‘sample<\/strong>‘ in this example).<\/div>\n
<img src=\"blank.png\" width=\"150\" height=\"100\" data-crop=\"fill\" data-src=\"sample.jpg\"\/>\n<\/pre>\n
The following jQuery code will convert all image tags to dynamically generated image URLs instead of the placeholder blank image.<\/div>\n
$('img').webpify();\n<\/pre>\n
The page is loaded quickly without waiting for the images to load. Afterward, the jQuery code above will dynamically update the image tags to display either a WebP image or a JPG image, depending on whether there is\u00a0WebP browser support or not.<\/div>\n
<\/div>\n
Chrome result:<\/div>\n
<img src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_fill,h_100,w_150\/sample.webp\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width=\"150\" height=\"100\" data-crop=\"fill\" data-src=\"sample.jpg\">\n<\/pre>\n
<\/div>\n
Other browsers result:<\/div>\n
<img src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_fill,h_100,w_150\/sample.jpg\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0width=\"150\" height=\"100\" data-crop=\"fill\" data-src=\"sample.jpg\">\n<\/pre>\n
See our documentation<\/a> for more details about the jQuery plugin.<\/div>\n
<\/div>\n
Summary<\/h2>\n
Web sites and apps are becoming more and more media-rich. It’s important to keep track of our bandwidth utilization, optimize downloads and uploads time and improve our users’ experience.<\/div>\n
<\/div>\n
The WebP format is another great tool to achieve our goals. With Cloudinary’s on-the-fly, cloud-based WebP image format conversion, this becomes much simpler.<\/div>\n
<\/div>\n
The WebP format support is available for all our free and paid plans. Sign up now<\/a> for a free account if you haven’t done so already.<\/div>\n","protected":false},"excerpt":{"rendered":"
Modern image compression techniques have had a large impact on our lifestyle. Digital cameras can save thousands of high-quality photos on a single memory card, smartphones can quickly share high resolution images on the fly, and websites and mobile apps can show rich media quickly. All of this just couldn’t have worked if image data […]<\/p>\n","protected":false},"author":41,"featured_media":21203,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[91,165,214,227,229,257],"class_list":["post-21202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-django","tag-image-transformation","tag-node","tag-performance-optimization","tag-php","tag-ruby-on-rails"],"acf":[],"yoast_head":"\nWebP Example | Automatically Dynamically Deliver WebP Images by Browser<\/title>\n<meta name=\"description\" content=\"How to check for browser support and auto-generate WebP images to reduce bandwidth, improve page load speed and support transparency, lossless images and more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebP Example | Automatically Dynamically Deliver WebP Images by Browser\" \/>\n<meta property=\"og:description\" content=\"How to check for browser support and auto-generate WebP images to reduce bandwidth, improve page load speed and support transparency, lossless images and more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-18T14:47:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T00:04:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"WebP Example | Automatically Dynamically Deliver WebP Images by Browser\",\"datePublished\":\"2013-07-18T14:47:51+00:00\",\"dateModified\":\"2025-11-07T00:04:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\"},\"wordCount\":1451,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA\",\"keywords\":[\"Django\",\"Image Transformation\",\"Node\",\"Performance Optimization\",\"PHP\",\"Ruby on Rails\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2013\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\",\"url\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\",\"name\":\"WebP Example | Automatically Dynamically Deliver WebP Images by Browser\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA\",\"datePublished\":\"2013-07-18T14:47:51+00:00\",\"dateModified\":\"2025-11-07T00:04:16+00:00\",\"description\":\"How to check for browser support and auto-generate WebP images to reduce bandwidth, improve page load speed and support transparency, lossless images and more.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA\",\"width\":1540,\"height\":847,\"caption\":\"Image showing graphic of the Webp logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebP Example | Automatically Dynamically Deliver WebP Images by Browser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WebP Example | Automatically Dynamically Deliver WebP Images by Browser","description":"How to check for browser support and auto-generate WebP images to reduce bandwidth, improve page load speed and support transparency, lossless images and more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance","og_locale":"en_US","og_type":"article","og_title":"WebP Example | Automatically Dynamically Deliver WebP Images by Browser","og_description":"How to check for browser support and auto-generate WebP images to reduce bandwidth, improve page load speed and support transparency, lossless images and more.","og_url":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance","og_site_name":"Cloudinary Blog","article_published_time":"2013-07-18T14:47:51+00:00","article_modified_time":"2025-11-07T00:04:16+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance"},"author":{"name":"","@id":""},"headline":"WebP Example | Automatically Dynamically Deliver WebP Images by Browser","datePublished":"2013-07-18T14:47:51+00:00","dateModified":"2025-11-07T00:04:16+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance"},"wordCount":1451,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA","keywords":["Django","Image Transformation","Node","Performance Optimization","PHP","Ruby on Rails"],"inLanguage":"en-US","copyrightYear":"2013","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance","url":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance","name":"WebP Example | Automatically Dynamically Deliver WebP Images by Browser","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA","datePublished":"2013-07-18T14:47:51+00:00","dateModified":"2025-11-07T00:04:16+00:00","description":"How to check for browser support and auto-generate WebP images to reduce bandwidth, improve page load speed and support transparency, lossless images and more.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA","width":1540,"height":847,"caption":"Image showing graphic of the Webp logo"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WebP Example | Automatically Dynamically Deliver WebP Images by Browser"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649720384\/Web_Assets\/blog\/13_check_webp_support\/13_check_webp_support.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21202"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21202\/revisions"}],"predecessor-version":[{"id":39141,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21202\/revisions\/39141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21203"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}