When an image or video URL contains f_auto, the CDN examines the user-agent and then translates the f_auto portion to one of these versions:
In images-
f_avif (Recent versions of Chrome or other browsers that support AVIF)
f_webp (Chrome browsers)
f_webp,fl_awebp (Older Chrome browsers without support for animated WEBP)
f_wdp (IE/Edge browsers)
f_jp2
f_auto (All other browsers which will receive the original image format)
And in videos-
f_webm,vc_vp9/mp4 (Chrome browsers)
f_mp4,vc_h265 (Safari and iOS)
f_mp4,vc_h264 (All other browsers)
Some use-cases require you to prepare these derived (transformed) versions ahead of time. This approach is recommended when you want the assets to be ready for fast delivery, if you have large images/videos that can't be transformed on-the-fly, or you're using the Strict Transformations security setting to limit how new derived assets can be created.
Preparing the derived versions in advance can be done by using eager transformations.
Eager transformations can be included in an upload preset that is used in the upload request, or by adding eager transformations to the API request directly (upload or explicit).
For example, to create the different versions of a video file for f_auto where the original and delivery URL will both have a ".mp4" extension, in Java:
Map result= cloudinary.uploader().explicit("videoSample",
ObjectUtils.asMap("type","upload","resource_type", "video",
"eager", Arrays.asList(
new EagerTransformation().rawTransformation("f_webm,vc_vp9/mp4"),
new EagerTransformation().rawTransformation("f_mp4,vc_h265"),
new EagerTransformation().rawTransformation("f_mp4,vc_h264"))
));
The API response will include the derived versions:
eager":[
{
"bytes":516896,
"width":854,
"format":"webm",
"secure_url":"https://res.cloudinary.com/demo/video/upload/f_webm,vc_vp9/v1596977169/videoSample.mp4",
"transformation":"f_webm,vc_vp9/mp4",
"url":"http://res.cloudinary.com/demo/video/upload/f_webm,vc_vp9/v1596977169/videoSample.mp4",
"height":480
},
{
"bytes":683160,
"width":854,
"format":"mp4",
"secure_url":"https://res.cloudinary.com/demo/video/upload/f_mp4,vc_h264/v1596977169/videoSample.mp4",
"transformation":"f_mp4,vc_h264",
"url":"http://res.cloudinary.com/demo/video/upload/f_mp4,vc_h264/v1596977169/videoSample.mp4",
"height":480
},
{
"bytes":524972,
"width":854,
"format":"mp4",
"secure_url":"https://res.cloudinary.com/demo/video/upload/f_mp4,vc_h265/v1596977169/videoSample.mp4",
"transformation":"f_mp4,vc_h265",
"url":"http://res.cloudinary.com/demo/video/upload/f_mp4,vc_h265/v1596977169/videoSample.mp4",
"height":480
}
],
In addition, you can view the existing derived versions in the Media Library by locating the original asset and going to the Transformations page and clicking on 'view derived images'.
Comments
0 comments
Please sign in to leave a comment.