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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/bored_animation.gif

Ruby:

cl_image_tag("bored_animation.gif")

PHP v1:

cl_image_tag("bored_animation.gif")

PHP v2:

(new ImageTag('bored_animation.gif'));

Python:

CloudinaryImage("bored_animation.gif").image()

Node.js:

cloudinary.image("bored_animation.gif")

Java:

cloudinary.url().imageTag("bored_animation.gif");

JS:

cloudinary.imageTag('bored_animation.gif').toHtml();

jQuery:

$.cloudinary.image("bored_animation.gif")

React:

<Image publicId="bored_animation.gif" >

</Image>

Vue.js:

<cld-image publicId="bored_animation.gif" >

</cld-image>

Angular:

<cl-image public-id="bored_animation.gif" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.gif")

Android:

MediaManager.get().url().generate("bored_animation.gif");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("bored_animation.gif")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/bored_animation.jpg

Ruby:

cl_image_tag("bored_animation.jpg")

PHP v1:

cl_image_tag("bored_animation.jpg")

PHP v2:

(new ImageTag('bored_animation.jpg'));

Python:

CloudinaryImage("bored_animation.jpg").image()

Node.js:

cloudinary.image("bored_animation.jpg")

Java:

cloudinary.url().imageTag("bored_animation.jpg");

JS:

cloudinary.imageTag('bored_animation.jpg').toHtml();

jQuery:

$.cloudinary.image("bored_animation.jpg")

React:

<Image publicId="bored_animation.jpg" >

</Image>

Vue.js:

<cld-image publicId="bored_animation.jpg" >

</cld-image>

Angular:

<cl-image public-id="bored_animation.jpg" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("bored_animation.jpg")

Android:

MediaManager.get().url().generate("bored_animation.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("bored_animation.jpg")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/pg_10/bored_animation.jpg

Ruby:

cl_image_tag("bored_animation.jpg", :page=>10)

PHP v1:

cl_image_tag("bored_animation.jpg", array("page"=>10))

PHP v2:

(new ImageTag('bored_animation.jpg'))
  ->extract(Extract::getPage()->byNumber(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:

cloudinary.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>

Vue.js:

<cld-image publicId="bored_animation.jpg" >
  <cld-transformation page="10" />
</cld-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")

Android:

MediaManager.get().url().transformation(new Transformation().page(10)).generate("bored_animation.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setPage(10)).generate("bored_animation.jpg")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_play_button,w_0.4,fl_relative,o_60/bored_animation.jpg

Ruby:

cl_image_tag("bored_animation.jpg", :overlay=>"play_button", :width=>0.4, :flags=>"relative", :opacity=>60)

PHP v1:

cl_image_tag("bored_animation.jpg", array("overlay"=>"play_button", "width"=>"0.4", "flags"=>"relative", "opacity"=>60))

PHP v2:

(new ImageTag('bored_animation.jpg'))
  ->overlay(
      Overlay::source(Source::image('play_button')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.4)->relative())
          ->adjust(Adjust::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(new Layer().publicId("play_button")).width(0.4).flags("relative").opacity(60)).imageTag("bored_animation.jpg");

JS:

cloudinary.imageTag('bored_animation.jpg', {overlay: new cloudinary.Layer().publicId("play_button"), width: "0.4", flags: "relative", opacity: 60}).toHtml();

jQuery:

$.cloudinary.image("bored_animation.jpg", {overlay: new cloudinary.Layer().publicId("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>

Vue.js:

<cld-image publicId="bored_animation.jpg" >
  <cld-transformation :overlay="play_button" width="0.4" flags="relative" opacity="60" />
</cld-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(new Layer().PublicId("play_button")).Width(0.4).Flags("relative").Opacity(60)).BuildImageTag("bored_animation.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("play_button")).width(0.4).flags("relative").opacity(60)).generate("bored_animation.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("play_button").setWidth(0.4).setFlags("relative").setOpacity(60)).generate("bored_animation.jpg")!, cloudinary: cloudinary)