{"id":21239,"date":"2014-06-16T14:46:03","date_gmt":"2014-06-16T14:46:03","guid":{"rendered":"http:\/\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth"},"modified":"2025-10-30T10:33:36","modified_gmt":"2025-10-30T17:33:36","slug":"animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth","title":{"rendered":"Animated WebP \u2013 How to Convert Animated GIF to WebP"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Fashion isn\u2019t something you\u2019d expect to repeat itself in the technology world &#8211; technology advances quickly and hardly ever circles back. But where animated GIFs are involved, it seems like the 90s are here again. Animated GIFs are everywhere, and not only on strange, cheesy web sites &#8211; they\u2019ve become mainstream. You now see short videos shared and played as animated GIFs in reputed sites such as Gawker and TechCrunch.<\/p>\n<h2>Why GIF Format?<\/h2>\n<p>The GIF format is far from optimal. While it\u2019s a <a href=\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\">simple image format<\/a> supported by all web browsers and smartphones, converting videos to animated GIFs creates very large files. Downloading them takes time. Playing them uses a lot of memory and CPU resources. Pages on photo sharing sites, blogs, or even news sites, can become very slow when the page includes even a few animated GIFs that often weigh more than all the images in the page combined.<\/p>\n<p>The GIF format was not meant to be used for full color video. It uses only 256 colors (with no semi-transparent alpha channel) and is better suited for drawings rather than photos or video frames. For a single photo frame, JPEG is a much better format both in quality and file size, but JPEG does not support animation.<\/p>\n<p>A strong contender to replace the animated GIF is Google\u2019s WebP format \u2013 with its new <a href=\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\">animated WebP support<\/a>. In this blog post we give an animated webp example showing how you can use Cloudinary\u2019s cloud-based media management service to convert animated GIFs on-the-fly to a <a href=\"https:\/\/cloudinary.com\/blog\/devoxx_image_optimization_the_how_to\">WebP Animation<\/a>. In addition, we detail how we automatically deliver Animated WebP files only on supported browsers with graceful degradation to Animated GIFs otherwise. The end result is a full-color, high-quality animated images that weigh much less and are almost visually identical to the original animated GIF files.<\/p>\n<p>You can use Cloudinary for free and for life for WebP animated work and much, much more.<\/p>\n<h2>Conversion From Animated GIF to WebP Animated Format<\/h2>\n<p>The following animated GIF of a bored person was uploaded to Cloudinary from <a href=\"http:\/\/commons.wikimedia.org\/wiki\/File:Bored.gif\">Wikimedia<\/a>. Although it is a relatively small image of 279&#215;193, this short video weighs as much as <strong>1.5MB<\/strong>. If you have 30 such images on your site, that\u2019s a total of 45MB, which takes time to load. And if you have 1000 daily visitors to your site, your monthly bandwidth for these images alone will be 1.3TB!<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.gif\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.gif\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.gif\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.gif&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.gif&#039;).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).image()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.gif&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.gif&#039;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;bored_animation.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;bored_animation.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.gif\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.gif\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/bored_animation.gif&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.gif&quot;,&quot;extension&quot;:&quot;gif&quot;,&quot;format&quot;:&quot;gif&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/bored_animation.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/bored_animation.gif\" alt=\"GIF Image of bored man to be used in the webp animated image project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"279\" height=\"193\"\/><\/a><\/p>\n<p><a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">Cloudinary\u2019s media management service<\/a> has support for uploading, transforming and managing all kinds of media files, including images, videos and audio to emerging media types. The code samples below, in all popular frameworks, construct a dynamic URL that converts the animated GIF above to an animated WebP. This URL enables the awebp flag (or fl_awebp if you\u2019re providing the URL directly), and refers to the same image, bored_animation, changing its file extension to .webp (this tells Cloudinary you want to convert the image to this file format).<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt; &lt;Transformation flags=\\&quot;awebp\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;Transformation flags=\\&quot;awebp\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cld-transformation flags=\\&quot;awebp\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cld-transformation flags=\\&quot;awebp\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cl-transformation flags=\\&quot;awebp\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cl-transformation flags=\\&quot;awebp\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {flags: \\&quot;awebp\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {flags: \\&quot;awebp\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(flags=\\&quot;awebp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(flags=\\&quot;awebp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;transcode(Transcode::toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;transcode(Transcode::toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, flags: \\&quot;awebp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, flags: \\&quot;awebp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;awebp\\&quot;)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;awebp\\&quot;)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;awebp\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;awebp\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t transcode(Transcode.toAnimated()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t transcode(Transcode.toAnimated()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/fl_awebp\\\/bored_animation.webp&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;flags&quot;:&quot;awebp&quot;}],&quot;transformation_string&quot;:&quot;fl_awebp&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.webp&quot;,&quot;extension&quot;:&quot;webp&quot;,&quot;format&quot;:&quot;webp&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_awebp\/bored_animation.webp\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_awebp\/bored_animation.webp\" alt=\"webp animated image of bored man transformed by Cloudinary as animated WebP example\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"279\" height=\"193\"\/><\/a><\/p>\n<p><strong>Note:<\/strong> Animated WebP is currently supported only by the Chrome browser. If you see a broken image here, try opening this blog post in Chrome (v32 or higher).<\/p>\n<p>The <a href=\"https:\/\/cloudinary.com\/documentation\/videos_to_animated_images\">WebP animation<\/a> above is generated on-the-fly by Cloudinary when the dynamic URL is accessed. It looks the same as the original image, but weighs only <strong>419KB<\/strong>. This means we saved <strong>72%<\/strong> of file size, bandwidth and load time, compared to the original 1.5MB animated GIF.<\/p>\n<p>By default, Cloudinary generates animated WebP in lossy mode. The default quality level, used for the animated WebP above, is 80%, but you can select a different quality level.<\/p>\n<p>Let\u2019s try to generate the same animated WebP with a lower quality level. We\u2019ll set the <code>quality<\/code> parameter to 40 (<code>q_40<\/code> when providing the URL directly). You can see the dynamic transformation URL and the resulting <a href=\"https:\/\/cloudinary.com\/documentation\/animated_images\">WebP animation<\/a> below.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;, quality: 40})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;, quality: 40})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt; &lt;Transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;40\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;Transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;40\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cld-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;40\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cld-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;40\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cl-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;40\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cl-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;40\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {flags: \\&quot;awebp\\&quot;, quality: 40}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {flags: \\&quot;awebp\\&quot;, quality: 40}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(flags=\\&quot;awebp\\&quot;, quality=40)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(flags=\\&quot;awebp\\&quot;, quality=40)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;transcode(Transcode::toAnimated())\\n\\t-&gt;delivery(Delivery::quality(40));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;transcode(Transcode::toAnimated())\\n\\t-&gt;delivery(Delivery::quality(40));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;, \\&quot;quality\\&quot;=&gt;40))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;, \\&quot;quality\\&quot;=&gt;40))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;).quality(40)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;).quality(40)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 40)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 40)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;awebp\\&quot;).Quality(40)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;awebp\\&quot;).Quality(40)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(40)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(40)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;awebp\\&quot;).setQuality(40)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;awebp\\&quot;).setQuality(40)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;).quality(40)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;).quality(40)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(40)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(40)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t transcode(Transcode.toAnimated())\\n\\t delivery(Delivery.quality(40)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t transcode(Transcode.toAnimated())\\n\\t delivery(Delivery.quality(40)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;, quality: 40})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;, quality: 40})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .transcode(toAnimated())\\n  .delivery(quality(40));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/fl_awebp,q_40\\\/bored_animation.webp&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;flags&quot;:&quot;awebp&quot;,&quot;quality&quot;:&quot;40&quot;}],&quot;transformation_string&quot;:&quot;fl_awebp,q_40&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.webp&quot;,&quot;extension&quot;:&quot;webp&quot;,&quot;format&quot;:&quot;webp&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_awebp,q_40\/bored_animation.webp\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_awebp,q_40\/bored_animation.webp\" alt=\"webp animated image of bored man transformed by Cloudinary as animated WebP example at quality of 40%\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"279\" height=\"193\"\/><\/a><\/p>\n<p>With quality set to 40%, the visual difference is almost unnoticeable, but the generated file weighs only <strong>195KB<\/strong>. This saves 53% of size and bandwidth compared to the 80% quality animated WebP, and represents a size reduction of <strong>87%<\/strong> compared to the original GIF.<\/p>\n<h2>Resizing and cropping animated GIFs and converting to animated WebP<\/h2>\n<p>You can use Cloudinary\u2019s image transformation URLs to crop and resize animated GIFs. The following transformation URL and resulting image generates a 150&#215;100 north-filled rectangle of the same animated GIF. The resulting image, in which Cloudinary has already applied certain animated GIF optimizations, weighs <strong>429KB<\/strong>.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.gif\\&quot; &gt; &lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.gif\\&quot; &gt; &lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.gif\\&quot; &gt; &lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.gif&#039;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.gif&#039;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).image(width=150, height=100, gravity=\\&quot;north\\&quot;, crop=\\&quot;fill\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).image(width=150, height=100, gravity=\\&quot;north\\&quot;, crop=\\&quot;fill\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.gif&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.gif&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.gif\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.gif\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).resize(\\n  fill()\\n    .width(150)\\n    .height(100)\\n    .gravity(compass(\\&quot;north\\&quot;))\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_150,h_100,c_fill,g_north\\\/bored_animation.gif&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;150&quot;,&quot;height&quot;:&quot;100&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;gravity&quot;:&quot;north&quot;}],&quot;transformation_string&quot;:&quot;w_150,h_100,c_fill,g_north&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.gif&quot;,&quot;extension&quot;:&quot;gif&quot;,&quot;format&quot;:&quot;gif&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north\/bored_animation.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north\/bored_animation.gif\" alt=\"webp animated image of bored man transformed by Cloudinary as animated WebP example of cropping and resizing\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"150\" height=\"100\"\/><\/a><\/p>\n<p>Now we can convert this image to animated WebP. The following URL generates the same 150&#215;100 thumbnail, while converting to animated WebP with 80% quality. The result weighs only <strong>154KB<\/strong>, which means we saved <strong>64%<\/strong> of file size, without affecting quality.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt; &lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(width=150, height=100, gravity=\\&quot;north\\&quot;, flags=\\&quot;awebp\\&quot;, quality=80, crop=\\&quot;fill\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(width=150, height=100, gravity=\\&quot;north\\&quot;, flags=\\&quot;awebp\\&quot;, quality=80, crop=\\&quot;fill\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;transcode(Transcode::toAnimated())\\n\\t-&gt;delivery(Delivery::quality(80));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;transcode(Transcode::toAnimated())\\n\\t-&gt;delivery(Delivery::quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;, \\&quot;quality\\&quot;=&gt;80, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;, \\&quot;quality\\&quot;=&gt;80, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).flags(\\&quot;awebp\\&quot;).quality(80).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).flags(\\&quot;awebp\\&quot;).quality(80).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Flags(\\&quot;awebp\\&quot;).Quality(80).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Flags(\\&quot;awebp\\&quot;).Quality(80).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setFlags(\\&quot;awebp\\&quot;).setQuality(80).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setFlags(\\&quot;awebp\\&quot;).setQuality(80).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).flags(\\&quot;awebp\\&quot;).quality(80).crop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).flags(\\&quot;awebp\\&quot;).quality(80).crop(\\&quot;fill\\&quot;)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t transcode(Transcode.toAnimated())\\n\\t delivery(Delivery.quality(80)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t transcode(Transcode.toAnimated())\\n\\t delivery(Delivery.quality(80)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, flags: \\&quot;awebp\\&quot;, quality: 80, crop: \\&quot;fill\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_150,h_100,c_fill,g_north,fl_awebp,q_80\\\/bored_animation.webp&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;150&quot;,&quot;height&quot;:&quot;100&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;gravity&quot;:&quot;north&quot;,&quot;flags&quot;:&quot;awebp&quot;,&quot;quality&quot;:&quot;80&quot;}],&quot;transformation_string&quot;:&quot;w_150,h_100,c_fill,g_north,fl_awebp,q_80&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.webp&quot;,&quot;extension&quot;:&quot;webp&quot;,&quot;format&quot;:&quot;webp&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,fl_awebp,q_80\/bored_animation.webp\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,fl_awebp,q_80\/bored_animation.webp\" alt=\"webp animated image of bored man transformed by Cloudinary as animated WebP example of resizing at 80% quality\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"150\" height=\"100\"\/><\/a><\/p>\n<p>The animated WebP format is also very useful for animations of drawings, not only for video. The examples below show an animated drawing uploaded to Cloudinary from Wikimedia. The original animated GIF on the left weighs <strong>790KB<\/strong>, while the WebP version on the right, at 80% quality, weighs only <strong>375KB<\/strong> (a reduction of <strong>52.5%<\/strong>).<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;cell_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;cell_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;cell_animation.webp\\&quot; &gt; &lt;Transformation flags=\\&quot;awebp\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;cell_animation.webp\\&quot; &gt;\\n\\t&lt;Transformation flags=\\&quot;awebp\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;cell_animation.webp\\&quot; &gt; &lt;cld-transformation flags=\\&quot;awebp\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;cell_animation.webp\\&quot; &gt;\\n\\t&lt;cld-transformation flags=\\&quot;awebp\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;cell_animation.webp\\&quot; &gt; &lt;cl-transformation flags=\\&quot;awebp\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;cell_animation.webp\\&quot; &gt;\\n\\t&lt;cl-transformation flags=\\&quot;awebp\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;cell_animation.webp&#039;, {flags: \\&quot;awebp\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;cell_animation.webp&#039;, {flags: \\&quot;awebp\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).image(flags=\\&quot;awebp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).image(flags=\\&quot;awebp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;cell_animation.webp&#039;))\\n\\t-&gt;transcode(Transcode::toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;cell_animation.webp&#039;))\\n\\t-&gt;transcode(Transcode::toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;cell_animation.webp\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;cell_animation.webp\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).imageTag(\\&quot;cell_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).imageTag(\\&quot;cell_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;cell_animation.webp\\&quot;, flags: \\&quot;awebp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;cell_animation.webp\\&quot;, flags: \\&quot;awebp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;awebp\\&quot;)).BuildImageTag(\\&quot;cell_animation.webp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;awebp\\&quot;)).BuildImageTag(\\&quot;cell_animation.webp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;cell_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;cell_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;awebp\\&quot;)).generate(\\&quot;cell_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;awebp\\&quot;)).generate(\\&quot;cell_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).generate(\\&quot;cell_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;awebp\\&quot;)).generate(\\&quot;cell_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;cell_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;cell_animation.webp&#039;).transformation(Transformation()\\n\\t.transcode(Transcode.toAnimated()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;cell_animation.webp\\&quot;)\\n\\t transcode(Transcode.toAnimated()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;cell_animation.webp\\&quot;)\\n\\t transcode(Transcode.toAnimated()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;cell_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;cell_animation.webp\\&quot;, {flags: \\&quot;awebp\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;cell_animation.webp\\&quot;).transcode(toAnimated());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/fl_awebp\\\/cell_animation.webp&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;flags&quot;:&quot;awebp&quot;}],&quot;transformation_string&quot;:&quot;fl_awebp&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;cell_animation.webp&quot;,&quot;extension&quot;:&quot;webp&quot;,&quot;format&quot;:&quot;webp&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_awebp\/cell_animation.webp\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_awebp\/cell_animation.webp\" alt=\"GIF image of geometric form to be used as animated WebP example.\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"320\" height=\"240\"\/><\/a>\n<a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/cell_animation.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/cell_animation.gif\" alt=\"webp animated image of geometric form transformed by Cloudinary as animated WebP example of reduced file size\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"320\" height=\"240\"\/><\/a><\/p>\n<div style=\"clear: both;  margin-bottom: 20px\">  <\/div>\n<h2>Automatically Deliver Animated WebP Only on Supported Browsers<\/h2>\n<p>Hopefully, we\u2019ve managed to show that animated WebP can be far superior to animated GIF. The problem is that only the Google Chrome browser, version 32 or higher, supports this format. Chrome is the leading browser in popularity and pushes upgrades strongly; for example, more than 60% of Cloudinary\u2019s website visitors use Chrome v32 or higher. It\u2019s likely that on your website too, Chrome users are a sufficiently large audience to justify serving WebP animated images.<\/p>\n<p>The challenge is to deliver WebP animated images to users of supported browsers, and deliver other formats (GIF, PNG, JPG, etc.) to users of other browsers. In our case, we need to deliver WebP animated images to users of Chrome v32 or higher, and animated GIF to all other users.<\/p>\n<p>Cloudinary can help by automatically delivering the appropriate image format to each user based on their browser (see our <a href=\"https:\/\/cloudinary.com\/blog\/transparent_webp_format_cdn_delivery_based_on_visitors_browsers\">previous post<\/a> which discusses this feature in more depth). To do this for an animated image like the one below, just set the <code>fetch_format<\/code> parameter to <code>auto<\/code> (or <code>f_auto<\/code> for URLs). Cloudinary automatically detects the user browser at the CDN level, and delivers cached and optimized converted animated WebP, or the original animated GIF, according to the user\u2019s browser.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.gif\\&quot; &gt; &lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; fetchFormat=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; fetchFormat=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.gif\\&quot; &gt; &lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.gif\\&quot; &gt; &lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.gif\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.gif&#039;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetchFormat: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.gif&#039;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetchFormat: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).image(width=150, height=100, gravity=\\&quot;north\\&quot;, crop=\\&quot;fill\\&quot;, fetch_format=\\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.gif\\&quot;).image(width=150, height=100, gravity=\\&quot;north\\&quot;, crop=\\&quot;fill\\&quot;, fetch_format=\\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.gif&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.gif&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).imageTag(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).imageTag(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.gif\\&quot;, width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Crop(\\&quot;fill\\&quot;).FetchFormat(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Crop(\\&quot;fill\\&quot;).FetchFormat(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;bored_animation.gif\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setCrop(\\&quot;fill\\&quot;).setFetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setCrop(\\&quot;fill\\&quot;).setFetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;bored_animation.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.gif\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.gif\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.gif\\&quot;, {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.gif\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_150,h_100,c_fill,g_north,f_auto\\\/bored_animation.gif&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;150&quot;,&quot;height&quot;:&quot;100&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;gravity&quot;:&quot;north&quot;,&quot;format&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;w_150,h_100,c_fill,g_north,f_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.gif&quot;,&quot;extension&quot;:&quot;gif&quot;,&quot;format&quot;:&quot;gif&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,f_auto\/bored_animation.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,f_auto\/bored_animation.gif\" alt=\"webp animated image of bored man transformed by Cloudinary as animated WebP example of fetch parameters to ensure Chrome users see the right image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"150\" height=\"100\"\/><\/a><\/p>\n<h2>Further Transformations on Your Animated WebP Images<\/h2>\n<p>We showed above how to resize and crop an animated image in Cloudinary. But there are many more transformations you can apply to an animated GIF or WebP image. The following example uses Cloudinary\u2019s image transformation URLs to round the corners of the animated GIF, add a gray border and a semi-transparent watermark overlay of another uploaded image, and finally convert to animated WebP. Again &#8211; the WebP format generates a visually-identical result that weighs just 35% of the GIF version (saving <strong>65%<\/strong> of size and bandwidth).<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;cloudinary_icon\\&quot;, flags: \\&quot;relative\\&quot;, width: \\&quot;0.8\\&quot;, opacity: 50}, {flags: \\&quot;awebp\\&quot;, quality: 80} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;cloudinary_icon\\&quot;, flags: \\&quot;relative\\&quot;, width: \\&quot;0.8\\&quot;, opacity: 50},\\n  {flags: \\&quot;awebp\\&quot;, quality: 80}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt; &lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; radius=\\&quot;20\\&quot; border=\\&quot;3px_solid_rgb:aaa\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; flags=\\&quot;relative\\&quot; width=\\&quot;0.8\\&quot; opacity=\\&quot;50\\&quot; \\\/&gt; &lt;Transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; radius=\\&quot;20\\&quot; border=\\&quot;3px_solid_rgb:aaa\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; flags=\\&quot;relative\\&quot; width=\\&quot;0.8\\&quot; opacity=\\&quot;50\\&quot; \\\/&gt;\\n\\t&lt;Transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; radius=\\&quot;20\\&quot; border=\\&quot;3px_solid_rgb:aaa\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; flags=\\&quot;relative\\&quot; width=\\&quot;0.8\\&quot; opacity=\\&quot;50\\&quot; \\\/&gt; &lt;cld-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; radius=\\&quot;20\\&quot; border=\\&quot;3px_solid_rgb:aaa\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; flags=\\&quot;relative\\&quot; width=\\&quot;0.8\\&quot; opacity=\\&quot;50\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt; &lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; radius=\\&quot;20\\&quot; border=\\&quot;3px_solid_rgb:aaa\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; flags=\\&quot;relative\\&quot; width=\\&quot;0.8\\&quot; opacity=\\&quot;50\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.webp\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; radius=\\&quot;20\\&quot; border=\\&quot;3px_solid_rgb:aaa\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; flags=\\&quot;relative\\&quot; width=\\&quot;0.8\\&quot; opacity=\\&quot;50\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation flags=\\&quot;awebp\\&quot; quality=\\&quot;80\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), flags: \\&quot;relative\\&quot;, width: \\&quot;0.8\\&quot;, opacity: 50}, {flags: \\&quot;awebp\\&quot;, quality: 80} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.webp&#039;, {transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), flags: \\&quot;relative\\&quot;, width: \\&quot;0.8\\&quot;, opacity: 50},\\n  {flags: \\&quot;awebp\\&quot;, quality: 80}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(transformation=[ {&#039;width&#039;: 150, &#039;height&#039;: 100, &#039;gravity&#039;: \\&quot;north\\&quot;, &#039;radius&#039;: 20, &#039;border&#039;: \\&quot;3px_solid_rgb:aaa\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;flags&#039;: \\&quot;relative\\&quot;, &#039;width&#039;: \\&quot;0.8\\&quot;, &#039;opacity&#039;: 50}, {&#039;flags&#039;: \\&quot;awebp\\&quot;, &#039;quality&#039;: 80} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.webp\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 150, &#039;height&#039;: 100, &#039;gravity&#039;: \\&quot;north\\&quot;, &#039;radius&#039;: 20, &#039;border&#039;: \\&quot;3px_solid_rgb:aaa\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;flags&#039;: \\&quot;relative\\&quot;, &#039;width&#039;: \\&quot;0.8\\&quot;, &#039;opacity&#039;: 50},\\n  {&#039;flags&#039;: \\&quot;awebp\\&quot;, &#039;quality&#039;: 80}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;border(Border::solid(3,Color::rgb(\\&quot;aaa\\&quot;))\\n\\t-&gt;roundCorners(\\n\\tRoundCorners::byRadius(20))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;cloudinary_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(0.8)\\n\\t-&gt;relative()\\n\\t)\\n\\t-&gt;adjust(Adjust::opacity(50)))\\n\\t))\\n\\t-&gt;transcode(Transcode::toAnimated())\\n\\t-&gt;delivery(Delivery::quality(80));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.webp&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;border(Border::solid(3,Color::rgb(\\&quot;aaa\\&quot;))\\n\\t-&gt;roundCorners(\\n\\tRoundCorners::byRadius(20))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;cloudinary_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(0.8)\\n\\t-&gt;relative()\\n\\t)\\n\\t-&gt;adjust(Adjust::opacity(50)))\\n\\t))\\n\\t-&gt;transcode(Transcode::toAnimated())\\n\\t-&gt;delivery(Delivery::quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;radius\\&quot;=&gt;20, \\&quot;border\\&quot;=&gt;\\&quot;3px_solid_rgb:aaa\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;relative\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;opacity\\&quot;=&gt;50), array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;, \\&quot;quality\\&quot;=&gt;80) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;radius\\&quot;=&gt;20, \\&quot;border\\&quot;=&gt;\\&quot;3px_solid_rgb:aaa\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;relative\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;opacity\\&quot;=&gt;50),\\n  array(\\&quot;flags\\&quot;=&gt;\\&quot;awebp\\&quot;, \\&quot;quality\\&quot;=&gt;80)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).radius(20).border(\\&quot;3px_solid_rgb:aaa\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).flags(\\&quot;relative\\&quot;).width(0.8).opacity(50).chain() .flags(\\&quot;awebp\\&quot;).quality(80)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(150).height(100).gravity(\\&quot;north\\&quot;).radius(20).border(\\&quot;3px_solid_rgb:aaa\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).flags(\\&quot;relative\\&quot;).width(0.8).opacity(50).chain()\\n  .flags(\\&quot;awebp\\&quot;).quality(80)).imageTag(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;cloudinary_icon\\&quot;, flags: \\&quot;relative\\&quot;, width: 0.8, opacity: 50}, {flags: \\&quot;awebp\\&quot;, quality: 80} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.webp\\&quot;, transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;cloudinary_icon\\&quot;, flags: \\&quot;relative\\&quot;, width: 0.8, opacity: 50},\\n  {flags: \\&quot;awebp\\&quot;, quality: 80}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Radius(20).Border(\\&quot;3px_solid_rgb:aaa\\&quot;).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Flags(\\&quot;relative\\&quot;).Width(0.8).Opacity(50).Chain() .Flags(\\&quot;awebp\\&quot;).Quality(80)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Radius(20).Border(\\&quot;3px_solid_rgb:aaa\\&quot;).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Flags(\\&quot;relative\\&quot;).Width(0.8).Opacity(50).Chain()\\n  .Flags(\\&quot;awebp\\&quot;).Quality(80)).BuildImageTag(\\&quot;bored_animation.webp\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.border(Border.solid(3,Color.rgb(\\&quot;aaa\\&quot;))\\n\\t.roundCorners(\\n\\tRoundCorners.byRadius(20))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.8)\\n\\t.relative()\\n\\t)\\n\\t.adjust(Adjust.opacity(50)))\\n\\t))\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.border(Border.solid(3,Color.rgb(\\&quot;aaa\\&quot;))\\n\\t.roundCorners(\\n\\tRoundCorners.byRadius(20))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.8)\\n\\t.relative()\\n\\t)\\n\\t.adjust(Adjust.opacity(50)))\\n\\t))\\n\\t.transcode(Transcode.toAnimated())\\n\\t.delivery(Delivery.quality(80)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setRadius(20).setBorder(\\&quot;3px_solid_rgb:aaa\\&quot;).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;cloudinary_icon\\&quot;).setFlags(\\&quot;relative\\&quot;).setWidth(0.8).setOpacity(50).chain() .setFlags(\\&quot;awebp\\&quot;).setQuality(80)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setRadius(20).setBorder(\\&quot;3px_solid_rgb:aaa\\&quot;).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;cloudinary_icon\\&quot;).setFlags(\\&quot;relative\\&quot;).setWidth(0.8).setOpacity(50).chain()\\n  .setFlags(\\&quot;awebp\\&quot;).setQuality(80)).generate(\\&quot;bored_animation.webp\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).radius(20).border(\\&quot;3px_solid_rgb:aaa\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).flags(\\&quot;relative\\&quot;).width(0.8).opacity(50).chain() .flags(\\&quot;awebp\\&quot;).quality(80)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(150).height(100).gravity(\\&quot;north\\&quot;).radius(20).border(\\&quot;3px_solid_rgb:aaa\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).flags(\\&quot;relative\\&quot;).width(0.8).opacity(50).chain()\\n  .flags(\\&quot;awebp\\&quot;).quality(80)).generate(\\&quot;bored_animation.webp\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\\\/l_cloudinary_icon,fl_relative,w_0.8,o_50\\\/fl_awebp,q_80\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.webp&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\\\/l_cloudinary_icon,fl_relative,w_0.8,o_50\\\/fl_awebp,q_80\\&quot;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t border(Border.solid(3,Color.rgb(\\&quot;aaa\\&quot;)) {\\n\\t roundCorners(\\n\\tRoundCorners.byRadius(20))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(0.8F)\\n\\t relative()\\n\\t })\\n\\t adjust(Adjust.opacity(50)) })\\n\\t }))\\n\\t transcode(Transcode.toAnimated())\\n\\t delivery(Delivery.quality(80)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.webp\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t border(Border.solid(3,Color.rgb(\\&quot;aaa\\&quot;)) {\\n\\t roundCorners(\\n\\tRoundCorners.byRadius(20))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(0.8F)\\n\\t relative()\\n\\t })\\n\\t adjust(Adjust.opacity(50)) })\\n\\t }))\\n\\t transcode(Transcode.toAnimated())\\n\\t delivery(Delivery.quality(80)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), flags: \\&quot;relative\\&quot;, width: \\&quot;0.8\\&quot;, opacity: 50}, {flags: \\&quot;awebp\\&quot;, quality: 80} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.webp\\&quot;, {transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, radius: 20, border: \\&quot;3px_solid_rgb:aaa\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), flags: \\&quot;relative\\&quot;, width: \\&quot;0.8\\&quot;, opacity: 50},\\n  {flags: \\&quot;awebp\\&quot;, quality: 80}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.webp\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .border(solid(3, \\&quot;#aaa\\&quot;).roundCorners(byRadius(20)))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.8).relative())\\n          .adjust(opacity(50))\\n      )\\n    )\\n  )\\n  .transcode(toAnimated())\\n  .delivery(quality(80));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\\\/l_cloudinary_icon,fl_relative,w_0.8,o_50\\\/fl_awebp,q_80\\\/bored_animation.webp&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;150&quot;,&quot;height&quot;:&quot;100&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;gravity&quot;:&quot;north&quot;,&quot;radius&quot;:&quot;20&quot;,&quot;border&quot;:&quot;3px_solid_rgb:aaa&quot;},{&quot;overlay&quot;:&quot;cloudinary_icon&quot;,&quot;flags&quot;:&quot;relative&quot;,&quot;width&quot;:&quot;0.8&quot;,&quot;opacity&quot;:&quot;50&quot;},{&quot;flags&quot;:&quot;awebp&quot;,&quot;quality&quot;:&quot;80&quot;}],&quot;transformation_string&quot;:&quot;w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\\\/l_cloudinary_icon,fl_relative,w_0.8,o_50\\\/fl_awebp,q_80&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.webp&quot;,&quot;extension&quot;:&quot;webp&quot;,&quot;format&quot;:&quot;webp&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/fl_awebp,q_80\/bored_animation.webp\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/fl_awebp,q_80\/bored_animation.webp\" alt=\"GIF image of bored man animated WebP example of semitransparent watermark overlay\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"156\" height=\"106\"\/><\/a>\n<a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/bored_animation.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north,r_20,bo_3px_solid_rgb:aaa\/l_cloudinary_icon,fl_relative,w_0.8,o_50\/bored_animation.gif\" alt=\"webp animated image of bored man transformed by Cloudinary as animated WebP example of fetch parameters to ensure Chrome users see the right image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"156\" height=\"106\"\/><\/a><\/p>\n<div style=\"clear: both;  margin-bottom: 20px\">  <\/div>\n<h2>Summary<\/h2>\n<p>The results of switching from animated GIF to animated WebP are impressive &#8211; in the examples we showed above, image size and bandwidth were reduced by 65-90%, with the same visual result. Albeit, WebP is only used by a limited number of browsers, but the latest versions of Chrome are becoming more and more popular, and so the importance of WebP is on the rise.<\/p>\n<p>With Cloudinary\u2019s automatic conversion and selective delivery of animation format based on the user\u2019s browser, there\u2019s definitely no reason not to use animated WebP for displaying your short videos. Furthermore, if you convert your original high quality videos to WebP (and not just convert from GIF to WebP like we did in the examples above), you\u2019ll get a better visual result, due to the WebP format\u2019s full-color support, compared to only 256 colors in an animated GIF.<\/p>\n<p>By the way, in our humble opinion, those major sites that are now full of animated GIFs, all playing simultaneously, could achieve a more professional result by showing the first still frame of the animation, with a small play button. With Cloudinary you can easily convert an animated GIF or <a href=\"https:\/\/cloudinary.com\/blog\/evolution_of_img_gif_without_the_gif\">WebP animation<\/a> to any single-frame image format. For example:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.jpg\\&quot;, {transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;play_button\\&quot;, width: \\&quot;0.4\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;bored_animation.jpg\\&quot;, {transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;play_button\\&quot;, width: \\&quot;0.4\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;play_button\\&quot; width=\\&quot;0.4\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;bored_animation.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;play_button\\&quot; width=\\&quot;0.4\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;play_button\\&quot; width=\\&quot;0.4\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;bored_animation.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;play_button\\&quot; width=\\&quot;0.4\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;play_button\\&quot; width=\\&quot;0.4\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;bored_animation.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;150\\&quot; height=\\&quot;100\\&quot; gravity=\\&quot;north\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;play_button\\&quot; width=\\&quot;0.4\\&quot; flags=\\&quot;relative\\&quot; opacity=\\&quot;60\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.jpg&#039;, {transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;play_button\\&quot;), width: \\&quot;0.4\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;bored_animation.jpg&#039;, {transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;play_button\\&quot;), width: \\&quot;0.4\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 150, &#039;height&#039;: 100, &#039;gravity&#039;: \\&quot;north\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;play_button\\&quot;, &#039;width&#039;: \\&quot;0.4\\&quot;, &#039;flags&#039;: \\&quot;relative\\&quot;, &#039;opacity&#039;: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 150, &#039;height&#039;: 100, &#039;gravity&#039;: \\&quot;north\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;play_button\\&quot;, &#039;width&#039;: \\&quot;0.4\\&quot;, &#039;flags&#039;: \\&quot;relative\\&quot;, &#039;opacity&#039;: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;play_button\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(0.4)\\n\\t-&gt;relative()\\n\\t)\\n\\t-&gt;adjust(Adjust::opacity(60)))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;bored_animation.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(150)\\n-&gt;height(100)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::north()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;play_button\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(0.4)\\n\\t-&gt;relative()\\n\\t)\\n\\t-&gt;adjust(Adjust::opacity(60)))\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;play_button\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.4\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;relative\\&quot;, \\&quot;opacity\\&quot;=&gt;60) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;150, \\&quot;height\\&quot;=&gt;100, \\&quot;gravity\\&quot;=&gt;\\&quot;north\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;play_button\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.4\\&quot;, \\&quot;flags\\&quot;=&gt;\\&quot;relative\\&quot;, \\&quot;opacity\\&quot;=&gt;60)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;play_button\\&quot;)).width(0.4).flags(\\&quot;relative\\&quot;).opacity(60)).imageTag(\\&quot;bored_animation.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;play_button\\&quot;)).width(0.4).flags(\\&quot;relative\\&quot;).opacity(60)).imageTag(\\&quot;bored_animation.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.jpg\\&quot;, transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;play_button\\&quot;, width: 0.4, flags: \\&quot;relative\\&quot;, opacity: 60} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;bored_animation.jpg\\&quot;, transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;play_button\\&quot;, width: 0.4, flags: \\&quot;relative\\&quot;, opacity: 60}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;play_button\\&quot;)).Width(0.4).Flags(\\&quot;relative\\&quot;).Opacity(60)).BuildImageTag(\\&quot;bored_animation.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(150).Height(100).Gravity(\\&quot;north\\&quot;).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;play_button\\&quot;)).Width(0.4).Flags(\\&quot;relative\\&quot;).Opacity(60)).BuildImageTag(\\&quot;bored_animation.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;play_button\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.4)\\n\\t.relative()\\n\\t)\\n\\t.adjust(Adjust.opacity(60)))\\n\\t)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;play_button\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.4)\\n\\t.relative()\\n\\t)\\n\\t.adjust(Adjust.opacity(60)))\\n\\t)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;play_button\\&quot;).setWidth(0.4).setFlags(\\&quot;relative\\&quot;).setOpacity(60)).generate(\\&quot;bored_animation.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(150).setHeight(100).setGravity(\\&quot;north\\&quot;).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;play_button\\&quot;).setWidth(0.4).setFlags(\\&quot;relative\\&quot;).setOpacity(60)).generate(\\&quot;bored_animation.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;play_button\\&quot;)).width(0.4).flags(\\&quot;relative\\&quot;).opacity(60)).generate(\\&quot;bored_animation.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(150).height(100).gravity(\\&quot;north\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;play_button\\&quot;)).width(0.4).flags(\\&quot;relative\\&quot;).opacity(60)).generate(\\&quot;bored_animation.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;play_button\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.4)\\n\\t.relative()\\n\\t)\\n\\t.adjust(Adjust.opacity(60)))\\n\\t)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;bored_animation.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(150)\\n.height(100)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;play_button\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(0.4)\\n\\t.relative()\\n\\t)\\n\\t.adjust(Adjust.opacity(60)))\\n\\t)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;play_button\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(0.4F)\\n\\t relative()\\n\\t })\\n\\t adjust(Adjust.opacity(60)) })\\n\\t })) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;bored_animation.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(150)\\n height(100)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.north()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;play_button\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(0.4F)\\n\\t relative()\\n\\t })\\n\\t adjust(Adjust.opacity(60)) })\\n\\t })) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.jpg\\&quot;, {transformation: [ {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;play_button\\&quot;), width: \\&quot;0.4\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;bored_animation.jpg\\&quot;, {transformation: [\\n  {width: 150, height: 100, gravity: \\&quot;north\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;play_button\\&quot;), width: \\&quot;0.4\\&quot;, flags: \\&quot;relative\\&quot;, opacity: 60}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;bored_animation.jpg\\&quot;)\\n  .resize(\\n    fill()\\n      .width(150)\\n      .height(100)\\n      .gravity(compass(\\&quot;north\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;play_button\\&quot;).transformation(\\n        new Transformation()\\n          .resize(scale().width(0.4).relative())\\n          .adjust(opacity(60))\\n      )\\n    )\\n  );&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_150,h_100,c_fill,g_north\\\/l_play_button,w_0.4,fl_relative,o_60\\\/bored_animation.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;150&quot;,&quot;height&quot;:&quot;100&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;gravity&quot;:&quot;north&quot;},{&quot;overlay&quot;:&quot;play_button&quot;,&quot;width&quot;:&quot;0.4&quot;,&quot;flags&quot;:&quot;relative&quot;,&quot;opacity&quot;:&quot;60&quot;}],&quot;transformation_string&quot;:&quot;w_150,h_100,c_fill,g_north\\\/l_play_button,w_0.4,fl_relative,o_60&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;bored_animation.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north\/l_play_button,w_0.4,fl_relative,o_60\/bored_animation.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_150,h_100,c_fill,g_north\/l_play_button,w_0.4,fl_relative,o_60\/bored_animation.jpg\" alt=\"First animation frame with play button\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"150\" height=\"100\"\/><\/a><\/p>\n<p>Dynamic transformation of animated GIFs, on-the-fly conversion to Web and all other powerful image transformation and optimization features described in this post, are available for all Cloudinary\u2019s users, including those using the free plan. Set up a <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">free Cloudinary account<\/a> to try it out. And we\u2019ll more than welcome your feedback on this feature via the comments below or your favorite social network.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21240,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[91,92,165,176,183,214,229,257,321],"class_list":["post-21239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-django","tag-dotnet","tag-image-transformation","tag-java","tag-jquery","tag-node","tag-php","tag-ruby-on-rails","tag-webp"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Animated WebP: Convert Animated GIF to WebP on the Fly<\/title>\n<meta name=\"description\" content=\"For this animated WebP example, learn how to convert animated GIF to WebP animation save up to 90% on file size and bandwidth using Cloudinary for free.\" \/>\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\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated WebP \u2013 How to Convert Animated GIF to WebP\" \/>\n<meta property=\"og:description\" content=\"For this animated WebP example, learn how to convert animated GIF to WebP animation save up to 90% on file size and bandwidth using Cloudinary for free.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-16T14:46:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-30T17:33:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.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\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Animated WebP \u2013 How to Convert Animated GIF to WebP\",\"datePublished\":\"2014-06-16T14:46:03+00:00\",\"dateModified\":\"2025-10-30T17:33:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA\",\"keywords\":[\"Django\",\"DotNet\",\"Image Transformation\",\"Java\",\"jQuery\",\"Node\",\"PHP\",\"Ruby on Rails\",\"WebP\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2014\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\",\"url\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\",\"name\":\"Animated WebP: Convert Animated GIF to WebP on the Fly\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA\",\"datePublished\":\"2014-06-16T14:46:03+00:00\",\"dateModified\":\"2025-10-30T17:33:36+00:00\",\"description\":\"For this animated WebP example, learn how to convert animated GIF to WebP animation save up to 90% on file size and bandwidth using Cloudinary for free.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA\",\"width\":1540,\"height\":847,\"caption\":\"Image showing graphic of WebP logo in an exploding cloud representing the webp animated image project\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated WebP \u2013 How to Convert Animated GIF to WebP\"}]},{\"@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":"Animated WebP: Convert Animated GIF to WebP on the Fly","description":"For this animated WebP example, learn how to convert animated GIF to WebP animation save up to 90% on file size and bandwidth using Cloudinary for free.","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\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth","og_locale":"en_US","og_type":"article","og_title":"Animated WebP \u2013 How to Convert Animated GIF to WebP","og_description":"For this animated WebP example, learn how to convert animated GIF to WebP animation save up to 90% on file size and bandwidth using Cloudinary for free.","og_url":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth","og_site_name":"Cloudinary Blog","article_published_time":"2014-06-16T14:46:03+00:00","article_modified_time":"2025-10-30T17:33:36+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth"},"author":{"name":"","@id":""},"headline":"Animated WebP \u2013 How to Convert Animated GIF to WebP","datePublished":"2014-06-16T14:46:03+00:00","dateModified":"2025-10-30T17:33:36+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA","keywords":["Django","DotNet","Image Transformation","Java","jQuery","Node","PHP","Ruby on Rails","WebP"],"inLanguage":"en-US","copyrightYear":"2014","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth","url":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth","name":"Animated WebP: Convert Animated GIF to WebP on the Fly","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA","datePublished":"2014-06-16T14:46:03+00:00","dateModified":"2025-10-30T17:33:36+00:00","description":"For this animated WebP example, learn how to convert animated GIF to WebP animation save up to 90% on file size and bandwidth using Cloudinary for free.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA","width":1540,"height":847,"caption":"Image showing graphic of WebP logo in an exploding cloud representing the webp animated image project"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Animated WebP \u2013 How to Convert Animated GIF to WebP"}]},{"@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\/v1649725366\/Web_Assets\/blog\/05_webp\/05_webp.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21239","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=21239"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21239\/revisions"}],"predecessor-version":[{"id":39030,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21239\/revisions\/39030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21240"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}