Convert videos to animated images (video tutorial)

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

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

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

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

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

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

---

Keep learning

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

 

 

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.