Programmable Media

Convert videos to animated images (video tutorial)

Last updated: Jul-19-2024

Overview

Learn how to convert videos to animated image formats, such as AVIF, WebP and GIF, on the fly by adding transformation parameters to the delivery URL.

Video tutorial


Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Transform the video to a GIF

Jump to this spot in the video  0:05 You can change a video to an animated image format using the format parameter. For example, to transform an MP4 video to a GIF, specify f_gif in the URL.

Reduce the file size

Jump to this spot in the video  0:24 Images in the GIF file format are, in general, very large. You can reduce the file size by changing the dimensions to suit the displayed image size. For example, scale the image to a width of 600 pixels using c_scale,w_600 (or, w_600 as shown in the video). Additionally, to reduce the size further, reduce the frames per second by adding, for example, fps_6, to use 6 frames per second.

Transform the video to a WebP

Jump to this spot in the video  1:03 Another way to reduce the file size is by changing the format to one that's more optimal, for example WebP. You can do this by adding f_webp,fl_animated,fl_awebp to the URL, using the animated and awebp flags.

Use automatic format selection

Jump to this spot in the video  1:32 You can let Cloudinary return the optimal format, based on what is supported by the requesting browser, by using automatic format selection (f_auto:animated).

Loop the animated image

Jump to this spot in the video  2:06 Make your animated image play infinitely by setting it to repeat continuously with the loop effect (e_loop).

Keep learning

Related topics

If you like this, you might also like...

Optimization Tips
Tips for delivering optimized images
Zoompan Effect
Apply the Ken Burns effect to zoom and pan on an image
Named Transformations
Simplify & standardize complex delivery URLs

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: