Extract frames from an animated GIF

Extract frames from an animated GIF, you can choose which frame to deliver, apply any further image manipulations including resizing, cropping, overlays and much more.

Here's an original animated GIF:

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

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="bored_animation.gif" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="bored_animation.gif" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.gif")
Android:
Copy to clipboard
MediaManager.get().url().generate("bored_animation.gif");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("bored_animation.gif")!, cloudinary: cloudinary)
Original

Simply change the image's extension to any other non-animated format to generate the first frame (default):

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

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="bored_animation.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="bored_animation.jpg" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("bored_animation.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("bored_animation.jpg")!, cloudinary: cloudinary)
1st frame-Default

If you want to generate an image of a specific frame, use the page parameter (pg in URLs):

Ruby:
Copy to clipboard
cl_image_tag("bored_animation.jpg", :page=>10)
PHP:
Copy to clipboard
cl_image_tag("bored_animation.jpg", array("page"=>10))
Python:
Copy to clipboard
CloudinaryImage("bored_animation.jpg").image(page=10)
Node.js:
Copy to clipboard
cloudinary.image("bored_animation.jpg", {page: 10})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().page(10)).imageTag("bored_animation.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('bored_animation.jpg', {page: 10}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("bored_animation.jpg", {page: 10})
React:
Copy to clipboard
<Image publicId="bored_animation.jpg" >
  <Transformation page="10" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="bored_animation.jpg" >
  <cld-transformation page="10" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="bored_animation.jpg" >
  <cl-transformation page="10">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Page(10)).BuildImageTag("bored_animation.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().page(10)).generate("bored_animation.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setPage(10)).generate("bored_animation.jpg")!, cloudinary: cloudinary)
10th frame

You can achieve a more professional result by showing the still frame of the animation, with a small play button. For example:

Ruby:
Copy to clipboard
cl_image_tag("bored_animation.jpg", :overlay=>"play_button", :width=>0.4, :flags=>"relative", :opacity=>60)
PHP:
Copy to clipboard
cl_image_tag("bored_animation.jpg", array("overlay"=>"play_button", "width"=>0.4, "flags"=>"relative", "opacity"=>60))
Python:
Copy to clipboard
CloudinaryImage("bored_animation.jpg").image(overlay="play_button", width=0.4, flags="relative", opacity=60)
Node.js:
Copy to clipboard
cloudinary.image("bored_animation.jpg", {overlay: "play_button", width: "0.4", flags: "relative", opacity: 60})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("play_button")).width(0.4).flags("relative").opacity(60)).imageTag("bored_animation.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('bored_animation.jpg', {overlay: new cloudinary.Layer().publicId("play_button"), width: "0.4", flags: "relative", opacity: 60}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("bored_animation.jpg", {overlay: new cloudinary.Layer().publicId("play_button"), width: "0.4", flags: "relative", opacity: 60})
React:
Copy to clipboard
<Image publicId="bored_animation.jpg" >
  <Transformation overlay="play_button" width="0.4" flags="relative" opacity="60" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="bored_animation.jpg" >
  <cld-transformation overlay="play_button" width="0.4" flags="relative" opacity="60" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="bored_animation.jpg" >
  <cl-transformation overlay="play_button" width="0.4" flags="relative" opacity="60">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("play_button")).Width(0.4).Flags("relative").Opacity(60)).BuildImageTag("bored_animation.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("play_button")).width(0.4).flags("relative").opacity(60)).generate("bored_animation.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("play_button").setWidth(0.4).setFlags("relative").setOpacity(60)).generate("bored_animation.jpg")!, cloudinary: cloudinary)
Play button overlay

by Itay Taragano