> ## 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

# Animated images


You can upload animated images to Cloudinary, resize and crop them, further transform them, optimize them, convert them to modern video or animated image formats and create new animated images. 

> **TIP**: You can also deliver video files as animated AVIF, GIF, PNG and WebP. For details, see [Converting videos to animated images](videos_to_animated_images).


## Transforming animated GIFs

Animated GIFs can be transformed like any other image uploaded to Cloudinary. For example:

* Original uploaded `kitten_fighting` animated GIF:

![Originally uploaded kitten_fighting animated GIF](https://res.cloudinary.com/demo/image/upload/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif")
```

```react
new CloudinaryImage("kitten_fighting.gif");
```

```vue
new CloudinaryImage("kitten_fighting.gif");
```

```angular
new CloudinaryImage("kitten_fighting.gif");
```

```js
new CloudinaryImage("kitten_fighting.gif");
```

```python
CloudinaryImage("kitten_fighting.gif").image()
```

```php
(new ImageTag('kitten_fighting.gif'));
```

```java
cloudinary.url().transformation(new Transformation().imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif")
```

```csharp
cloudinary.Api.UrlImgUp.BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation());
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation());
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif") 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif")
```

```react_native
new CloudinaryImage("kitten_fighting.gif");
```

* Resized to a width of 200 pixels (height is adjusted automatically to keep the aspect ratio):

![Animated GIF resized to a width of 200 pixels](https://res.cloudinary.com/demo/image/upload/c_scale,w_200/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {width: 200, crop: "scale"})
```

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

new CloudinaryImage("kitten_fighting.gif").resize(scale().width(200));
```

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

new CloudinaryImage("kitten_fighting.gif").resize(scale().width(200));
```

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

new CloudinaryImage("kitten_fighting.gif").resize(scale().width(200));
```

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

new CloudinaryImage("kitten_fighting.gif").resize(scale().width(200));
```

```python
CloudinaryImage("kitten_fighting.gif").image(width=200, crop="scale")
```

```php
use Cloudinary\Transformation\Resize;

(new ImageTag('kitten_fighting.gif'))
	->resize(Resize::scale()->width(200));
```

```java
cloudinary.url().transformation(new Transformation().width(200).crop("scale")).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", width: 200, crop: "scale")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Crop("scale")).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.resize(Resize.scale().width(200)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setCrop("scale")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().width(200).crop("scale")).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.resize(Resize.scale().width(200)));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 resize(Resize.scale() { width(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {width: 200, crop: "scale"})
```

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

new CloudinaryImage("kitten_fighting.gif").resize(scale().width(200));
```

* Cropped to a height and width of 200 pixels with rounded corners:

![Animated GIF cropped to 200x200 circle](https://res.cloudinary.com/demo/image/upload/c_crop,h_200,w_200/r_max/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {transformation: [
  {height: 200, width: 200, crop: "crop"},
  {radius: "max"}
  ]})
```

```react
import { crop } from "@cloudinary/url-gen/actions/resize";
import { max } from "@cloudinary/url-gen/actions/roundCorners";

new CloudinaryImage("kitten_fighting.gif")
  .resize(crop().width(200).height(200))
  .roundCorners(max());
```

```vue
import { crop } from "@cloudinary/url-gen/actions/resize";
import { max } from "@cloudinary/url-gen/actions/roundCorners";

new CloudinaryImage("kitten_fighting.gif")
  .resize(crop().width(200).height(200))
  .roundCorners(max());
```

```angular
import { crop } from "@cloudinary/url-gen/actions/resize";
import { max } from "@cloudinary/url-gen/actions/roundCorners";

new CloudinaryImage("kitten_fighting.gif")
  .resize(crop().width(200).height(200))
  .roundCorners(max());
```

```js
import { crop } from "@cloudinary/url-gen/actions/resize";
import { max } from "@cloudinary/url-gen/actions/roundCorners";

new CloudinaryImage("kitten_fighting.gif")
  .resize(crop().width(200).height(200))
  .roundCorners(max());
```

```python
CloudinaryImage("kitten_fighting.gif").image(transformation=[
  {'height': 200, 'width': 200, 'crop': "crop"},
  {'radius': "max"}
  ])
```

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

(new ImageTag('kitten_fighting.gif'))
	->resize(Resize::crop()->width(200)
->height(200))
	->roundCorners(RoundCorners::max());
```

```java
cloudinary.url().transformation(new Transformation()
  .height(200).width(200).crop("crop").chain()
  .radius("max")).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", transformation: [
  {height: 200, width: 200, crop: "crop"},
  {radius: "max"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Height(200).Width(200).Crop("crop").Chain()
  .Radius("max")).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.resize(Resize.crop().width(200)
.height(200))
	.roundCorners(RoundCorners.max()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setHeight(200).setWidth(200).setCrop("crop").chain()
  .setRadius("max")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .height(200).width(200).crop("crop").chain()
  .radius("max")).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.addTransformation("c_crop,h_200,w_200/r_max"));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 resize(Resize.crop() { width(200)
 height(200) })
	 roundCorners(RoundCorners.max()) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {transformation: [
  {height: 200, width: 200, crop: "crop"},
  {radius: "max"}
  ]})
```

```react_native
import { crop } from "@cloudinary/url-gen/actions/resize";
import { max } from "@cloudinary/url-gen/actions/roundCorners";

new CloudinaryImage("kitten_fighting.gif")
  .resize(crop().width(200).height(200))
  .roundCorners(max());
```

### Length limitations

If your original GIF is longer than 100 frames, when you transform it on the fly, the derived GIF will be truncated to 100 frames. 

Asynchronous transformations allow derived images of up to 500 frames to be generated, therefore:

* If your original GIF is between 100 and 500 frames, consider using an [eager transformation](eager_and_incoming_transformations#eager_transformations) with `eager_async` set to `true`. 
* If you're uploading a GIF that's between 100 and 500 frames and want to transform it on upload using an [incoming transformation](eager_and_incoming_transformations#incoming_transformations), ensure you set the `async` parameter of the `upload` request to `true`.

Also note the limitations in [Creating animated images](creating_animated_images).

### Deliver a single frame

Use the `page` parameter (`pg` in URLs) to deliver only a single frame of an animated image. For example, to deliver the second frame in the `kitten_fighting` GIF file:

![2nd frame only in kitten_fighting GIF](https://res.cloudinary.com/demo/image/upload/pg_2/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {page: 2})
```

```react
import { getPage } from "@cloudinary/url-gen/actions/extract";

new CloudinaryImage("kitten_fighting.gif").extract(getPage().byNumber(2));
```

```vue
import { getPage } from "@cloudinary/url-gen/actions/extract";

new CloudinaryImage("kitten_fighting.gif").extract(getPage().byNumber(2));
```

```angular
import { getPage } from "@cloudinary/url-gen/actions/extract";

new CloudinaryImage("kitten_fighting.gif").extract(getPage().byNumber(2));
```

```js
import { getPage } from "@cloudinary/url-gen/actions/extract";

new CloudinaryImage("kitten_fighting.gif").extract(getPage().byNumber(2));
```

```python
CloudinaryImage("kitten_fighting.gif").image(page=2)
```

```php
use Cloudinary\Transformation\Extract;

(new ImageTag('kitten_fighting.gif'))
	->extract(Extract::getPage()->byNumber(2));
```

```java
cloudinary.url().transformation(new Transformation().page(2)).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", page: 2)
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Page(2)).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.extract(Extract.getPage().byNumber(2)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setPage(2)).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().page(2)).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.extract(Extract.getPage().byNumber(2)));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 extract(Extract.getPage() { byNumber(2) }) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {page: 2})
```

```react_native
import { getPage } from "@cloudinary/url-gen/actions/extract";

new CloudinaryImage("kitten_fighting.gif").extract(getPage().byNumber(2));
```

### Control the delay between frames

Use the `delay` parameter (`dl` in URLs) to control the amount of time (in milliseconds) that passes between displaying the individual frames in an animated image. For example, to deliver the `kitten_fighting` GIF with a delay of 200 milliseconds between frames:

![kitten_fighting with 200 ms delay between frames](https://res.cloudinary.com/demo/image/upload/dl_200/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {delay: "200"})
```

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

new CloudinaryImage("kitten_fighting.gif").animated(edit().delay(200));
```

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

new CloudinaryImage("kitten_fighting.gif").animated(edit().delay(200));
```

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

new CloudinaryImage("kitten_fighting.gif").animated(edit().delay(200));
```

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

new CloudinaryImage("kitten_fighting.gif").animated(edit().delay(200));
```

```python
CloudinaryImage("kitten_fighting.gif").image(delay="200")
```

```php
use Cloudinary\Transformation\Animated;

(new ImageTag('kitten_fighting.gif'))
	->animated(Animated::edit()->delay(200));
```

```java
cloudinary.url().transformation(new Transformation().delay("200")).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", delay: "200")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Delay("200")).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.addTransformation("dl_200"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setDelay("200")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().delay("200")).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.addTransformation("dl_200"));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 animated(Animated.edit() { delay(200) }) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {delay: "200"})
```

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

new CloudinaryImage("kitten_fighting.gif").animated(edit().delay(200));
```

### Control the sampling rate 

Use the `video sampling` parameter (`vs` in URLs) to control the number of frames rendered in the resulting animated image. You can specify either an integer defining the total number of frames to sample from the original animated image (spread evenly over the duration of the animation), or a string defining the number of seconds between each sampled frame.

For example, to deliver the `kitten_fighting` GIF with frames sampled every 0.3 seconds:

![kitten_fighting with frames sampled at 0.3 seconds](https://res.cloudinary.com/demo/image/upload/vs_0.3s/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {video_sampling: "0.3s"})
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(
  toAnimated().sampling("0.3s")
);
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(
  toAnimated().sampling("0.3s")
);
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(
  toAnimated().sampling("0.3s")
);
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(
  toAnimated().sampling("0.3s")
);
```

```python
CloudinaryImage("kitten_fighting.gif").image(video_sampling="0.3s")
```

```php
use Cloudinary\Transformation\Transcode;

(new ImageTag('kitten_fighting.gif'))
	->transcode(Transcode::toAnimated()->sampling("0.3s"));
```

```java
cloudinary.url().transformation(new Transformation().videoSampling("0.3s")).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", video_sampling: "0.3s")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().VideoSampling("0.3s")).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.transcode(Transcode.toAnimated().sampling("0.3s")));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setVideoSampling("0.3s")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().videoSampling("0.3s")).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.transcode(Transcode.toAnimated().sampling("0.3s")));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 transcode(Transcode.toAnimated() { sampling("0.3s") }) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {video_sampling: "0.3s"})
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(
  toAnimated().sampling("0.3s")
);
```

**See full syntax**: [vs (video sampling)](transformation_reference#vs_video_sampling) in the _Transformation Reference_.

### Control the frame rate

Use the `frames per second` parameter (`fps` in URLs) to control the frame rate of the resulting animated image. Specify either a single value or a range. 

For example, to deliver the `kitten_fighting` GIF at between 3 and 6 frames per second:

![kitten_fighting with frame rate from 3 to 6](https://res.cloudinary.com/demo/image/upload/fps_3-6/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {frames_per_second: "3-6"})
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(fpsRange(3, 6));
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(fpsRange(3, 6));
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(fpsRange(3, 6));
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(fpsRange(3, 6));
```

```python
CloudinaryImage("kitten_fighting.gif").image(frames_per_second="3-6")
```

```php
use Cloudinary\Transformation\Transcode;

(new ImageTag('kitten_fighting.gif'))
	->transcode(Transcode::fpsRange(3,6));
```

```java
cloudinary.url().transformation(new Transformation().framesPerSecond("3-6")).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", frames_per_second: "3-6")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().FramesPerSecond("3-6")).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.transcode(Transcode.fpsRange(3,6)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFramesPerSecond("3-6")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().framesPerSecond("3-6")).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.transcode(Transcode.fpsRange(3,6)));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 transcode(Transcode.fpsRange(3,6)) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {frames_per_second: "3-6"})
```

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

new CloudinaryImage("kitten_fighting.gif").transcode(fpsRange(3, 6));
```

**See full syntax**: [fps (FPS)](transformation_reference#fps_fps) in the _Transformation Reference_.

### Looping animated images

Use the `loop` effect (`e_loop[:<additional iterations>]` in URLs) to specify the number of loops. When no value is specified for additional iterations, the animated image will loop indefinitely. You can limit the number of loops by setting a value for `<additional iterations>`, which is 0-based. For instance, to make your animated image loop three times, specify `e_loop:2`:

![Loop animated GIF three times](https://res.cloudinary.com/demo/image/upload/e_loop:2/spiral_animated.gif "thumb: w_400")

```nodejs
cloudinary.image("spiral_animated.gif", {effect: "loop:2"})
```

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

new CloudinaryImage("spiral_animated.gif").animated(edit().loop(2));
```

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

new CloudinaryImage("spiral_animated.gif").animated(edit().loop(2));
```

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

new CloudinaryImage("spiral_animated.gif").animated(edit().loop(2));
```

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

new CloudinaryImage("spiral_animated.gif").animated(edit().loop(2));
```

```python
CloudinaryImage("spiral_animated.gif").image(effect="loop:2")
```

```php
use Cloudinary\Transformation\Animated;

(new ImageTag('spiral_animated.gif'))
	->animated(Animated::edit()->loop(2));
```

```java
cloudinary.url().transformation(new Transformation().effect("loop:2")).imageTag("spiral_animated.gif");
```

```ruby
cl_image_tag("spiral_animated.gif", effect: "loop:2")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("loop:2")).BuildImageTag("spiral_animated.gif")
```

```dart
cloudinary.image('spiral_animated.gif').transformation(Transformation()
	.addTransformation("e_loop:2"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("loop:2")).generate("spiral_animated.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("loop:2")).generate("spiral_animated.gif");
```

```flutter
cloudinary.image('spiral_animated.gif').transformation(Transformation()
	.addTransformation("e_loop:2"));
```

```kotlin
cloudinary.image {
	publicId("spiral_animated.gif")
	 animated(Animated.edit() { loop(2) }) 
}.generate()
```

```jquery
$.cloudinary.image("spiral_animated.gif", {effect: "loop:2"})
```

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

new CloudinaryImage("spiral_animated.gif").animated(edit().loop(2));
```

> **NOTE**: The `loop` effect is necessary only when you need to modify the intrinsic looping behavior of the animated image (some animated images may already contain information to loop indefinitely or for a specific number of times).

## Converting an animated GIF to video

To deliver an animated GIF as a video file, simply change the file extension to either the `webm` or the `mp4` video format. The file is automatically converted to a video format and codec that best fits web and mobile browsers. The default quality settings represent an optimized trade-off between visual quality and file size. See the article on [Reduce size of animated GIFs, automatically convert to WebM and MP4](/blog/reduce_size_of_animated_gifs_automatically_convert_to_webm_and_mp4)

For example, to deliver the `kitten_fighting` GIF as an MP4 video, reducing the file size by 95%:

![kitten_fighting GIF delivered as an MP4 video](https://res.cloudinary.com/demo/image/upload/kitten_fighting.mp4)

```nodejs
cloudinary.video("kitten_fighting", {resource_type: "image"})
```

```react
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```vue
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```angular
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```js
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

```python
CloudinaryImage("kitten_fighting").video()
```

```php
(new VideoTag('kitten_fighting.mp4'))
	->assetType("image");
```

```java
cloudinary.url().transformation(new Transformation().resourceType("image").videoTag("kitten_fighting");
```

```ruby
cl_video_tag("kitten_fighting", resource_type: "image")
```

```csharp
cloudinary.Api.UrlImgUp.BuildVideoTag("kitten_fighting")
```

```dart
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
	.setAssetType("image"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().generate("kitten_fighting.mp4")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().generate("kitten_fighting.mp4");
```

```flutter
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
	.setAssetType("image"));
```

```kotlin
cloudinary.video {
	publicId("kitten_fighting.mp4")
	 assetType("image") 
}.generate()
```

```jquery
$.cloudinary.video("kitten_fighting", {resource_type: "image"})
```

```react_native
new CloudinaryVideo("kitten_fighting.mp4").setAssetType("image");
```

The video file can also be delivered using Cloudinary's video tags and further transformed like any other video file. For more details, see [Video Transformations](video_manipulation_and_delivery).

### Using f_auto and specifying the media type

If you want to convert the animated GIF to video and use [automatic format selection](video_optimization#automatic_format_selection_f_auto), you can use the media type option (`f_auto:video`) to ensure a video format is used.

For example, to deliver the `kitten_fighting` GIF as a video in the optimal format:

![kitten_fighting GIF delivered as a video with f_auto](https://res.cloudinary.com/demo/image/upload/f_auto:video/kitten_fighting.mp4)

```nodejs
cloudinary.video("kitten_fighting", {fetch_format: "auto", resource_type: "image"})
```

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

new CloudinaryVideo('kitten_fighting.mp4')
	.delivery(format(
	auto:video()))
	.setAssetType("image");
```

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

new CloudinaryVideo('kitten_fighting.mp4')
	.delivery(format(
	auto:video()))
	.setAssetType("image");
```

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

new CloudinaryVideo('kitten_fighting.mp4')
	.delivery(format(
	auto:video()))
	.setAssetType("image");
```

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

new CloudinaryVideo('kitten_fighting.mp4')
	.delivery(format(
	auto:video()))
	.setAssetType("image");
```

```python
CloudinaryImage("kitten_fighting").video(fetch_format="auto")
```

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

(new VideoTag('kitten_fighting.mp4'))
	->delivery(Delivery::format(
	Format::auto:video()))
	->assetType("image");
```

```java
cloudinary.url().transformation(new Transformation().fetchFormat("auto")).resourceType("image").videoTag("kitten_fighting");
```

```ruby
cl_video_tag("kitten_fighting", fetch_format: "auto", resource_type: "image")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat("auto")).BuildVideoTag("kitten_fighting")
```

```dart
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
	.delivery(Delivery.format(
	Format.auto:video()))
	.setAssetType("image"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat("auto")).generate("kitten_fighting.mp4")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().fetchFormat("auto")).generate("kitten_fighting.mp4");
```

```flutter
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
	.delivery(Delivery.format(
	Format.auto:video()))
	.setAssetType("image"));
```

```kotlin
cloudinary.video {
	publicId("kitten_fighting.mp4")
	 delivery(Delivery.format(
	Format.auto:video()))
	 assetType("image") 
}.generate()
```

```jquery
$.cloudinary.video("kitten_fighting", {fetch_format: "auto", resource_type: "image"})
```

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

new CloudinaryVideo('kitten_fighting.mp4')
	.delivery(format(
	auto:video()))
	.setAssetType("image");
```

### Convert a fetched animated GIF to video

When working with [fetched remote](fetch_remote_images) images, you must specify the fetched image URL exactly as it is in the remote location, including file extension.  Therefore, if you want to convert a fetched animated GIF to MP4, use the `fetch_format` (`f_`) parameter to convert the format to MP4.

For example: 
![Convert a fetched image to MP4](https://res.cloudinary.com/demo/image/fetch/c_scale,w_300/f_mp4/https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif "with_image:false")

```nodejs
cloudinary.image("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif", {type: "fetch", transformation: [
  {width: 300, crop: "scale"},
  {fetch_format: "mp4"}
  ]})
```

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

new CloudinaryVideo(
  "https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif"
)
  .resize(scale().width(300))
  .delivery(format(videoMp4()))
  .setDeliveryType("fetch")
  .setAssetType("image");
```

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

new CloudinaryVideo(
  "https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif"
)
  .resize(scale().width(300))
  .delivery(format(videoMp4()))
  .setDeliveryType("fetch")
  .setAssetType("image");
```

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

new CloudinaryVideo(
  "https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif"
)
  .resize(scale().width(300))
  .delivery(format(videoMp4()))
  .setDeliveryType("fetch")
  .setAssetType("image");
```

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

new CloudinaryVideo(
  "https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif"
)
  .resize(scale().width(300))
  .delivery(format(videoMp4()))
  .setDeliveryType("fetch")
  .setAssetType("image");
```

```python
CloudinaryImage("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif").image(type="fetch", transformation=[
  {'width': 300, 'crop': "scale"},
  {'fetch_format': "mp4"}
  ])
```

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

(new VideoTag('https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif'))
	->resize(Resize::scale()->width(300))
	->delivery(Delivery::format(
	Format::videoMp4()))
	->deliveryType("fetch")
	->assetType("image");
```

```java
cloudinary.url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .fetchFormat("mp4")).type("fetch").imageTag("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif");
```

```ruby
cl_image_tag("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif", type: "fetch", transformation: [
  {width: 300, crop: "scale"},
  {fetch_format: "mp4"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Crop("scale").Chain()
  .FetchFormat("mp4")).Action("fetch").BuildImageTag("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif")
```

```dart
cloudinary.video('https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif').transformation(Transformation()
	.resize(Resize.scale().width(300))
	.delivery(Delivery.format(
	Format.videoMp4()))
	.setDeliveryType("fetch")
	.setAssetType("image"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setType( "fetch").setTransformation(CLDTransformation()
  .setWidth(300).setCrop("scale").chain()
  .setFetchFormat("mp4")).generate("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .width(300).crop("scale").chain()
  .fetchFormat("mp4")).type("fetch").generate("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif");
```

```flutter
cloudinary.video('https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif').transformation(Transformation()
	.resize(Resize.scale().width(300))
	.delivery(Delivery.format(
	Format.videoMp4()))
	.setDeliveryType("fetch")
	.setAssetType("image"));
```

```kotlin
cloudinary.video {
	publicId("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif")
	 resize(Resize.scale() { width(300) })
	 delivery(Delivery.format(
	Format.videoMp4()))
	 deliveryType("fetch")
	 assetType("image") 
}.generate()
```

```jquery
$.cloudinary.image("https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif", {type: "fetch", transformation: [
  {width: 300, crop: "scale"},
  {fetch_format: "mp4"}
  ]})
```

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

new CloudinaryVideo(
  "https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif"
)
  .resize(scale().width(300))
  .delivery(format(videoMp4()))
  .setDeliveryType("fetch")
  .setAssetType("image");
```

## Converting an existing animated image to other animated formats

You can convert animated images to other animated image 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.
To deliver an animated AVIF instead of an animated GIF, change the file extension to `.avif`. To deliver an animated WebP or PNG instead of an animated GIF, change the file extension to `.webp` or `.png` and set the `flag` parameter to `awebp` or `apng` (`fl_awebp` or `fl_apng` in URLs).  For example, delivering the animated GIF called `kitten_fighting` as an animated WebP:

![kitten_fighting GIF delivered in webp format](https://res.cloudinary.com/demo/image/upload/fl_awebp/kitten_fighting.webp)

```nodejs
cloudinary.image("kitten_fighting.webp", {flags: "awebp"})
```

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

new CloudinaryImage("kitten_fighting.webp").transcode(toAnimated());
```

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

new CloudinaryImage("kitten_fighting.webp").transcode(toAnimated());
```

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

new CloudinaryImage("kitten_fighting.webp").transcode(toAnimated());
```

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

new CloudinaryImage("kitten_fighting.webp").transcode(toAnimated());
```

```python
CloudinaryImage("kitten_fighting.webp").image(flags="awebp")
```

```php
use Cloudinary\Transformation\Transcode;

(new ImageTag('kitten_fighting.webp'))
	->transcode(Transcode::toAnimated());
```

```java
cloudinary.url().transformation(new Transformation().flags("awebp")).imageTag("kitten_fighting.webp");
```

```ruby
cl_image_tag("kitten_fighting.webp", flags: "awebp")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("awebp")).BuildImageTag("kitten_fighting.webp")
```

```dart
cloudinary.image('kitten_fighting.webp').transformation(Transformation()
	.transcode(Transcode.toAnimated()));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("awebp")).generate("kitten_fighting.webp")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().flags("awebp")).generate("kitten_fighting.webp");
```

```flutter
cloudinary.image('kitten_fighting.webp').transformation(Transformation()
	.transcode(Transcode.toAnimated()));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.webp")
	 transcode(Transcode.toAnimated()) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.webp", {flags: "awebp"})
```

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

new CloudinaryImage("kitten_fighting.webp").transcode(toAnimated());
```

As not all the animated formats are supported by all browsers, you can leave it up to Cloudinary to decide which format to serve to the requesting browser. Do this by setting the `fetch_format` parameter to [auto](image_optimization#automatic_format_selection_f_auto) (or `f_auto` in URLs). For example, to deliver `kitten_fighting` in the best format for the requesting browser:

![kitten_fighting GIF delivered in the best format for the requesting browser](https://res.cloudinary.com/demo/image/upload/f_auto/e_loop/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {effect: "loop"})
```

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

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(auto()))
  .animated(edit().loop());
```

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

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(auto()))
  .animated(edit().loop());
```

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

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(auto()))
  .animated(edit().loop());
```

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

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(auto()))
  .animated(edit().loop());
```

```python
CloudinaryImage("kitten_fighting.gif").image(effect="loop")
```

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

(new ImageTag('kitten_fighting.gif'))
	->delivery(Delivery::format(
	Format::auto()))
	->animated(Animated::edit()->loop());
```

```java
cloudinary.url().transformation(new Transformation().effect("loop")).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", effect: "loop")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("loop")).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.addTransformation("f_auto/e_loop"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("loop")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().effect("loop")).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.addTransformation("f_auto/e_loop"));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 delivery(Delivery.format(
	Format.auto()))
	 animated(Animated.edit() { loop() }) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {effect: "loop"})
```

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

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(auto()))
  .animated(edit().loop());
```

> **NOTES**:
>
> * Although animated PNGs are supported only in some browsers and versions, animated PNGs are backward compatible, so all browsers can show the first frame of an animated PNG, even if they don't directly support animated PNGs.

> * Single-frame animated WebP is not supported. Therefore, if you supply a `.gif` file that is defined as an animated GIF, but has only one frame, then `f_auto` will always deliver it as a `.gif` and not as an animated `.WebP`, even in browsers where animated WebP is supported.

> * To enable animated AVIF to be supported as a possible returned format for `f_auto` in your Cloudinary product environment, [contact support](https://support.cloudinary.com/hc/en-us/requests/new).

> * Converting from animated WebP or animated PNG to animated AVIF is not supported. You can convert to an animated AVIF only from an animated GIF or video.

## Applying lossy GIF compression

The compression algorithms used in GIFs are lossless, and there is no loss of data when compressing this palette-based format. The "lossiness" comes in when the GIF is first filtered or altered so that the image can then compress more efficiently. The loss of data occurs in this filtering phase by increasing redundant patterns along scan lines to subsequently improve the actual compression and decrease the file size.

To automatically use lossy compression when delivering your animated GIF files, set the `flag` parameter to `lossy` (`fl_lossy` in URLs). For example, the `kitten_fighting` animated GIF has a file size of 6.3 MB without lossy compression, and a file size of 2.5 MB with lossy compression. The file still looks good and is now 40% of the original size:

![kitten_fighting with lossy compression](https://res.cloudinary.com/demo/image/upload/f_gif,fl_lossy/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {flags: "lossy", fetch_format: "gif"})
```

```react
import { format } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```vue
import { format } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```angular
import { format } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```js
import { format } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

```python
CloudinaryImage("kitten_fighting.gif").image(flags="lossy", fetch_format="gif")
```

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

(new ImageTag('kitten_fighting.gif'))
	->delivery(Delivery::format(
	Format::gif())
	->lossy()
	);
```

```java
cloudinary.url().transformation(new Transformation().flags("lossy").fetchFormat("gif")).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", flags: "lossy", fetch_format: "gif")
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags("lossy").FetchFormat("gif")).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.delivery(Delivery.format(
	Format.gif())
	.lossy()
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags("lossy").setFetchFormat("gif")).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation().flags("lossy").fetchFormat("gif")).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.delivery(Delivery.format(
	Format.gif())
	.lossy()
	));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 delivery(Delivery.format(
	Format.gif()) {
	 lossy()
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {flags: "lossy", fetch_format: "gif"})
```

```react_native
import { format } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif").delivery(format(gif()).lossy());
```

To control the level of lossy compression in the resulting animated GIF add the `quality` parameter (`q` in URLs), which has a default value of 80 (applied in the example above). For example, enabling lossy compression for the `kitten_fighting` GIF and also setting the quality parameter to 50 results in a file size of 2.1 MB - 33% of the original file size.

![kitten_fighting with quality set to 50](https://res.cloudinary.com/demo/image/upload/f_gif,fl_lossy/q_50/kitten_fighting.gif)

```nodejs
cloudinary.image("kitten_fighting.gif", {transformation: [
  {flags: "lossy", fetch_format: "gif"},
  {quality: 50}
  ]})
```

```react
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(gif()).lossy())
  .delivery(quality(50));
```

```vue
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(gif()).lossy())
  .delivery(quality(50));
```

```angular
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(gif()).lossy())
  .delivery(quality(50));
```

```js
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(gif()).lossy())
  .delivery(quality(50));
```

```python
CloudinaryImage("kitten_fighting.gif").image(transformation=[
  {'flags': "lossy", 'fetch_format': "gif"},
  {'quality': 50}
  ])
```

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

(new ImageTag('kitten_fighting.gif'))
	->delivery(Delivery::format(
	Format::gif())
	->lossy()
	)
	->delivery(Delivery::quality(50));
```

```java
cloudinary.url().transformation(new Transformation()
  .flags("lossy").fetchFormat("gif").chain()
  .quality(50)).imageTag("kitten_fighting.gif");
```

```ruby
cl_image_tag("kitten_fighting.gif", transformation: [
  {flags: "lossy", fetch_format: "gif"},
  {quality: 50}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Flags("lossy").FetchFormat("gif").Chain()
  .Quality(50)).BuildImageTag("kitten_fighting.gif")
```

```dart
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.delivery(Delivery.format(
	Format.gif())
	.lossy()
	)
	.delivery(Delivery.quality(50)));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setFlags("lossy").setFetchFormat("gif").chain()
  .setQuality(50)).generate("kitten_fighting.gif")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .flags("lossy").fetchFormat("gif").chain()
  .quality(50)).generate("kitten_fighting.gif");
```

```flutter
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
	.delivery(Delivery.format(
	Format.gif())
	.lossy()
	)
	.delivery(Delivery.quality(50)));
```

```kotlin
cloudinary.image {
	publicId("kitten_fighting.gif")
	 delivery(Delivery.format(
	Format.gif()) {
	 lossy()
	 })
	 delivery(Delivery.quality(50)) 
}.generate()
```

```jquery
$.cloudinary.image("kitten_fighting.gif", {transformation: [
  {flags: "lossy", fetch_format: "gif"},
  {quality: 50}
  ]})
```

```react_native
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { gif } from "@cloudinary/url-gen/qualifiers/format";

new CloudinaryImage("kitten_fighting.gif")
  .delivery(format(gif()).lossy())
  .delivery(quality(50));
```

## Creating animated images

There are several ways to create animated images using Cloudinary:

* Use the [multi method](creating_animated_images) to combine several still images into a single animated image.
* Use the [zoompan effect](reshaping_and_distorting_images#zoompan) to create an animated image by using zooming and panning techniques on the image.
* Transform a video into an animated image, as explained in [Converting videos to animated images](videos_to_animated_images).