Cloudinary Blog
How to Optimize Animated GIFs With Lossy Compression

Animated GIFs keep getting more and more popular, but they are generally very big images with slow loading times and high bandwidth costs, while the format itself is quite old and not optimized for modern video clips. As developers, you need to allow users to upload their animated GIF files, but you also need to deliver optimized images, which can be a complex, time consuming process.

One option is to convert animated GIFs to videos, another great feature available with Cloudinary which saves on file size and bandwidth (see this blog post for more details), but videos are still not as easy to embed in sites and apps compared to regular image tags, and some browsers and mobile devices still do not support auto playing video files. Another option is to convert animated GIFs to animated WebP files, but this format, introduced by Google is supported on Chrome, Android and Opera, and is unfortunately not supported by most of the other mobile devices and browsers. Likewise, GIF conversion tools seem to either create files that are too large and of high quality, or smaller files with a bad visual quality.

Another great solution is to perform GIF image optimization using a lossy compression technique rather than the lossless nature of the GIF format, allowing you to optimize uploaded animated GIFs to be delivered as smaller files while still looking good. Lossy compression is actually a misnomer for GIFs as the compression algorithms used in GIFs are lossless, and there is no loss of data when compressing this palette-based format (although converting to GIF from other image formats does result in a loss of data due to the 8bit GIF limitation of 256 colors).

The lossiness comes in when the GIF is first filtered or altered so that the image can then compress more efficiently. The loss of data occurs in this filtering phase by increasing redundant patterns along scan lines to subsequently improve the actual compression.

Applying lossy GIF compression

The lossy compression feature is available using Cloudinary's on-the-fly dynamic manipulation URLs, with no need to install any software or to use any computational power on your side because the image manipulation takes place in the cloud. To leverage this capability, and tell Cloudinary to automatically use lossy compression, all you need to do is set the flag parameter to lossy (fl_lossy in URLs).

For example, the following animated GIF named kitten_fighting uploaded to Cloudinary has a file size of 6.3 MB.

Ruby:
cl_image_tag("kitten_fighting.gif")
PHP:
cl_image_tag("kitten_fighting.gif")
Python:
CloudinaryImage("kitten_fighting.gif").image()
Node.js:
cloudinary.image("kitten_fighting.gif")
Java:
cloudinary.url().imageTag("kitten_fighting.gif");
JS:
cloudinary.imageTag('kitten_fighting.gif').toHtml();
jQuery:
$.cloudinary.image("kitten_fighting.gif")
React:
<Image publicId="kitten_fighting.gif" >

</Image>
Angular:
<cl-image public-id="kitten_fighting.gif" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("kitten_fighting.gif")
Android:
MediaManager.get().url().generate("kitten_fighting.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("kitten_fighting.gif")!, cloudinary: cloudinary)
original non-optimized animated GIF

Enabling the lossy flag, which means adding the fl_lossy parameter to the delivery URL, optimizes the animated GIF image to a file size of 2.5 MB. The file still looks good and is now 40% of the original size.

Ruby:
cl_image_tag("kitten_fighting.gif", :flags=>"lossy")
PHP:
cl_image_tag("kitten_fighting.gif", array("flags"=>"lossy"))
Python:
CloudinaryImage("kitten_fighting.gif").image(flags="lossy")
Node.js:
cloudinary.image("kitten_fighting.gif", {flags: "lossy"})
Java:
cloudinary.url().transformation(new Transformation().flags("lossy")).imageTag("kitten_fighting.gif");
JS:
cloudinary.imageTag('kitten_fighting.gif', {flags: "lossy"}).toHtml();
jQuery:
$.cloudinary.image("kitten_fighting.gif", {flags: "lossy"})
React:
<Image publicId="kitten_fighting.gif" >
  <Transformation flags="lossy" />
</Image>
Angular:
<cl-image public-id="kitten_fighting.gif" >
  <cl-transformation flags="lossy">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("lossy")).BuildImageTag("kitten_fighting.gif")
Android:
MediaManager.get().url().transformation(new Transformation().flags("lossy")).generate("kitten_fighting.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("lossy")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
Optimized animated GIF with lossy compression

You can further control the level of lossy compression in the resulting animated GIF by also adding the quality parameter (q in URLs), which has a default value of 80. For example, enabling lossy compression for the kitten_fighting GIF and also setting the quality parameter to 50 results in a file size of 2.1 MB, which means we saved almost 70% of the original file size.

Ruby:
cl_image_tag("kitten_fighting.gif", :flags=>"lossy", :quality=>50)
PHP:
cl_image_tag("kitten_fighting.gif", array("flags"=>"lossy", "quality"=>50))
Python:
CloudinaryImage("kitten_fighting.gif").image(flags="lossy", quality=50)
Node.js:
cloudinary.image("kitten_fighting.gif", {flags: "lossy", quality: 50})
Java:
cloudinary.url().transformation(new Transformation().flags("lossy").quality(50)).imageTag("kitten_fighting.gif");
JS:
cloudinary.imageTag('kitten_fighting.gif', {flags: "lossy", quality: 50}).toHtml();
jQuery:
$.cloudinary.image("kitten_fighting.gif", {flags: "lossy", quality: 50})
React:
<Image publicId="kitten_fighting.gif" >
  <Transformation flags="lossy" quality="50" />
</Image>
Angular:
<cl-image public-id="kitten_fighting.gif" >
  <cl-transformation flags="lossy" quality="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("lossy").Quality(50)).BuildImageTag("kitten_fighting.gif")
Android:
MediaManager.get().url().transformation(new Transformation().flags("lossy").quality(50)).generate("kitten_fighting.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("lossy").setQuality(50)).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
50% quality lossy animated GIF

Further animated GIF manipulations with lossy compression

The lossy compression feature can be mixed with any of Cloudinary's rich set of image optimization and manipulation capabilities to match any graphic design, any dimensions, different devices, different browsers, responsive layouts and more. Lossy compression can also optimize a generated image, so instead of optimizing the original large animated GIF, you can optimize each manipulated or cropped version you would like to display.

For example, the following code generates and delivers a version of the uploaded kitten_fighting animated GIF as follows: Crops the animated GIF to a width of 50% and a height of 80%. Adds another uploaded png image named cloudinary_icon as an overlay. The overlay is resized to a width of 40 pixels, positioned 5 pixels from the top right corner of the animated GIF and is made 40% semi transparent. Lossy compression is applied with a quantity value of 50%.

The size of the delivered file is 765 KB compared to 1.9 MB without using lossy compression (a reduction of 60% in file size).

Ruby:
cl_image_tag("kitten_fighting.gif", :transformation=>[
  {:width=>0.5, :height=>0.8, :crop=>"crop"},
  {:overlay=>"cloudinary_icon", :width=>40, :gravity=>"north_east", :opacity=>40, :x=>5, :y=>5, :crop=>"scale"},
  {:flags=>"lossy", :quality=>50}
  ])
PHP:
cl_image_tag("kitten_fighting.gif", array("transformation"=>array(
  array("width"=>0.5, "height"=>0.8, "crop"=>"crop"),
  array("overlay"=>"cloudinary_icon", "width"=>40, "gravity"=>"north_east", "opacity"=>40, "x"=>5, "y"=>5, "crop"=>"scale"),
  array("flags"=>"lossy", "quality"=>50)
  )))
Python:
CloudinaryImage("kitten_fighting.gif").image(transformation=[
  {"width": 0.5, "height": 0.8, "crop": "crop"},
  {"overlay": "cloudinary_icon", "width": 40, "gravity": "north_east", "opacity": 40, "x": 5, "y": 5, "crop": "scale"},
  {"flags": "lossy", "quality": 50}
  ])
Node.js:
cloudinary.image("kitten_fighting.gif", {transformation: [
  {width: "0.5", height: "0.8", crop: "crop"},
  {overlay: "cloudinary_icon", width: 40, gravity: "north_east", opacity: 40, x: 5, y: 5, crop: "scale"},
  {flags: "lossy", quality: 50}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(0.5).height(0.8).crop("crop").chain()
  .overlay("cloudinary_icon").width(40).gravity("north_east").opacity(40).x(5).y(5).crop("scale").chain()
  .flags("lossy").quality(50)).imageTag("kitten_fighting.gif");
JS:
cloudinary.imageTag('kitten_fighting.gif', {transformation: [
  {width: "0.5", height: "0.8", crop: "crop"},
  {overlay: "cloudinary_icon", width: 40, gravity: "north_east", opacity: 40, x: 5, y: 5, crop: "scale"},
  {flags: "lossy", quality: 50}
  ]}).toHtml();
jQuery:
$.cloudinary.image("kitten_fighting.gif", {transformation: [
  {width: "0.5", height: "0.8", crop: "crop"},
  {overlay: "cloudinary_icon", width: 40, gravity: "north_east", opacity: 40, x: 5, y: 5, crop: "scale"},
  {flags: "lossy", quality: 50}
  ]})
React:
<Image publicId="kitten_fighting.gif" >
  <Transformation width="0.5" height="0.8" crop="crop" />
  <Transformation overlay="cloudinary_icon" width="40" gravity="north_east" opacity="40" x="5" y="5" crop="scale" />
  <Transformation flags="lossy" quality="50" />
</Image>
Angular:
<cl-image public-id="kitten_fighting.gif" >
  <cl-transformation width="0.5" height="0.8" crop="crop">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" width="40" gravity="north_east" opacity="40" x="5" y="5" crop="scale">
  </cl-transformation>
  <cl-transformation flags="lossy" quality="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(0.5).Height(0.8).Crop("crop").Chain()
  .Overlay("cloudinary_icon").Width(40).Gravity("north_east").Opacity(40).X(5).Y(5).Crop("scale").Chain()
  .Flags("lossy").Quality(50)).BuildImageTag("kitten_fighting.gif")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(0.5).height(0.8).crop("crop").chain()
  .overlay("cloudinary_icon").width(40).gravity("north_east").opacity(40).x(5).y(5).crop("scale").chain()
  .flags("lossy").quality(50)).generate("kitten_fighting.gif");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(0.5).setHeight(0.8).setCrop("crop").chain()
  .setOverlay("cloudinary_icon").setWidth(40).setGravity("north_east").setOpacity(40).setX(5).setY(5).setCrop("scale").chain()
  .setFlags("lossy").setQuality(50)).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
Animated GIF resized, with overlay added and 50% lossy GIF compression

Summary

Lossy compression for animated GIFs allows you to benefit from both worlds: support animated GIFs, enjoy their simplicity, and still deliver smaller files that look good. Improve your user's experience, save on bandwidth, and all that with zero effort in developing your web sites and apps.

If you need much smaller files and you are ready to embed video files, Cloudinary can auto convert GIFs to videos. Likewise, if you allow your users to upload video files and you want to display animated GIFs instead, you can use Cloudinary to dynamically convert videos to GIFs. You can also create a single animated GIF from multiple images, where each image is included as a single frame of the resulting GIF.

The lossy compression feature for animated GIFs is available to all our free and paid plans. If you don't have a Cloudinary account, you are welcome to sign up to our free account and try it out.

Recent Blog Posts

How to Make Boomerang Video Effect With Cloudinary

When you see the term boomerang, what is the first thing that comes to mind?

A thrown tool made of wood that returns to its thrower? Another definition is reversal, logically portraying the aim of the tool itself. Based on this definition, the term boomerang videos” came into play to depict videos that loop back and forth.

Read more
Shortening the Development Cycle of Media-Related apps with Cloudinary

Currently, the Android platform boasts the highest demand for mobile solutions, as evidenced by Google’s announcement in 2017 that there were two billion monthly active Android devices, a number that is likely to increase in the years ahead. For app developers like you, now is the right time to build and release solutions for Android. you might have also noticed that a higher percentage of apps being developed nowadays are filled with visual media: images and videos.

Read more
Build Your Own Image Storyboard Android App

Globally, approximately two billion people now own smartphones, which also feature cameras capable of capturing photos and videos of a tonal richness and quality unimaginable even five years ago. Until recently, those cameras behaved mostly as optical sensors, catching light that determines the resulting image's pixels. The next generation of cameras, however, can blend hardware and computer-vision algorithms that apply to an image's semantic content, spawning creative mobile photo and video apps.

Read more
Cloudinary Delivers Simplified Image Management Workflow for Fairfax Media's Digital Transformation

Fairfax Media Limited [ASX:FXJ] is one of the largest media companies in Australia and New Zealand that engages audiences and communities via print and digital media. It includes recognizable mastheads including The Australian Financial Review, The Sydney Morning Herald and The Age. Fairfax Media operates numerous news and information websites, as well as tablet and smartphone apps, for online news sites.

Read more
Bleacher Report Scores with Real-Time Video Highlights Delivered by Cloudinary

Bleacher Report is a global digital destination for sports fans, creating and collaborating on content at the intersection of sports and culture. Owned by Turner, a division of Time Warner, Bleacher Report's website and social channels focus on sports culture for the next generation of fans. Bleacher Report also has a five-star mobile app and popular email newsletters, which are part of the company’s strategy for instantly delivering in-depth articles, results and video highlights personalized for users’ favorite teams, players and leagues.

Read more