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.
Animated GIFs can be transformed like any other image uploaded to Cloudinary. For example:
Original uploaded kitten_fighting
animated GIF:
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " )
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " )
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image()
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " )
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.gif " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' ).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " )
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.gif " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.gif " );
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.gif " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation());
Dart (cloudinary_dart 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation());
Resized to a width of 200 pixels (height is adjusted automatically to keep the aspect ratio):
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " , :width =>200 , :crop =>" scale " )
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ))
->resize(Resize ::scale()->width(200 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " , array (" width " =>200 , " crop " =>" scale " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image(width=200 , crop=" scale " )
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " , {width : 200 , crop : " scale " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().width(200 ).crop(" scale " )).imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).resize(scale().width(200 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' , {width : 200 , crop : " scale " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " , {width : 200 , crop : " scale " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).resize(scale().width(200 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
<Transformation width =" 200 " crop =" scale " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).resize(scale().width(200 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
<cld-transformation width =" 200 " crop =" scale " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).resize(scale().width(200 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
<cl-transformation width=" 200 " crop=" scale " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200 ).Crop(" scale " )).BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200 ).setCrop(" scale " )).generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().width(200 ).crop(" scale " )).generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
resize(Resize.scale() { width(200 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.resize(Resize.scale().width(200)));
Dart (cloudinary_dart 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.resize(Resize.scale().width(200)));
Cropped to a height and width of 200 pixels with rounded corners:
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " , :transformation =>[
{:height =>200 , :width =>200 , :crop =>" crop " },
{:radius =>" max " }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ))
->resize(Resize ::crop()->width(200 )
->height(200 ))
->roundCorners(RoundCorners ::max ());
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " , array (" transformation " =>array (
array (" height " =>200 , " width " =>200 , " crop " =>" crop " ),
array (" radius " =>" max " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image(transformation=[
{' height ' : 200 , ' width ' : 200 , ' crop ' : " crop " },
{' radius ' : " max " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " , {transformation : [
{height : 200 , width : 200 , crop : " crop " },
{radius : " max " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.height(200 ).width(200 ).crop(" crop " ).chain()
.radius(" max " )).imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' , {transformation : [
{height : 200 , width : 200 , crop : " crop " },
{radius : " max " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " , {transformation : [
{height : 200 , width : 200 , crop : " crop " },
{radius : " max " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
<Transformation height =" 200 " width =" 200 " crop =" crop " />
<Transformation radius =" max " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
<cld-transformation height =" 200 " width =" 200 " crop =" crop " />
<cld-transformation radius =" max " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
<cl-transformation height=" 200 " width=" 200 " crop=" crop " >
</ cl-transformation>
<cl-transformation radius="max">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Height(200 ).Width(200 ).Crop(" crop " ).Chain()
.Radius(" max " )).BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setHeight(200 ).setWidth(200 ).setCrop(" crop " ).chain()
.setRadius(" max " )).generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.height(200 ).width(200 ).crop(" crop " ).chain()
.radius(" max " )).generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
resize(Resize.crop() { width(200 )
height(200 ) })
roundCorners(RoundCorners.max())
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
Use the page
parameter (pg
in URLs) to deliver only a single frame of an animated GIF. For example, to deliver the second frame in the kitten_fighting
GIF file:
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " , :page =>2 )
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ))
->extract (Extract ::getPage()->byNumber(2 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " , array (" page " =>2 ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image(page=2 )
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " , {page : 2 })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().page(2 )).imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).extract(getPage().byNumber(2 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' , {page : 2 }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " , {page : 2 })
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).extract(getPage().byNumber(2 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
<Transformation page =" 2 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).extract(getPage().byNumber(2 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
<cld-transformation page =" 2 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).extract(getPage().byNumber(2 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
<cl-transformation page=" 2 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Page(2 )).BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setPage(2 )).generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().page(2 )).generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
extract(Extract.getPage() { byNumber(2 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.extract(Extract.getPage().byNumber(2)));
Dart (cloudinary_dart 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.extract(Extract.getPage().byNumber(2)));
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 GIF. For example, to deliver the kitten_fighting
GIF with a delay of 200 milliseconds between frames:
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " , :delay =>" 200 " )
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ))
->animated(Animated ::edit()->delay(200 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " , array (" delay " =>" 200 " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image(delay=" 200 " )
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " , {delay : " 200 " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().delay(" 200 " )).imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).animated(edit().delay(200 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' , {delay : " 200 " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " , {delay : " 200 " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).animated(edit().delay(200 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
<Transformation delay =" 200 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).animated(edit().delay(200 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
<cld-transformation delay =" 200 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).animated(edit().delay(200 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
<cl-transformation delay=" 200 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Delay(" 200 " )).BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setDelay(" 200 " )).generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().delay(" 200 " )).generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
animated(Animated.edit() { delay(200 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
By default, animated GIFs with a resource_type
of image
run in an infinite loop. Use the loop
effect (e_loop
in URLs) to limit the number of loops. The loop
parameter value is 0-based. For example, to set your GIF to loop only 3 times:
Ruby (cloudinary 1.x):
cl_image_tag(" spiral_animated.gif " , :effect =>" loop:2 " )
PHP (cloudinary_php 2.x):
(new ImageTag (' spiral_animated.gif ' ))
->animated(Animated ::edit()->loop(2 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" spiral_animated.gif " , array (" effect " =>" loop:2 " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" spiral_animated.gif " ).image(effect=" loop:2 " )
Node.js (cloudinary 1.x):
cloudinary.image(" spiral_animated.gif " , {effect : " loop:2 " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().effect(" loop:2 " )).imageTag(" spiral_animated.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" spiral_animated.gif " ).animated(edit().loop(2 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' spiral_animated.gif ' , {effect : " loop:2 " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" spiral_animated.gif " , {effect : " loop:2 " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" spiral_animated.gif " ).animated(edit().loop(2 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" spiral_animated.gif " >
<Transformation effect =" loop:2 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" spiral_animated.gif " ).animated(edit().loop(2 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" spiral_animated.gif " >
<cld-transformation effect =" loop:2 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" spiral_animated.gif " ).animated(edit().loop(2 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" spiral_animated.gif " >
<cl-transformation effect=" loop:2 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(" loop:2 " )).BuildImageTag(" spiral_animated.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(" loop:2 " )).generate(" spiral_animated.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().effect(" loop:2 " )).generate(" spiral_animated.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" spiral_animated.gif " )
animated(Animated.edit() { loop(2 ) })
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
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
For example, to deliver the kitten_fighting
GIF as an MP4 video, reducing the file size by 95%:
Ruby (cloudinary 1.x):
cl_video_tag(" kitten_fighting " , :resource_type =>" image " )
PHP (cloudinary_php 2.x):
(new VideoTag (' kitten_fighting.mp4 ' ))
->assetType(" image " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_video_tag(" kitten_fighting " , array (" resource_type " =>" image " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting " ).video()
Node.js (cloudinary 1.x):
cloudinary.video(" kitten_fighting " , {resource_type : " image " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().resourceType(" image " ).videoTag(" kitten_fighting " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryVideo(" kitten_fighting.mp4 " ).setAssetType(" image " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting ' ).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.video(" kitten_fighting " , {resource_type : " image " })
React (@cloudinary/react 1.x):
new CloudinaryVideo(" kitten_fighting.mp4 " ).setAssetType(" image " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting " resourceType =" image " >
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryVideo(" kitten_fighting.mp4 " ).setAssetType(" image " );
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting " resource-type=" image " >
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryVideo(" kitten_fighting.mp4 " ).setAssetType(" image " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting " resource-type=" image " >
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.BuildVideoTag(" kitten_fighting " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().generate(" kitten_fighting.mp4 " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().generate(" kitten_fighting.mp4 " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.video {
publicId(" kitten_fighting.mp4 " )
assetType(" image " )
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
.setAssetType("image"));
Dart (cloudinary_dart 0.x):
cloudinary.video('kitten_fighting.mp4').transformation(Transformation()
.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 .
When working with fetched remote 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:
Ruby (cloudinary 1.x):
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 " }
])
PHP (cloudinary_php 2.x):
(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 " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif " , array (" type " =>" fetch " , " transformation " =>array (
array (" width " =>300 , " crop " =>" scale " ),
array (" fetch_format " =>" mp4 " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
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 " }
])
Node.js (cloudinary 1.x):
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 " }
]})
Java (cloudinary 1.x):
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 " );
JS (@cloudinary/url-gen 1.x):
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 " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif ' , {type : " fetch " , transformation : [
{width : 300 , crop : " scale " },
{fetchFormat : " mp4 " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .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 (@cloudinary/react 1.x):
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 " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif " type =" fetch " >
<Transformation width =" 300 " crop =" scale " />
<Transformation fetchFormat =" mp4 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
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 " );
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif " type=" fetch " >
<cld-transformation width =" 300 " crop =" scale " />
<cld-transformation fetch-format =" mp4 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
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 " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" https://orig00.deviantart.net/1928/f/2013/002/e/5/rubix_by_retsamys-d5q4qb6.gif " type=" fetch " >
<cl-transformation width=" 300 " crop=" scale " >
</ cl-transformation>
<cl-transformation fetch-format="mp4">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
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 " )
iOS (cloudinary 3.x):
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 (cloudinary-android 1.x):
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 " );
Kotlin (kotlin-url-gen 1.x):
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()
Flutter (cloudinary_flutter 0.x):
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"));
Dart (cloudinary_dart 0.x):
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"));
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 , 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).
The transformation count for animated images and videos converted to animated AVIF from other formats is based on the number of frames of the transformed file.
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:
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.webp " , :flags =>" awebp " )
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.webp ' ))
->transcode(Transcode ::toAnimated());
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.webp " , array (" flags " =>" awebp " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.webp " ).image(flags=" awebp " )
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.webp " , {flags : " awebp " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().flags(" awebp " )).imageTag(" kitten_fighting.webp " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.webp " ).transcode(toAnimated());
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.webp ' , {flags : " awebp " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.webp " , {flags : " awebp " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.webp " ).transcode(toAnimated());
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.webp " >
<Transformation flags =" awebp " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.webp " ).transcode(toAnimated());
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.webp " >
<cld-transformation flags =" awebp " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.webp " ).transcode(toAnimated());
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.webp " >
<cl-transformation flags=" awebp " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(" awebp " )).BuildImageTag(" kitten_fighting.webp " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(" awebp " )).generate(" kitten_fighting.webp " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().flags(" awebp " )).generate(" kitten_fighting.webp " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.webp " )
transcode(Transcode.toAnimated())
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('kitten_fighting.webp').transformation(Transformation()
.transcode(Transcode.toAnimated()));
Dart (cloudinary_dart 0.x):
cloudinary.image('kitten_fighting.webp').transformation(Transformation()
.transcode(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 (or f_auto
in URLs). For example, to deliver kitten_fighting
in the best format for the requesting browser:
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " , :fetch_format =>:auto )
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ))
->delivery(Delivery ::format(
Format ::auto()));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " , array (" fetch_format " =>" auto " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image(fetch_format=" auto " )
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " , {fetch_format : " auto " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().fetchFormat(" auto " )).imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(auto()));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' , {fetchFormat : " auto " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " , {fetch_format : " auto " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(auto()));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
<Transformation fetchFormat =" auto " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(auto()));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
<cld-transformation fetch-format =" auto " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(auto()));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
<cl-transformation fetch-format=" auto " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat(" auto " )).BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat(" auto " )).generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().fetchFormat(" auto " )).generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
delivery(Delivery.format(
Format .auto()))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.delivery(Delivery.format(
Format.auto())));
Dart (cloudinary_dart 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.delivery(Delivery.format(
Format.auto())));
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 .
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.
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:
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " , :flags =>" lossy " , :fetch_format =>" gif " )
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ))
->delivery(Delivery ::format(
Format ::gif())
->lossy()
);
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " , array (" flags " =>" lossy " , " fetch_format " =>" gif " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image(flags=" lossy " , fetch_format=" gif " )
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " , {flags : " lossy " , fetch_format : " gif " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().flags(" lossy " ).fetchFormat(" gif " )).imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(gif()).lossy());
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' , {flags : " lossy " , fetchFormat : " gif " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " , {flags : " lossy " , fetch_format : " gif " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(gif()).lossy());
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
<Transformation flags =" lossy " fetchFormat =" gif " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(gif()).lossy());
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
<cld-transformation flags =" lossy " fetch-format =" gif " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.gif " ).delivery(format(gif()).lossy());
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
<cl-transformation flags=" lossy " fetch-format=" gif " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Flags(" lossy " ).FetchFormat(" gif " )).BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFlags(" lossy " ).setFetchFormat(" gif " )).generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().flags(" lossy " ).fetchFormat(" gif " )).generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
delivery(Delivery.format(
Format .gif()) {
lossy()
})
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.delivery(Delivery.format(
Format.gif())
.lossy()
));
Dart (cloudinary_dart 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.delivery(Delivery.format(
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.
Ruby (cloudinary 1.x):
cl_image_tag(" kitten_fighting.gif " , :transformation =>[
{:flags =>" lossy " , :fetch_format =>" gif " },
{:quality =>50 }
])
PHP (cloudinary_php 2.x):
(new ImageTag (' kitten_fighting.gif ' ))
->delivery(Delivery ::format(
Format ::gif())
->lossy()
)
->delivery(Delivery ::quality(50 ));
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" kitten_fighting.gif " , array (" transformation " =>array (
array (" flags " =>" lossy " , " fetch_format " =>" gif " ),
array (" quality " =>50 )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" kitten_fighting.gif " ).image(transformation=[
{' flags ' : " lossy " , ' fetch_format ' : " gif " },
{' quality ' : 50 }
])
Node.js (cloudinary 1.x):
cloudinary.image(" kitten_fighting.gif " , {transformation : [
{flags : " lossy " , fetch_format : " gif " },
{quality : 50 }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.flags(" lossy " ).fetchFormat(" gif " ).chain()
.quality(50 )).imageTag(" kitten_fighting.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" kitten_fighting.gif " )
.delivery(format(gif()).lossy())
.delivery(quality(50 ));
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' kitten_fighting.gif ' , {transformation : [
{flags : " lossy " , fetchFormat : " gif " },
{quality : 50 }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" kitten_fighting.gif " , {transformation : [
{flags : " lossy " , fetch_format : " gif " },
{quality : 50 }
]})
React (@cloudinary/react 1.x):
new CloudinaryImage(" kitten_fighting.gif " )
.delivery(format(gif()).lossy())
.delivery(quality(50 ));
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" kitten_fighting.gif " >
<Transformation flags =" lossy " fetchFormat =" gif " />
<Transformation quality =" 50 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" kitten_fighting.gif " )
.delivery(format(gif()).lossy())
.delivery(quality(50 ));
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" kitten_fighting.gif " >
<cld-transformation flags =" lossy " fetch-format =" gif " />
<cld-transformation quality =" 50 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" kitten_fighting.gif " )
.delivery(format(gif()).lossy())
.delivery(quality(50 ));
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" kitten_fighting.gif " >
<cl-transformation flags=" lossy " fetch-format=" gif " >
</ cl-transformation>
<cl-transformation quality="50">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Flags(" lossy " ).FetchFormat(" gif " ).Chain()
.Quality(50 )).BuildImageTag(" kitten_fighting.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setFlags(" lossy " ).setFetchFormat(" gif " ).chain()
.setQuality(50 )).generate(" kitten_fighting.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.flags(" lossy " ).fetchFormat(" gif " ).chain()
.quality(50 )).generate(" kitten_fighting.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" kitten_fighting.gif " )
delivery(Delivery.format(
Format .gif()) {
lossy()
})
delivery(Delivery.quality(50 ))
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.delivery(Delivery.format(
Format.gif())
.lossy()
)
.delivery(Delivery.quality(50)));
Dart (cloudinary_dart 0.x):
cloudinary.image('kitten_fighting.gif').transformation(Transformation()
.delivery(Delivery.format(
Format.gif())
.lossy()
)
.delivery(Delivery.quality(50)));
There are several ways to create animated images using Cloudinary:
You can create a single animated image (GIF, PNG or WebP) or video (MP4 or WebM) from multiple image assets, where each asset is used as a single frame of the resulting animated image or video.
Animated images can be created from a maximum of 500 frames (individual images), except in the following cases where the maximum is 100 frames:
If the processing is done in a synchronous mode (i.e., without the async
parameter set to true).
If there is an underlay or overlay added to the image (l_
or u_
).
If any transformation parameters are added that are not on the following list: background
, flags
, crop
, width
, height
, x
, y
, gravity
, quality
, angle
, page
, and dpr
.
If the angle
parameter is added with a value that is anything but exif
or auto
.
If the crop
parameter is added with a value that is anything but scale
, limit
, fit
, fill
, thumb
or crop
.
If the limit is exceeded, only the first 500 (or 100) images will be included.
Step 1 : Upload all the images to be included in the animated image or video. Make sure that you include:
An appropriate public ID when uploading each of the files; when they are merged into a single animated image or video, they are sorted alphabetically by their public IDs.
An identical tag for all images. The tag must be unique to these images only; the animated image creation process finds all images with the same tag and merges them into a single file.
Step 2 : Use the multi method of the upload API to create the animated image or video. If the images to be merged are not all the same size, you can add transformation parameters to the URL to crop them accordingly (using one of the crop modes plus width
or height
, etc). For example, to create an animated GIF from all images with the tag arrow_animation
:
Ruby (cloudinary 1.x):
Cloudinary ::Uploader .multi(' arrow_animation ' )
PHP (cloudinary_php 2.x):
$cloudinary ->uploadApi()->multi(' arrow_animation ' );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
\Cloudinary \Uploader ::multi(' arrow_animation ' );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
cloudinary.uploader.multi(" arrow_animation " )
Node.js (cloudinary 1.x):
cloudinary.v2.uploader
.multi(' arrow_animation ' )
.then(result=>console.log(result));
Java (cloudinary 1.x):
cloudinary.uploader().multi(' arrow_animation ' , ObjectUtils.emptyMap());
Go (cloudinary-go 1.x):
resp, err := cld.Upload.Multi(ctx, uploader.MultiParams{Tag: " arrow_animation " })
curl:
curl https://api.cloudinary.com/v1_1/demo/image/multi -X POST --data 'tag=arrow_animation×tamp=173719931&api_key=436464676&signature=a788d68f86a6f868af'
cli:
cld uploader multi "arrow_animation"
Step 3 : To deliver the animated image, use the Cloudinary image delivery URL with type
set to multi
. For example, to deliver an animated GIF created from all images with the tag arrow_animation
:
Ruby (cloudinary 1.x):
cl_image_tag(" arrow_animation.gif " , :type =>" multi " )
PHP (cloudinary_php 2.x):
(new ImageTag (' arrow_animation.gif ' ))
->deliveryType(" multi " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" arrow_animation.gif " , array (" type " =>" multi " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" arrow_animation.gif " ).image(type=" multi " )
Node.js (cloudinary 1.x):
cloudinary.image(" arrow_animation.gif " , {type : " multi " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().type(" multi " ).imageTag(" arrow_animation.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" arrow_animation.gif " ).setDeliveryType(" multi " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' arrow_animation.gif ' , {type : " multi " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" arrow_animation.gif " , {type : " multi " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" arrow_animation.gif " ).setDeliveryType(" multi " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" arrow_animation.gif " type =" multi " >
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" arrow_animation.gif " ).setDeliveryType(" multi " );
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" arrow_animation.gif " type=" multi " >
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" arrow_animation.gif " ).setDeliveryType(" multi " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" arrow_animation.gif " type=" multi " >
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Action(" multi " ).BuildImageTag(" arrow_animation.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setType( " multi " ).generate(" arrow_animation.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().type(" multi " ).generate(" arrow_animation.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" arrow_animation.gif " )
deliveryType(" multi " )
}.generate()
Flutter (cloudinary_flutter 0.x):
cloudinary.image('arrow_animation.gif').transformation(Transformation()
.setDeliveryType("multi"));
Dart (cloudinary_dart 0.x):
cloudinary.image('arrow_animation.gif').transformation(Transformation()
.setDeliveryType("multi"));
The following example showcases a method to create a very simple animated GIF of revolving text consisting of 20 individual frames. A script is executed to upload the individual images to Cloudinary, where each individual image (frame) is constructed from:
A previously uploaded blank image used as a base image.
A text string overlaid over the base image.
Each frame is a combination of the base image together with an overlay of a slightly modified version of the text string. The text is modified for each frame with the distort
effect parameter to change its perspective.
coordinates = {}
(0 ..10 ).each do |frame|
x_offset = frame * 10
y_back = 10 *(frame < 5 ? -frame : frame - 10 )
y_front = y_back*2
front = [ x_offset, y_front,
100 - x_offset, -y_back,
100 - x_offset, 100 +y_back,
x_offset, 100 - y_front ]
.map { |i| " #{ i} p " }.join(" : " )
back = [ x_offset, -y_back,
100 - x_offset, y_back*2 ,
100 - x_offset, 100 - y_back*2 ,
x_offset, 100 + y_back ]
.map { |i| " #{ i} p " }.join(" : " )
coordinates[frame] = front
coordinates[20 - frame] = back
end
(0 ..19 ).each do |frame|
x_offset = frame < 10 ? frame*10 : 200 - frame*10
myurl = Cloudinary ::Utils .cloudinary_url(
" base.png " ,
:transformation => [
{ :width => 510 , :height => 300 , :crop => " scale " ,
:background => " white " },
{ :overlay => " text:roboto_150_bold:Spinning text " ,
:color => " #0071BA " , :width => 500 , :height => 100 },
{ :effect => " distort: #{ coordinates[frame]} " },
{ :crop => " crop " , gravity : " center " ,
:width => ((500 *(100 -2 *x_offset)/100.0 ).abs.to_i),
:height => 300 },
{ :flags => " layer_apply " }])
Cloudinary ::Uploader .upload(
myurl,
:public_id => " spinning_text_ #{ ' %02d ' % frame} " ,
:tags => " spinning_text "
) if x_offset != 50
end
Cloudinary ::Uploader .multi(" spinning_text " , :delay => 100 )
After the script is run and the images are uploaded, the following URL delivers the animated GIF:
Ruby (cloudinary 1.x):
cl_image_tag(" spinning_text.gif " , :delay =>" 100 " , :type =>" multi " )
PHP (cloudinary_php 2.x):
(new ImageTag (' spinning_text.gif ' ))
->animated(Animated ::edit()->delay(100 ))
->deliveryType(" multi " );
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" spinning_text.gif " , array (" delay " =>" 100 " , " type " =>" multi " ))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" spinning_text.gif " ).image(delay=" 100 " , type=" multi " )
Node.js (cloudinary 1.x):
cloudinary.image(" spinning_text.gif " , {delay : " 100 " , type : " multi " })
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation().delay(" 100 " )).type(" multi " ).imageTag(" spinning_text.gif " );
JS (@cloudinary/url-gen 1.x):
new CloudinaryImage(" spinning_text.gif " )
.animated(edit().delay(100 ))
.setDeliveryType(" multi " );
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' spinning_text.gif ' , {delay : " 100 " , type : " multi " }).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" spinning_text.gif " , {delay : " 100 " , type : " multi " })
React (@cloudinary/react 1.x):
new CloudinaryImage(" spinning_text.gif " )
.animated(edit().delay(100 ))
.setDeliveryType(" multi " );
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" spinning_text.gif " type =" multi " >
<Transformation delay =" 100 " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
new CloudinaryImage(" spinning_text.gif " )
.animated(edit().delay(100 ))
.setDeliveryType(" multi " );
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" spinning_text.gif " type=" multi " >
<cld-transformation delay =" 100 " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
new CloudinaryImage(" spinning_text.gif " )
.animated(edit().delay(100 ))
.setDeliveryType(" multi " );
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" spinning_text.gif " type=" multi " >
<cl-transformation delay=" 100 " >
</ cl-transformation>
< / cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation().Delay(" 100 " )).Action(" multi " ).BuildImageTag(" spinning_text.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setType( " multi " ).setTransformation(CLDTransformation().setDelay(" 100 " )).generate(" spinning_text.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation().delay(" 100 " )).type(" multi " ).generate(" spinning_text.gif " );
Kotlin (kotlin-url-gen 1.x):
cloudinary.image {
publicId(" spinning_text.gif " )
animated(Animated.edit() { delay(100 ) })
deliveryType(" multi " )
}.generate()
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
Use the zoompan effect to apply zooming and/or panning to an image, resulting in an animated image.
You need to transform the original image to an animated image type by either changing the
extension or using the
format parameter.
For example, you could take this image of a hotel and pool:
...and create an animated version of it that starts zoomed into the right-hand side, and slowly pans out to the left while zooming out:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/hotel-pool.gif " , :transformation =>[
{:effect =>" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " },
{:effect =>" loop " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/hotel-pool.gif " , array (" transformation " =>array (
array (" effect " =>" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " ),
array (" effect " =>" loop " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/hotel-pool.gif " ).image(transformation=[
{' effect ' : " zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " },
{' effect ' : " loop " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" docs/hotel-pool.gif " , {transformation : [
{effect : " zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " },
{effect : " loop " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.effect(" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " ).chain()
.effect(" loop " )).imageTag(" docs/hotel-pool.gif " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/hotel-pool.gif ' , {transformation : [
{effect : " zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " },
{effect : " loop " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/hotel-pool.gif " , {transformation : [
{effect : " zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " },
{effect : " loop " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/hotel-pool.gif " >
<Transformation effect =" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " />
<Transformation effect =" loop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/hotel-pool.gif " >
<cld-transformation effect =" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " />
<cld-transformation effect =" loop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/hotel-pool.gif " >
<cl-transformation effect=" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " >
</ cl-transformation>
<cl-transformation effect="loop">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect(" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " ).Chain()
.Effect(" loop " )).BuildImageTag(" docs/hotel-pool.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect(" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " ).chain()
.setEffect(" loop " )).generate(" docs/hotel-pool.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.effect(" zoompan:mode_ofr;maxzoom_4.2;du_9;fps_30 " ).chain()
.effect(" loop " )).generate(" docs/hotel-pool.gif " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
Or, you can specify custom co-ordinates for the start and end positions, for example start from a position in the northwest of the USA map (x=300, y=100 pixels), and zoom into North Carolina at (x=950, y=400 pixels).
Ruby (cloudinary 1.x):
cl_image_tag(" docs/usa_map.gif " , :transformation =>[
{:effect =>" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " },
{:effect =>" loop " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/usa_map.gif " , array (" transformation " =>array (
array (" effect " =>" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " ),
array (" effect " =>" loop " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/usa_map.gif " ).image(transformation=[
{' effect ' : " zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " },
{' effect ' : " loop " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" docs/usa_map.gif " , {transformation : [
{effect : " zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " },
{effect : " loop " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.effect(" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " ).chain()
.effect(" loop " )).imageTag(" docs/usa_map.gif " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/usa_map.gif ' , {transformation : [
{effect : " zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " },
{effect : " loop " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/usa_map.gif " , {transformation : [
{effect : " zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " },
{effect : " loop " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/usa_map.gif " >
<Transformation effect =" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " />
<Transformation effect =" loop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/usa_map.gif " >
<cld-transformation effect =" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " />
<cld-transformation effect =" loop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/usa_map.gif " >
<cl-transformation effect=" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " >
</ cl-transformation>
<cl-transformation effect="loop">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect(" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " ).Chain()
.Effect(" loop " )).BuildImageTag(" docs/usa_map.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect(" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " ).chain()
.setEffect(" loop " )).generate(" docs/usa_map.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.effect(" zoompan:from_(zoom_2;x_300;y_100);to_(zoom_4;x_950;y_400);du_8;fps_30 " ).chain()
.effect(" loop " )).generate(" docs/usa_map.gif " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
If you want to automate the zoompan
effect for any image, you can use automatic gravity (g_auto
in URLs) to zoom into or out of the area of the image which Cloudinary determines to be most interesting. In the following example, the man's face is determined to be the most interesting area of the image, so the zoom starts from there when specifying from_(g_auto;zoom_3.4)
:
Ruby (cloudinary 1.x):
cl_image_tag(" docs/guitar-man.gif " , :transformation =>[
{:effect =>" zoompan:du_6;from_(g_auto;zoom_3.4) " },
{:effect =>" loop " }
])
PHP (cloudinary_php 2.x):
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
PHP (cloudinary_php 1.x (legacy)):
cl_image_tag(" docs/guitar-man.gif " , array (" transformation " =>array (
array (" effect " =>" zoompan:du_6;from_(g_auto;zoom_3.4) " ),
array (" effect " =>" loop " )
)))
cloudinary_php 2.x
cloudinary_php 1.x (legacy)
Python (cloudinary 1.x):
CloudinaryImage(" docs/guitar-man.gif " ).image(transformation=[
{' effect ' : " zoompan:du_6;from_(g_auto;zoom_3.4) " },
{' effect ' : " loop " }
])
Node.js (cloudinary 1.x):
cloudinary.image(" docs/guitar-man.gif " , {transformation : [
{effect : " zoompan:du_6;from_(g_auto;zoom_3.4) " },
{effect : " loop " }
]})
Java (cloudinary 1.x):
cloudinary.url().transformation(new Transformation()
.effect(" zoompan:du_6;from_(g_auto;zoom_3.4) " ).chain()
.effect(" loop " )).imageTag(" docs/guitar-man.gif " );
JS (@cloudinary/url-gen 1.x):
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
JS (cloudinary-core 2.x (legacy)):
cloudinary.imageTag(' docs/guitar-man.gif ' , {transformation : [
{effect : " zoompan:du_6;from_(g_auto;zoom_3.4) " },
{effect : " loop " }
]}).toHtml();
@cloudinary/url-gen 1.x
cloudinary-core 2.x (legacy)
jQuery (cloudinary-jquery 2.x):
$ .cloudinary.image(" docs/guitar-man.gif " , {transformation : [
{effect : " zoompan:du_6;from_(g_auto;zoom_3.4) " },
{effect : " loop " }
]})
React (@cloudinary/react 1.x):
@cloudinary/react 1.x
cloudinary-react 1.x
React (cloudinary-react 1.x):
<Image publicId =" docs/guitar-man.gif " >
<Transformation effect =" zoompan:du_6;from_(g_auto;zoom_3.4) " />
<Transformation effect =" loop " />
</Image>
@cloudinary/react 1.x
cloudinary-react 1.x
Vue.js (@cloudinary/vue 1.x):
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Vue.js (cloudinary-vue 1.x (legacy)):
<cld-image public -id=" docs/guitar-man.gif " >
<cld-transformation effect =" zoompan:du_6;from_(g_auto;zoom_3.4) " />
<cld-transformation effect =" loop " />
</ cld-image>
@cloudinary/vue 1.x
cloudinary-vue 1.x (legacy)
Angular (@cloudinary/ng 1.x):
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
Angular (@cloudinary/angular-5.x 1.x (legacy)):
<cl-image public -id=" docs/guitar-man.gif " >
<cl-transformation effect=" zoompan:du_6;from_(g_auto;zoom_3.4) " >
</ cl-transformation>
<cl-transformation effect="loop">
< / cl-transformation>
</ cl-image>
@cloudinary/ng 1.x
@cloudinary/angular-5.x 1.x (legacy)
.NET (CloudinaryDotNet 1.x):
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect(" zoompan:du_6;from_(g_auto;zoom_3.4) " ).Chain()
.Effect(" loop " )).BuildImageTag(" docs/guitar-man.gif " )
iOS (cloudinary 3.x):
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect(" zoompan:du_6;from_(g_auto;zoom_3.4) " ).chain()
.setEffect(" loop " )).generate(" docs/guitar-man.gif " )!, cloudinary: cloudinary)
Android (cloudinary-android 1.x):
MediaManager.get().url().transformation(new Transformation()
.effect(" zoompan:du_6;from_(g_auto;zoom_3.4) " ).chain()
.effect(" loop " )).generate(" docs/guitar-man.gif " );
Kotlin (kotlin-url-gen 1.x):
Flutter (cloudinary_flutter 0.x):
// This code example is not currently available.
Dart (cloudinary_dart 0.x):
// This code example is not currently available.
There are many different ways to apply zooming and panning to your images. You can apply different levels of zoom, duration and frame rate and you can even choose objects to pan between. Check out the transformation reference for details.