Animated GIF manipulation

Transform animated GIFs just like any other image. Use Cloudinary's powerful image transformation tools to manipulate your animated GIFs just like you do for other standard still images.

Here's an example of an animated GIF uploaded to Cloudinary:

Ruby:
cl_image_tag("cloudinary_animation.gif")
PHP:
cl_image_tag("cloudinary_animation.gif")
Python:
CloudinaryImage("cloudinary_animation.gif").image()
Node.js:
cloudinary.image("cloudinary_animation.gif")
Java:
cloudinary.url().imageTag("cloudinary_animation.gif")
jQuery:
$.cloudinary.image("cloudinary_animation.gif")
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("cloudinary_animation.gif")
Original

Let's say we want to resize the animated GIF by half of its original size. This can be applied simply by using a decimal value to define the size you need, so for half of the image's size we can use the following:

Ruby:
cl_image_tag("cloudinary_animation.gif", :width=>0.5, :crop=>"scale")
PHP:
cl_image_tag("cloudinary_animation.gif", array("width"=>0.5, "crop"=>"scale"))
Python:
CloudinaryImage("cloudinary_animation.gif").image(width=0.5, crop="scale")
Node.js:
cloudinary.image("cloudinary_animation.gif", {width: 0.5, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("cloudinary_animation.gif")
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {width: 0.5, crop: "scale"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("cloudinary_animation.gif")
Resize

Here's an example of using the angle parameter (a in URLs) in order to rotate the image 90 degrees clockwise:

Ruby:
cl_image_tag("cloudinary_animation.gif", :angle=>90)
PHP:
cl_image_tag("cloudinary_animation.gif", array("angle"=>90))
Python:
CloudinaryImage("cloudinary_animation.gif").image(angle=90)
Node.js:
cloudinary.image("cloudinary_animation.gif", {angle: 90})
Java:
cloudinary.url().transformation(new Transformation().angle(90)).imageTag("cloudinary_animation.gif")
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {angle: 90})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Angle(90)).BuildImageTag("cloudinary_animation.gif")
Rotated

Applying image transformations for animated GIFs isn't limited to resizing of course. You can apply any of further transformations, including chained transformations. For example, here's how to add a text to our animated GIF

Ruby:
cl_image_tag("cloudinary_animation.gif", :overlay=>"text:Arial_40_bold:Sample%20text")
PHP:
cl_image_tag("cloudinary_animation.gif", array("overlay"=>"text:Arial_40_bold:Sample%20text"))
Python:
CloudinaryImage("cloudinary_animation.gif").image(overlay="text:Arial_40_bold:Sample%20text")
Node.js:
cloudinary.image("cloudinary_animation.gif", {overlay: "text:Arial_40_bold:Sample%20text"})
Java:
cloudinary.url().transformation(new Transformation().overlay("text:Arial_40_bold:Sample%20text")).imageTag("cloudinary_animation.gif")
jQuery:
$.cloudinary.image("cloudinary_animation.gif", {overlay: "text:Arial_40_bold:Sample%20text"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("text:Arial_40_bold:Sample%20text")).BuildImageTag("cloudinary_animation.gif")
Adding text

by Itay Taragano