{"id":21305,"date":"2020-01-19T10:35:00","date_gmt":"2020-01-19T10:35:00","guid":{"rendered":"http:\/\/lossy_compression_for_optimizing_animated_gifs"},"modified":"2025-11-06T16:54:55","modified_gmt":"2025-11-07T00:54:55","slug":"lossy_compression_for_optimizing_animated_gifs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs","title":{"rendered":"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Even though the <a href=\"https:\/\/cloudinary.com\/blog\/image_formats_getting_it_right\">image format<\/a> animated GIFs are gaining popularity, their file size is usually large, causing slow loading and incurring high bandwidth costs. Besides, the GIF format is old and not optimized for modern video clips. The developer\u2019s job of effecting fast loading of animated GIFs and delivering optimized images is complex and time-consuming.<\/p>\n<p>In this article we\u2019ll explain:<\/p>\n<ul>\n<li>GIF compression via conversion to video.<\/li>\n<li>What lossy GIF compression really means.<\/li>\n<li>How Cloudinary works as an easy to use GIF compression tool for free.<\/li>\n<\/ul>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Cloudinary gives you access for free and for life. <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Sign up for Cloudinary today<\/a>.<\/p><\/div>\n<h2>Converting Animated GIFs to Videos or Animated WebP Files: The Caveats<\/h2>\n<p>With Cloudinary, you can convert animated GIFs to videos, reducing the file size and saving bandwidth (see this <a href=\"https:\/\/cloudinary.com\/blog\/reduce_size_of_animated_gifs_automatically_convert_to_webm_and_mp4\">post<\/a> for more details). However, videos are much harder to embed in websites and apps than regular images, let alone that auto-playing of videos does not work in some browsers and mobile devices.\nAlternatively, you can convert animated GIFs to <a href=\"https:\/\/cloudinary.com\/blog\/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth\">animated WebP<\/a> files. Unfortunately, the WebP format, which, being developed by Google, works only on Chrome, Android, and Opera, but not on most of the other popular mobile devices and browsers.<\/p>\n<p>Furthermore, GIF conversion tools tend to produce either large, high visual-quality files or small, low visual-quality ones, neither of which lives up to optimization standards.<\/p>\n<h2>Understanding Lossy Compression<\/h2>\n<p>When lossy compression starts, filtering occurs, eliminating certain pixel data through an increase of redundant patterns along scan lines. In reality, the term Lossy Gif Compression is a misnomer for GIFs, whose format is palette based, because the related compression algorithms are lossless, hence no data loss in the output. Read more about <a href=\"https:\/\/cloudinary.com\/glossary\/lossy-compression\">lossy compression<\/a> here.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Because of the 8-bit GIF limit of 256 colors, converting other image formats to GIF <strong>does<\/strong> result in data loss.<\/p><\/div>\n<p>As reference, read this <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization\">section in the Cloudinary documentation<\/a> on image optimization: the whys, the whats, and the tools.<\/p>\n<h2>GIF Compression Tool: Applying Lossy Compression to Animated GIFs<\/h2>\n<p>Optimizing animated GIFs with a <strong>lossy-compression technique<\/strong> yields smaller yet visually appealing images, a win-win. With Cloudinary, you apply lossy compression through the platform\u2019s on-the-fly, dynamic URLs with no need for any software or additional computational power. Why? Because the compression process takes place in the cloud.<\/p>\n<p>All you need to do is set the <code>flag<\/code> parameter to <code>lossy<\/code> (<code>fl_lossy<\/code> in URLs). For example, this animated GIF named <code>kitten_fighting<\/code>, already uploaded to Cloudinary, is <strong>6.3 MB<\/strong> in size.\n<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;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.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;kitten_fighting.gif&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting.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;kitten_fighting.gif\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;kitten_fighting.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;kitten_fighting.gif&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;kitten_fighting.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;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;kitten_fighting.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;kitten_fighting.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.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;kitten_fighting.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;kitten_fighting.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;kitten_fighting.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.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;kitten_fighting.gif\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting.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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.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\\\/kitten_fighting.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;kitten_fighting.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\/kitten_fighting.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/kitten_fighting.gif\" alt=\"GIF of a kitten playing with a plant to be used for the lossy GIF compression projec\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"320\" height=\"180\"\/><\/a><\/p>\n<p>Adding the <code>fl_lossy<\/code> parameter to the delivery URL reduces that size by 40 percent to <strong>2.5 MB<\/strong>. The optimized GIF, as shown below, looks just as sharp as the original.\n<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;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&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;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&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;kitten_fighting\\&quot; &gt; &lt;Transformation flags=\\&quot;lossy\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;Transformation flags=\\&quot;lossy\\&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;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&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;kitten_fighting\\&quot; &gt; &lt;cld-transformation flags=\\&quot;lossy\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;cld-transformation flags=\\&quot;lossy\\&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;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&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;kitten_fighting\\&quot; &gt; &lt;cl-transformation flags=\\&quot;lossy\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;cl-transformation flags=\\&quot;lossy\\&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;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&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;kitten_fighting&#039;, {flags: \\&quot;lossy\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting&#039;, {flags: \\&quot;lossy\\&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;kitten_fighting\\&quot;).image(flags=\\&quot;lossy\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;kitten_fighting\\&quot;).image(flags=\\&quot;lossy\\&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;kitten_fighting.gif&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::gif())\\n\\t-&gt;lossy()\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;kitten_fighting.gif&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::gif())\\n\\t-&gt;lossy()\\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;kitten_fighting\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;lossy\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;lossy\\&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;lossy\\&quot;)).imageTag(\\&quot;kitten_fighting\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;lossy\\&quot;)).imageTag(\\&quot;kitten_fighting\\&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;kitten_fighting\\&quot;, flags: \\&quot;lossy\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting\\&quot;, flags: \\&quot;lossy\\&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;lossy\\&quot;)).BuildImageTag(\\&quot;kitten_fighting\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;lossy\\&quot;)).BuildImageTag(\\&quot;kitten_fighting\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\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().setFlags(\\&quot;lossy\\&quot;)).generate(\\&quot;kitten_fighting\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;lossy\\&quot;)).generate(\\&quot;kitten_fighting\\&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;lossy\\&quot;)).generate(\\&quot;kitten_fighting\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;lossy\\&quot;)).generate(\\&quot;kitten_fighting\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\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;kitten_fighting.gif\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.gif()) {\\n\\t lossy()\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.gif\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.gif()) {\\n\\t lossy()\\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;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&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;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(gif()).lossy());&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_lossy\\\/kitten_fighting.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;flags&quot;:&quot;lossy&quot;}],&quot;transformation_string&quot;:&quot;fl_lossy&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;kitten_fighting.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\/fl_lossy\/kitten_fighting.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_lossy\/kitten_fighting.gif\" alt=\"Optimized animated GIF with lossy compression\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"320\" height=\"180\"\/><\/a><\/p>\n<p>An excellent tip on GIF compression: to fine-tune the level of lossy compression in compressed animated GIFs, add the <code>quality<\/code> parameter (<code>q<\/code> in URLs), whose default value is <code>80<\/code>. Enabling lossy compression and setting the <code>quality<\/code> parameter to <code>50<\/code> for the kitten GIF produces a <strong>2.1-MB<\/strong> image, approximately 30 percent of the original size:<\/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;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&quot;, quality: 50})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&quot;, quality: 50})&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;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting\\&quot; &gt; &lt;Transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;Transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&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;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting\\&quot; &gt; &lt;cld-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;cld-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&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;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting\\&quot; &gt; &lt;cl-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;cl-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&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;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting&#039;, {flags: \\&quot;lossy\\&quot;, quality: 50}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting&#039;, {flags: \\&quot;lossy\\&quot;, quality: 50}).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;kitten_fighting\\&quot;).image(flags=\\&quot;lossy\\&quot;, quality=50)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;kitten_fighting\\&quot;).image(flags=\\&quot;lossy\\&quot;, quality=50)&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;kitten_fighting.gif&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::gif())\\n\\t-&gt;lossy()\\n\\t)\\n\\t-&gt;delivery(Delivery::quality(50));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;kitten_fighting.gif&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::gif())\\n\\t-&gt;lossy()\\n\\t)\\n\\t-&gt;delivery(Delivery::quality(50));&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;kitten_fighting\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;lossy\\&quot;, \\&quot;quality\\&quot;=&gt;50))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting\\&quot;, array(\\&quot;flags\\&quot;=&gt;\\&quot;lossy\\&quot;, \\&quot;quality\\&quot;=&gt;50))&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;lossy\\&quot;).quality(50)).imageTag(\\&quot;kitten_fighting\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().flags(\\&quot;lossy\\&quot;).quality(50)).imageTag(\\&quot;kitten_fighting\\&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;kitten_fighting\\&quot;, flags: \\&quot;lossy\\&quot;, quality: 50)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting\\&quot;, flags: \\&quot;lossy\\&quot;, quality: 50)&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;lossy\\&quot;).Quality(50)).BuildImageTag(\\&quot;kitten_fighting\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(\\&quot;lossy\\&quot;).Quality(50)).BuildImageTag(\\&quot;kitten_fighting\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&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;lossy\\&quot;).setQuality(50)).generate(\\&quot;kitten_fighting\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(\\&quot;lossy\\&quot;).setQuality(50)).generate(\\&quot;kitten_fighting\\&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;lossy\\&quot;).quality(50)).generate(\\&quot;kitten_fighting\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().flags(\\&quot;lossy\\&quot;).quality(50)).generate(\\&quot;kitten_fighting\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&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;kitten_fighting.gif\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.gif()) {\\n\\t lossy()\\n\\t })\\n\\t delivery(Delivery.quality(50)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.gif\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.gif()) {\\n\\t lossy()\\n\\t })\\n\\t delivery(Delivery.quality(50)) \\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;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&quot;, quality: 50})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting\\&quot;, {flags: \\&quot;lossy\\&quot;, quality: 50})&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;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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_lossy,q_50\\\/kitten_fighting.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;flags&quot;:&quot;lossy&quot;,&quot;quality&quot;:&quot;50&quot;}],&quot;transformation_string&quot;:&quot;fl_lossy,q_50&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;kitten_fighting.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\/fl_lossy,q_50\/kitten_fighting.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/fl_lossy,q_50\/kitten_fighting.gif\" alt=\"GIF of a kitten playing with a plant with quality set to 50 in the lossy GIF compression project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"320\" height=\"180\"\/><\/a><\/p>\n<h2>Further Transforming Animated GIFs<\/h2>\n<p>You can apply lossy compression on Cloudinary with any of the platform\u2019s rich set of image optimization and transformation capabilities to match any graphic design, dimension, device, browser, responsive layout, and such. Lossy compression can also optimize generated images. So, instead of optimizing the original, large animated GIF, you can optimize a transformed or cropped version for display.<\/p>\n<p>For example, these steps generate and deliver a calibrated version of the kitten GIF:<\/p>\n<ol>\n<li>Crop the GIF to a width of 50 percent and a height of 80 percent.<\/li>\n<li>Add an uploaded PNG image named <code>cloudinary_icon<\/code> as an overlay.\nResize the overlay to a width of 40 pixels, positioned 5 pixels from the top-right corner of the animated GIF; and make the overlay 40 percent semitransparent.<\/li>\n<li>Apply lossy compression with a quantity value of 50 percent.<\/li>\n<\/ol>\n<p>Voila! The optimized GIF size is only <strong>765 KB<\/strong>, 60 percent less than the original size of <strong>1.9<\/strong> MB.\n<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;kitten_fighting\\&quot;, {transformation: [ {width: \\&quot;0.5\\&quot;, height: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {overlay: \\&quot;cloudinary_icon\\&quot;, width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;}, {flags: \\&quot;lossy\\&quot;, quality: 50} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;kitten_fighting\\&quot;, {transformation: [\\n  {width: \\&quot;0.5\\&quot;, height: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {overlay: \\&quot;cloudinary_icon\\&quot;, width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;},\\n  {flags: \\&quot;lossy\\&quot;, quality: 50}\\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;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting\\&quot; &gt; &lt;Transformation width=\\&quot;0.5\\&quot; height=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;40\\&quot; gravity=\\&quot;north_east\\&quot; opacity=\\&quot;40\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;0.5\\&quot; height=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;40\\&quot; gravity=\\&quot;north_east\\&quot; opacity=\\&quot;40\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&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;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting\\&quot; &gt; &lt;cld-transformation width=\\&quot;0.5\\&quot; height=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;40\\&quot; gravity=\\&quot;north_east\\&quot; opacity=\\&quot;40\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;0.5\\&quot; height=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;40\\&quot; gravity=\\&quot;north_east\\&quot; opacity=\\&quot;40\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&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;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting\\&quot; &gt; &lt;cl-transformation width=\\&quot;0.5\\&quot; height=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;40\\&quot; gravity=\\&quot;north_east\\&quot; opacity=\\&quot;40\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;kitten_fighting\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;0.5\\&quot; height=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;cloudinary_icon\\&quot; width=\\&quot;40\\&quot; gravity=\\&quot;north_east\\&quot; opacity=\\&quot;40\\&quot; x=\\&quot;5\\&quot; y=\\&quot;5\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation flags=\\&quot;lossy\\&quot; quality=\\&quot;50\\&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;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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;kitten_fighting&#039;, {transformation: [ {width: \\&quot;0.5\\&quot;, height: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;}, {flags: \\&quot;lossy\\&quot;, quality: 50} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting&#039;, {transformation: [\\n  {width: \\&quot;0.5\\&quot;, height: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;},\\n  {flags: \\&quot;lossy\\&quot;, quality: 50}\\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;kitten_fighting\\&quot;).image(transformation=[ {&#039;width&#039;: \\&quot;0.5\\&quot;, &#039;height&#039;: \\&quot;0.8\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;}, {&#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;width&#039;: 40, &#039;gravity&#039;: \\&quot;north_east\\&quot;, &#039;opacity&#039;: 40, &#039;x&#039;: 5, &#039;y&#039;: 5, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;flags&#039;: \\&quot;lossy\\&quot;, &#039;quality&#039;: 50} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;kitten_fighting\\&quot;).image(transformation=[\\n  {&#039;width&#039;: \\&quot;0.5\\&quot;, &#039;height&#039;: \\&quot;0.8\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;cloudinary_icon\\&quot;, &#039;width&#039;: 40, &#039;gravity&#039;: \\&quot;north_east\\&quot;, &#039;opacity&#039;: 40, &#039;x&#039;: 5, &#039;y&#039;: 5, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;flags&#039;: \\&quot;lossy\\&quot;, &#039;quality&#039;: 50}\\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;kitten_fighting.gif&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(0.5)\\n-&gt;height(0.8))\\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(40))\\n\\t-&gt;adjust(Adjust::opacity(40)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northEast()))\\n-&gt;offsetX(5)\\n-&gt;offsetY(5))\\n\\t)\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::gif())\\n\\t-&gt;lossy()\\n\\t)\\n\\t-&gt;delivery(Delivery::quality(50));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;kitten_fighting.gif&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(0.5)\\n-&gt;height(0.8))\\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(40))\\n\\t-&gt;adjust(Adjust::opacity(40)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northEast()))\\n-&gt;offsetX(5)\\n-&gt;offsetY(5))\\n\\t)\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::gif())\\n\\t-&gt;lossy()\\n\\t)\\n\\t-&gt;delivery(Delivery::quality(50));&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;kitten_fighting\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;\\&quot;0.5\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;width\\&quot;=&gt;40, \\&quot;gravity\\&quot;=&gt;\\&quot;north_east\\&quot;, \\&quot;opacity\\&quot;=&gt;40, \\&quot;x\\&quot;=&gt;5, \\&quot;y\\&quot;=&gt;5, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;flags\\&quot;=&gt;\\&quot;lossy\\&quot;, \\&quot;quality\\&quot;=&gt;50) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;\\&quot;0.5\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;cloudinary_icon\\&quot;, \\&quot;width\\&quot;=&gt;40, \\&quot;gravity\\&quot;=&gt;\\&quot;north_east\\&quot;, \\&quot;opacity\\&quot;=&gt;40, \\&quot;x\\&quot;=&gt;5, \\&quot;y\\&quot;=&gt;5, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;flags\\&quot;=&gt;\\&quot;lossy\\&quot;, \\&quot;quality\\&quot;=&gt;50)\\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(0.5).height(0.8).crop(\\&quot;crop\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(40).gravity(\\&quot;north_east\\&quot;).opacity(40).x(5).y(5).crop(\\&quot;scale\\&quot;).chain() .flags(\\&quot;lossy\\&quot;).quality(50)).imageTag(\\&quot;kitten_fighting\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(0.5).height(0.8).crop(\\&quot;crop\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(40).gravity(\\&quot;north_east\\&quot;).opacity(40).x(5).y(5).crop(\\&quot;scale\\&quot;).chain()\\n  .flags(\\&quot;lossy\\&quot;).quality(50)).imageTag(\\&quot;kitten_fighting\\&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;kitten_fighting\\&quot;, transformation: [ {width: 0.5, height: 0.8, crop: \\&quot;crop\\&quot;}, {overlay: \\&quot;cloudinary_icon\\&quot;, width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;}, {flags: \\&quot;lossy\\&quot;, quality: 50} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting\\&quot;, transformation: [\\n  {width: 0.5, height: 0.8, crop: \\&quot;crop\\&quot;},\\n  {overlay: \\&quot;cloudinary_icon\\&quot;, width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;},\\n  {flags: \\&quot;lossy\\&quot;, quality: 50}\\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(0.5).Height(0.8).Crop(\\&quot;crop\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Width(40).Gravity(\\&quot;north_east\\&quot;).Opacity(40).X(5).Y(5).Crop(\\&quot;scale\\&quot;).Chain() .Flags(\\&quot;lossy\\&quot;).Quality(50)).BuildImageTag(\\&quot;kitten_fighting\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(0.5).Height(0.8).Crop(\\&quot;crop\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;cloudinary_icon\\&quot;)).Width(40).Gravity(\\&quot;north_east\\&quot;).Opacity(40).X(5).Y(5).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Flags(\\&quot;lossy\\&quot;).Quality(50)).BuildImageTag(\\&quot;kitten_fighting\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.5)\\n.height(0.8))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(40))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(5)\\n.offsetY(5))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.5)\\n.height(0.8))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(40))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(5)\\n.offsetY(5))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&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(0.5).setHeight(0.8).setCrop(\\&quot;crop\\&quot;).chain() .setOverlay(\\&quot;cloudinary_icon\\&quot;).setWidth(40).setGravity(\\&quot;north_east\\&quot;).setOpacity(40).setX(5).setY(5).setCrop(\\&quot;scale\\&quot;).chain() .setFlags(\\&quot;lossy\\&quot;).setQuality(50)).generate(\\&quot;kitten_fighting\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(0.5).setHeight(0.8).setCrop(\\&quot;crop\\&quot;).chain()\\n  .setOverlay(\\&quot;cloudinary_icon\\&quot;).setWidth(40).setGravity(\\&quot;north_east\\&quot;).setOpacity(40).setX(5).setY(5).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setFlags(\\&quot;lossy\\&quot;).setQuality(50)).generate(\\&quot;kitten_fighting\\&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(0.5).height(0.8).crop(\\&quot;crop\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(40).gravity(\\&quot;north_east\\&quot;).opacity(40).x(5).y(5).crop(\\&quot;scale\\&quot;).chain() .flags(\\&quot;lossy\\&quot;).quality(50)).generate(\\&quot;kitten_fighting\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(0.5).height(0.8).crop(\\&quot;crop\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;cloudinary_icon\\&quot;)).width(40).gravity(\\&quot;north_east\\&quot;).opacity(40).x(5).y(5).crop(\\&quot;scale\\&quot;).chain()\\n  .flags(\\&quot;lossy\\&quot;).quality(50)).generate(\\&quot;kitten_fighting\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.5)\\n.height(0.8))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(40))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(5)\\n.offsetY(5))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.5)\\n.height(0.8))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(40))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(5)\\n.offsetY(5))\\n\\t)\\n\\t.delivery(Delivery.format(\\n\\tFormat.gif())\\n\\t.lossy()\\n\\t)\\n\\t.delivery(Delivery.quality(50)));&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;kitten_fighting.gif\\&quot;)\\n\\t resize(Resize.crop() { width(0.5F)\\n height(0.8F) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(40) })\\n\\t adjust(Adjust.opacity(40)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n offsetX(5)\\n offsetY(5) })\\n\\t })\\n\\t delivery(Delivery.format(\\n\\tFormat.gif()) {\\n\\t lossy()\\n\\t })\\n\\t delivery(Delivery.quality(50)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.gif\\&quot;)\\n\\t resize(Resize.crop() { width(0.5F)\\n height(0.8F) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;cloudinary_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(40) })\\n\\t adjust(Adjust.opacity(40)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n offsetX(5)\\n offsetY(5) })\\n\\t })\\n\\t delivery(Delivery.format(\\n\\tFormat.gif()) {\\n\\t lossy()\\n\\t })\\n\\t delivery(Delivery.quality(50)) \\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;kitten_fighting\\&quot;, {transformation: [ {width: \\&quot;0.5\\&quot;, height: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;}, {flags: \\&quot;lossy\\&quot;, quality: 50} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting\\&quot;, {transformation: [\\n  {width: \\&quot;0.5\\&quot;, height: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;cloudinary_icon\\&quot;), width: 40, gravity: \\&quot;north_east\\&quot;, opacity: 40, x: 5, y: 5, crop: \\&quot;scale\\&quot;},\\n  {flags: \\&quot;lossy\\&quot;, quality: 50}\\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;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;)\\n  .resize(crop().width(0.5).height(0.8))\\n  .overlay(\\n    source(\\n      image(\\&quot;cloudinary_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(40)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(5)\\n        .offsetY(5)\\n    )\\n  )\\n  .delivery(format(gif()).lossy())\\n  .delivery(quality(50));&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\\\/c_crop,w_0.5,h_0.8\\\/l_cloudinary_icon,c_scale,w_40,g_north_east,o_40,x_5,y_5\\\/fl_lossy,q_50\\\/kitten_fighting.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;crop_mode&quot;:&quot;crop&quot;,&quot;width&quot;:&quot;0.5&quot;,&quot;height&quot;:&quot;0.8&quot;},{&quot;overlay&quot;:&quot;cloudinary_icon&quot;,&quot;crop_mode&quot;:&quot;scale&quot;,&quot;width&quot;:&quot;40&quot;,&quot;gravity&quot;:&quot;north_east&quot;,&quot;opacity&quot;:&quot;40&quot;,&quot;x&quot;:&quot;5&quot;,&quot;y&quot;:&quot;5&quot;},{&quot;flags&quot;:&quot;lossy&quot;,&quot;quality&quot;:&quot;50&quot;}],&quot;transformation_string&quot;:&quot;c_crop,w_0.5,h_0.8\\\/l_cloudinary_icon,c_scale,w_40,g_north_east,o_40,x_5,y_5\\\/fl_lossy,q_50&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;kitten_fighting.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\/c_crop,w_0.5,h_0.8\/l_cloudinary_icon,c_scale,w_40,g_north_east,o_40,x_5,y_5\/fl_lossy,q_50\/kitten_fighting.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_crop,w_0.5,h_0.8\/l_cloudinary_icon,c_scale,w_40,g_north_east,o_40,x_5,y_5\/fl_lossy,q_50\/kitten_fighting.gif\" alt=\"GIF of a kitten playing with a plant resized with the Cloudinary logo overlayed in the lossy GIF compression project\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"160\" height=\"144\"\/><\/a><\/p>\n<h2>Summing Up<\/h2>\n<p>To recap, applying lossy compression to animated GIFs yields two major benefits: the flexibility of displaying those lively GIFs and the bandwidth savings from smaller yet still-visually-pleasing images, not to mention an enhanced user experience. The setup takes only minimal effort on your part, freeing you up to focus on developing websites and apps.<\/p>\n<p>Keep in mind these two handy tips:<\/p>\n<ul>\n<li>To generate much smaller images in which to embed videos, have Cloudinary [automatically convert GIFs to videos] (<a href=\"https:\/\/cloudinary.com\/blog\/reduce_size_of_animated_gifs_automatically_convert_to_webm_and_mp4\">https:\/\/cloudinary.com\/blog\/reduce_size_of_animated_gifs_automatically_convert_to_webm_and_mp4<\/a>).<\/li>\n<li>Likewise, to enable users to upload videos but  display them as animated GIFs, have Cloudinary <a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery#creating_animated_gifs\">dynamically convert videos to GIFs<\/a>. Also, as a display enhancement, consider creating a single <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#manipulating_animated_gifs\">animated GIF<\/a> from multiple images, whereby each image is shown as a single frame of the single GIF.<\/li>\n<\/ul>\n<p>Lossy GIF compression for animated GIFs is available in all of Cloudinary\u2019s free and paid plans. To give it a try, <a href=\"https:\/\/cloudinary.com\/users\/register_free\">sign up for a free account<\/a> and forge ahead. You\u2019ll likely be impressed.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":23415,"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,227,229,257],"class_list":["post-21305","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-performance-optimization","tag-php","tag-ruby-on-rails"],"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>Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression<\/title>\n<meta name=\"description\" content=\"Learn how to optimize animated GIF images for free with Cloudinary&#039;s GIF compression tool.\" \/>\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\/lossy_compression_for_optimizing_animated_gifs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression\" \/>\n<meta property=\"og:description\" content=\"Learn how to optimize animated GIF images for free with Cloudinary&#039;s GIF compression tool.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-19T10:35:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T00:54:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\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\/lossy_compression_for_optimizing_animated_gifs#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression\",\"datePublished\":\"2020-01-19T10:35:00+00:00\",\"dateModified\":\"2025-11-07T00:54:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA\",\"keywords\":[\"Django\",\"DotNet\",\"Image Transformation\",\"Java\",\"jQuery\",\"Node\",\"Performance Optimization\",\"PHP\",\"Ruby on Rails\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\",\"url\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\",\"name\":\"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA\",\"datePublished\":\"2020-01-19T10:35:00+00:00\",\"dateModified\":\"2025-11-07T00:54:55+00:00\",\"description\":\"Learn how to optimize animated GIF images for free with Cloudinary's GIF compression tool.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing a GIF file icon with a vice around it representing GIF compression\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression\"}]},{\"@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":"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression","description":"Learn how to optimize animated GIF images for free with Cloudinary's GIF compression tool.","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\/lossy_compression_for_optimizing_animated_gifs","og_locale":"en_US","og_type":"article","og_title":"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression","og_description":"Learn how to optimize animated GIF images for free with Cloudinary's GIF compression tool.","og_url":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs","og_site_name":"Cloudinary Blog","article_published_time":"2020-01-19T10:35:00+00:00","article_modified_time":"2025-11-07T00:54:55+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs"},"author":{"name":"","@id":""},"headline":"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression","datePublished":"2020-01-19T10:35:00+00:00","dateModified":"2025-11-07T00:54:55+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs"},"wordCount":11,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA","keywords":["Django","DotNet","Image Transformation","Java","jQuery","Node","Performance Optimization","PHP","Ruby on Rails"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs","url":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs","name":"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA","datePublished":"2020-01-19T10:35:00+00:00","dateModified":"2025-11-07T00:54:55+00:00","description":"Learn how to optimize animated GIF images for free with Cloudinary's GIF compression tool.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing a GIF file icon with a vice around it representing GIF compression"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Lossy GIF Compression | How to Optimize Animated GIFs With Lossy Compression"}]},{"@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\/v1647045733\/66_animated_lossy_gif\/66_animated_lossy_gif.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21305","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=21305"}],"version-history":[{"count":8,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21305\/revisions"}],"predecessor-version":[{"id":39160,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21305\/revisions\/39160"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/23415"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}