> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Converting videos to animated images


Cloudinary supports delivering your videos as animated images in either `AVIF`, `GIF`, `PNG` or `WebP` formats. 
When deciding which format to use, consider the following: 

* Animated GIFs are universally supported. Animated WebPs, animated AVIFs and animated PNGs are supported on most, [but not all](https://caniuse.com/?search=AVIF), browsers.
* Animated AVIF is based on the AV1 video codec that was released in 2019 and shares the same compression and quality levels.
* Animated PNG, WebP and AVIF support 24-bit RGB color with an 8-bit alpha channel, compared to GIF's 8-bit color and 1-bit alpha.
* AVIF and WebP support both lossy and lossless compression (a single animation can combine lossy and lossless frames), well-suited to animated images created from real-world videos. GIF and PNG only support lossless compression. 
* AVIF requires fewer bytes than WebP, which itself requires fewer bytes than GIF and PNG. 
  * Animated GIF converted to animated AVIF can provide over 90% byte savings. 
  * Animated GIF converted to animated WebP can provide between 64% byte savings (lossy WebP), to 19% byte savings (for lossless WebP).
* There are [different transformation counts](transformation_counts#animated_formats) for different animated formats.
> **TIP**: You can also deliver animated images as video files. For details, see [Converting an animated GIF to video](animated_images#converting_an_animated_gif_to_video).

## Delivering animated GIFs

To deliver an animated GIF from any video stored in your Cloudinary product environment, you just change the file extension of the URL to `.gif`. Converting a video to animated GIF is normally done while resizing and cropping to match your site (usually scaling down). By default, the resulting animated GIF is generated from the whole video (up to 400 frames, at up to 10 frames per second) and is the same duration as the original video no matter how many frames are sampled. The resulting animated GIFs can also be [further transformed](animated_images#transforming_animated_gifs) like any other Cloudinary image (subject to [length limitations](animated_images#length_limitations)).

To control how many frames are taken from the original video and the speed that they are displayed, use the `video_sampling` and `delay` parameters.

The `video_sampling` parameter  (`vs` in URLs) determines how many frames to sample from the original video and can take one of the following values:

* Integer - The total number of frames to sample from the original video. The frames are spread out over the length of the video, e.g. `25` samples one frame every 4%.

* String - A float with an s appended representing the number of seconds between each frame to sample from the original video. e.g. `2.3s` samples one frame every 2.3 seconds.

The `delay` parameter (`dl` in URLs) is used to set the time delay between the individual frames of the animated GIF, in milliseconds. 

By default, animated GIFs with a `resource_type` of `video` run a single time. Use the `loop` effect (`e_loop` in URLs) to run in an infinite loop, or specify a loop value to run a limited number of loops. The loop number value is 0-based. For example, to set your GIF to loop exactly 3 times, set the `loop` effect value to `2` (`e_loop:2` in URLs). 

**Examples of generating animated GIFs from uploaded videos:**

1. Using a sample of 40 frames from the original video and setting a delay of 100 milliseconds between the frames of the resulting animated GIF, which is scaled down to a height of 200 pixels and runs in an infinite loop:
![Animated GIF from dog.mp4, created from 40 frames and with a delay of 100 milliseconds](https://res.cloudinary.com/demo/video/upload/c_scale,h_200/e_loop/dl_200,vs_40/cld_rubix.gif )

1. Sampling one frame every 1.1 seconds from the original video and setting a delay of 200 milliseconds between the frames of the resulting animated GIF, which is scaled down to a width of 200 pixels and loops 3 times:
![Animated GIF from dog.mp4, created from a frame every 1.1 seconds and with a delay of 200 milliseconds](https://res.cloudinary.com/demo/video/upload/c_scale,w_200/e_loop:2/dl_200,vs_1.1s/dog.gif)

```nodejs
cloudinary.image("dog.gif", {resource_type: "video", transformation: [
  {width: 200, crop: "scale"},
  {effect: "loop:2"},
  {delay: "200", video_sampling: "1.1s"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { edit } from "@cloudinary/url-gen/actions/animated";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(200))
  .animated(edit().loop(2))
  .transcode(toAnimated().sampling("1.1s"))
  .animated(edit().delay(200))
  .setAssetType("video");
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { edit } from "@cloudinary/url-gen/actions/animated";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(200))
  .animated(edit().loop(2))
  .transcode(toAnimated().sampling("1.1s"))
  .animated(edit().delay(200))
  .setAssetType("video");
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { edit } from "@cloudinary/url-gen/actions/animated";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(200))
  .animated(edit().loop(2))
  .transcode(toAnimated().sampling("1.1s"))
  .animated(edit().delay(200))
  .setAssetType("video");
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { edit } from "@cloudinary/url-gen/actions/animated";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(200))
  .animated(edit().loop(2))
  .transcode(toAnimated().sampling("1.1s"))
  .animated(edit().delay(200))
  .setAssetType("video");
```

```python
CloudinaryVideo("dog.gif").image(transformation=[
  {'width': 200, 'crop': "scale"},
  {'effect': "loop:2"},
  {'delay': "200", 'video_sampling': "1.1s"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Animated;
use Cloudinary\Transformation\Transcode;

(new ImageTag('dog.gif'))
	->resize(Resize::scale()->width(200))
	->animated(Animated::edit()->loop(2))
	->transcode(Transcode::toAnimated()->sampling("1.1s"))
	->animated(Animated::edit()->delay(200))
	->assetType("video");
```

```java
cloudinary.url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .effect("loop:2").chain()
  .delay("200").videoSampling("1.1s")).resourceType("video").imageTag("dog.gif");
```

```ruby
cl_image_tag("dog.gif", resource_type: "video", transformation: [
  {width: 200, crop: "scale"},
  {effect: "loop:2"},
  {delay: "200", video_sampling: "1.1s"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Effect("loop:2").Chain()
  .Delay("200").VideoSampling("1.1s")).BuildImageTag("dog.gif")
```

```dart
cloudinary.image('dog.gif').transformation(Transformation()
	.addTransformation("c_scale,w_200/e_loop:2/dl_200,vs_1.1s")
	.setAssetType("video"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setEffect("loop:2").chain()
  .setDelay("200").setVideoSampling("1.1s")).generate("dog.gif")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .effect("loop:2").chain()
  .delay("200").videoSampling("1.1s")).resourceType("video").generate("dog.gif");
```

```flutter
cloudinary.image('dog.gif').transformation(Transformation()
	.addTransformation("c_scale,w_200/e_loop:2/dl_200,vs_1.1s")
	.setAssetType("video"));
```

```kotlin
cloudinary.image {
	publicId("dog.gif")
	 resize(Resize.scale() { width(200) })
	 animated(Animated.edit() { loop(2) })
	 transcode(Transcode.toAnimated() { sampling("1.1s") })
	 animated(Animated.edit() { delay(200) })
	 assetType("video") 
}.generate()
```

```jquery
$.cloudinary.image("dog.gif", {resource_type: "video", transformation: [
  {width: 200, crop: "scale"},
  {effect: "loop:2"},
  {delay: "200", video_sampling: "1.1s"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { edit } from "@cloudinary/url-gen/actions/animated";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(200))
  .animated(edit().loop(2))
  .transcode(toAnimated().sampling("1.1s"))
  .animated(edit().delay(200))
  .setAssetType("video");
```

## Delivering animated WebP files

To deliver an animated WebP from an uploaded video, change the file extension to `.webp` and set the `awebp` and `animated` flags (`fl_awebp` and `fl_animated` in URLs). You can generate animated WebPs at up to 30 frames per second.

For example, generating an animated WebP from the uploaded MP4 video named `dog`, and also scaling it down to a width of 250 pixels:

![Animated WebP created from the dog video](https://res.cloudinary.com/demo/video/upload/c_scale,w_250/fl_animated,fl_awebp/dog.webp)

```nodejs
cloudinary.image("dog.webp", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: ["animated", "awebp"]}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.webp")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.webp")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.webp")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.webp")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```python
CloudinaryVideo("dog.webp").image(transformation=[
  {'width': 250, 'crop': "scale"},
  {'flags': ["animated", "awebp"]}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Transcode;

(new ImageTag('dog.webp'))
	->resize(Resize::scale()->width(250))
	->transcode(Transcode::toAnimated())
	->assetType("video");
```

```java
cloudinary.url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated", "awebp")).resourceType("video").imageTag("dog.webp");
```

```ruby
cl_image_tag("dog.webp", resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: ["animated", "awebp"]}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(250).Crop("scale").Chain()
  .Flags("animated", "awebp")).BuildImageTag("dog.webp")
```

```dart
cloudinary.image('dog.webp').transformation(Transformation()
	.addTransformation("c_scale,w_250/fl_animated,fl_awebp")
	.setAssetType("video"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(250).setCrop("scale").chain()
  .setFlags("animated", "awebp")).generate("dog.webp")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated", "awebp")).resourceType("video").generate("dog.webp");
```

```flutter
cloudinary.image('dog.webp').transformation(Transformation()
	.addTransformation("c_scale,w_250/fl_animated,fl_awebp")
	.setAssetType("video"));
```

```kotlin
cloudinary.image {
	publicId("dog.webp")
	 resize(Resize.scale() { width(250) })
	 transcode(Transcode.toAnimated())
	 assetType("video") 
}.generate()
```

```jquery
$.cloudinary.image("dog.webp", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: ["animated", "awebp"]}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.webp")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

See the [blog post on animated WebP](https://cloudinary.com/blog/animated_webp_how_to_convert_animated_gif_to_webp_and_save_up_to_90_bandwidth) for more information.

## Delivering animated PNG files

To deliver an animated PNG from an uploaded video, change the file extension to `.png` and set the `apng` and `animated` flags (`fl_apng` and `fl_animated` in URLs).

For example, generating an animated PNG from the uploaded MP4 video named `dog`, and also scaling it down to a width of 250 pixels:

![Animated PMG created from the dog video](https://res.cloudinary.com/demo/video/upload/c_scale,w_250/fl_animated,fl_apng/dog.png)

```nodejs
cloudinary.image("dog.png", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: ["animated", "apng"]}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.png")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .addFlag("apng")
  .setAssetType("video");
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.png")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .addFlag("apng")
  .setAssetType("video");
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.png")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .addFlag("apng")
  .setAssetType("video");
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.png")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .addFlag("apng")
  .setAssetType("video");
```

```python
CloudinaryVideo("dog.png").image(transformation=[
  {'width': 250, 'crop': "scale"},
  {'flags': ["animated", "apng"]}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Transcode;

(new ImageTag('dog.png'))
	->resize(Resize::scale()->width(250))
	->transcode(Transcode::toAnimated())
	->addFlag("apng")
	->assetType("video");
```

```java
cloudinary.url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated", "apng")).resourceType("video").imageTag("dog.png");
```

```ruby
cl_image_tag("dog.png", resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: ["animated", "apng"]}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(250).Crop("scale").Chain()
  .Flags("animated", "apng")).BuildImageTag("dog.png")
```

```dart
cloudinary.image('dog.png').transformation(Transformation()
	.addTransformation("c_scale,w_250/fl_animated,fl_apng")
	.setAssetType("video"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(250).setCrop("scale").chain()
  .setFlags("animated", "apng")).generate("dog.png")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated", "apng")).resourceType("video").generate("dog.png");
```

```flutter
cloudinary.image('dog.png').transformation(Transformation()
	.addTransformation("c_scale,w_250/fl_animated,fl_apng")
	.setAssetType("video"));
```

```kotlin
cloudinary.image {
	publicId("dog.png")
	 resize(Resize.scale() { width(250) })
	 transcode(Transcode.toAnimated())
	 addFlag("apng")
	 assetType("video") 
}.generate()
```

```jquery
$.cloudinary.image("dog.png", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: ["animated", "apng"]}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.png")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .addFlag("apng")
  .setAssetType("video");
```

## Delivering animated AVIF files

To deliver an animated AVIF from an uploaded video, change the file extension to `.avif` and set the `animated` flag (`fl_animated` in URLs).

For example, generating an animated AVIF from the uploaded MP4 video named `dog`, and also scaling it down to a width of 250 pixels:

![Animated AVIF created from the dog video](https://res.cloudinary.com/demo/video/upload/c_scale,w_250/fl_animated/dog.avif)

```nodejs
cloudinary.image("dog.avif", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: "animated"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.avif")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.avif")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.avif")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.avif")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

```python
CloudinaryVideo("dog.avif").image(transformation=[
  {'width': 250, 'crop': "scale"},
  {'flags': "animated"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Transcode;

(new ImageTag('dog.avif'))
	->resize(Resize::scale()->width(250))
	->transcode(Transcode::toAnimated())
	->assetType("video");
```

```java
cloudinary.url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated")).resourceType("video").imageTag("dog.avif");
```

```ruby
cl_image_tag("dog.avif", resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: "animated"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(250).Crop("scale").Chain()
  .Flags("animated")).BuildImageTag("dog.avif")
```

```dart
cloudinary.image('dog.avif').transformation(Transformation()
	.addTransformation("c_scale,w_250/fl_animated")
	.setAssetType("video"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(250).setCrop("scale").chain()
  .setFlags("animated")).generate("dog.avif")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated")).resourceType("video").generate("dog.avif");
```

```flutter
cloudinary.image('dog.avif').transformation(Transformation()
	.addTransformation("c_scale,w_250/fl_animated")
	.setAssetType("video"));
```

```kotlin
cloudinary.image {
	publicId("dog.avif")
	 resize(Resize.scale() { width(250) })
	 transcode(Transcode.toAnimated())
	 assetType("video") 
}.generate()
```

```jquery
$.cloudinary.image("dog.avif", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: "animated"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.avif")
  .resize(scale().width(250))
  .transcode(toAnimated())
  .setAssetType("video");
```

## Delivering animated images with automatic format selection

You can also create animated images from videos together with automatic format selection (`f_auto`). To deliver the asset as an animated image rather than a video, you have two options:

* Add the `animated` flag (`fl_animated`) as well as `f_auto`.
* Add the `animated` option when specifying automatic format (`f_auto:animated`).

Adding either of these options will deliver an animated image in a format that is supported by the browser.

For example, to deliver an animated image of the MP4 video named `dog`  using the optimal format for the user's browser:

![Animated images with f_auto](https://res.cloudinary.com/demo/video/upload/c_scale,w_250/f_auto,fl_animated/dog.gif)

```nodejs
cloudinary.image("dog.gif", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: "animated", fetch_format: "auto"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(250))
  .transcode(toAnimated("auto"))
  .setAssetType("video");
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(250))
  .transcode(toAnimated("auto"))
  .setAssetType("video");
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(250))
  .transcode(toAnimated("auto"))
  .setAssetType("video");
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(250))
  .transcode(toAnimated("auto"))
  .setAssetType("video");
```

```python
CloudinaryVideo("dog.gif").image(transformation=[
  {'width': 250, 'crop': "scale"},
  {'flags': "animated", 'fetch_format': "auto"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Transcode;
use Cloudinary\Transformation\AnimatedFormat;

(new ImageTag('dog.gif'))
	->resize(Resize::scale()->width(250))
	->transcode(Transcode::toAnimated(
	AnimatedFormat::auto()))
	->assetType("video");
```

```java
cloudinary.url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated").fetchFormat("auto")).resourceType("video").imageTag("dog.gif");
```

```ruby
cl_image_tag("dog.gif", resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: "animated", fetch_format: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(250).Crop("scale").Chain()
  .Flags("animated").FetchFormat("auto")).BuildImageTag("dog.gif")
```

```dart
cloudinary.image('dog.gif').transformation(Transformation()
	.addTransformation("c_scale,w_250/f_auto,fl_animated")
	.setAssetType("video"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(250).setCrop("scale").chain()
  .setFlags("animated").setFetchFormat("auto")).generate("dog.gif")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .flags("animated").fetchFormat("auto")).resourceType("video").generate("dog.gif");
```

```flutter
cloudinary.image('dog.gif').transformation(Transformation()
	.addTransformation("c_scale,w_250/f_auto,fl_animated")
	.setAssetType("video"));
```

```kotlin
cloudinary.image {
	publicId("dog.gif")
	 resize(Resize.scale() { width(250) })
	 transcode(Transcode.toAnimated(
	AnimatedFormat.auto()))
	 assetType("video") 
}.generate()
```

```jquery
$.cloudinary.image("dog.gif", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {flags: "animated", fetch_format: "auto"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { toAnimated } from "@cloudinary/url-gen/actions/transcode";

new CloudinaryImage("dog.gif")
  .resize(scale().width(250))
  .transcode(toAnimated("auto"))
  .setAssetType("video");
```

or

![Animated images with f_auto](https://res.cloudinary.com/demo/video/upload/c_scale,w_250/f_auto:animated/dog "with_image: false")

```nodejs
cloudinary.image("dog", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {fetch_format: "auto"}
  ]})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { auto:animated } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage('dog')
	.resize(scale().width(250))
	.delivery(format(
	auto:animated()))
	.setAssetType("video");
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { auto:animated } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage('dog')
	.resize(scale().width(250))
	.delivery(format(
	auto:animated()))
	.setAssetType("video");
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { auto:animated } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage('dog')
	.resize(scale().width(250))
	.delivery(format(
	auto:animated()))
	.setAssetType("video");
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { auto:animated } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage('dog')
	.resize(scale().width(250))
	.delivery(format(
	auto:animated()))
	.setAssetType("video");
```

```python
CloudinaryVideo("dog").image(transformation=[
  {'width': 250, 'crop': "scale"},
  {'fetch_format': "auto"}
  ])
```

```php
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Delivery;
use Cloudinary\Transformation\Format;

(new ImageTag('dog'))
	->resize(Resize::scale()->width(250))
	->delivery(Delivery::format(
	Format::auto:animated()))
	->assetType("video");
```

```java
cloudinary.url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .fetchFormat("auto")).resourceType("video").imageTag("dog");
```

```ruby
cl_image_tag("dog", resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {fetch_format: "auto"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(250).Crop("scale").Chain()
  .FetchFormat("auto")).BuildImageTag("dog")
```

```dart
cloudinary.image('dog').transformation(Transformation()
	.resize(Resize.scale().width(250))
	.delivery(Delivery.format(
	Format.auto:animated()))
	.setAssetType("video"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(250).setCrop("scale").chain()
  .setFetchFormat("auto")).generate("dog")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(250).crop("scale").chain()
  .fetchFormat("auto")).resourceType("video").generate("dog");
```

```flutter
cloudinary.image('dog').transformation(Transformation()
	.resize(Resize.scale().width(250))
	.delivery(Delivery.format(
	Format.auto:animated()))
	.setAssetType("video"));
```

```kotlin
cloudinary.image {
	publicId("dog")
	 resize(Resize.scale() { width(250) })
	 delivery(Delivery.format(
	Format.auto:animated()))
	 assetType("video") 
}.generate()
```

```jquery
$.cloudinary.image("dog", {resource_type: "video", transformation: [
  {width: 250, crop: "scale"},
  {fetch_format: "auto"}
  ]})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";
import { format } from "@cloudinary/url-gen/actions/delivery";
import { auto:animated } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage('dog')
	.resize(scale().width(250))
	.delivery(format(
	auto:animated()))
	.setAssetType("video");
```

    
        
    

> **READING**:
>
> * [Transforming animated GIFs](animated_images#transforming_animated_GIFs)

> * [Converting an animated GIF to video](animated_images#converting_an_animated_gif_to_video)

> * [Creating animated images from images](creating_animated_images)

> * [Video tutorial: Converting videos to animated images](videos_to_animated_images_tutorial)