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:
cl_image_tag("bored_animation.gif")
PHP:
cl_image_tag("bored_animation.gif")
Python:
CloudinaryImage("bored_animation.gif").image()
Node.js:
cloudinary.image("bored_animation.gif")
Java:
cloudinary.url().imageTag("bored_animation.gif")
JS:
cl.imageTag('bored_animation.gif').toHtml();
jQuery:
$.cloudinary.image("bored_animation.gif")
React:
<Image publicId="bored_animation.gif" >

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

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.gif")
Original

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

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

</Image>
Angular:
<cl-image public-id="bored_animation.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.jpg")
1st frame-Default

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

Ruby:
cl_image_tag("bored_animation.jpg", :page=>10)
PHP:
cl_image_tag("bored_animation.jpg", array("page"=>10))
Python:
CloudinaryImage("bored_animation.jpg").image(page=10)
Node.js:
cloudinary.image("bored_animation.jpg", {page: 10})
Java:
cloudinary.url().transformation(new Transformation().page(10)).imageTag("bored_animation.jpg")
JS:
cl.imageTag('bored_animation.jpg', {page: 10}).toHtml();
jQuery:
$.cloudinary.image("bored_animation.jpg", {page: 10})
React:
<Image publicId="bored_animation.jpg" >
  <Transformation page="10" />
</Image>
Angular:
<cl-image public-id="bored_animation.jpg" >
  <cl-transformation page="10">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Page(10)).BuildImageTag("bored_animation.jpg")
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:
cl_image_tag("bored_animation.jpg", :overlay=>"play_button", :width=>0.4, :flags=>"relative", :opacity=>60)
PHP:
cl_image_tag("bored_animation.jpg", array("overlay"=>"play_button", "width"=>0.4, "flags"=>"relative", "opacity"=>60))
Python:
CloudinaryImage("bored_animation.jpg").image(overlay="play_button", width=0.4, flags="relative", opacity=60)
Node.js:
cloudinary.image("bored_animation.jpg", {overlay: "play_button", width: "0.4", flags: "relative", opacity: 60})
Java:
cloudinary.url().transformation(new Transformation().overlay("play_button").width(0.4).flags("relative").opacity(60)).imageTag("bored_animation.jpg")
JS:
cl.imageTag('bored_animation.jpg', {overlay: "play_button", width: "0.4", flags: "relative", opacity: 60}).toHtml();
jQuery:
$.cloudinary.image("bored_animation.jpg", {overlay: "play_button", width: "0.4", flags: "relative", opacity: 60})
React:
<Image publicId="bored_animation.jpg" >
  <Transformation overlay="play_button" width="0.4" flags="relative" opacity="60" />
</Image>
Angular:
<cl-image public-id="bored_animation.jpg" >
  <cl-transformation overlay="play_button" width="0.4" flags="relative" opacity="60">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("play_button").Width(0.4).Flags("relative").Opacity(60)).BuildImageTag("bored_animation.jpg")
Play button overlay

by Itay Taragano