> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://uploadcare.com/docs/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://uploadcare.com/docs/_mcp/server. # Convert animated images (GIF) to videos > Convert GIFs to lightweight video formats on the fly to improve performance and reduce load times for faster, high-quality content delivery. Video files are much smaller than GIFs, without noticeable quality loss. Their delivery to end users is much faster. Gif to video operation converts animated image files, such as **GIF**, **WebP**, and **HEIC**, to video and transforms them on the fly. GIF to Video workflow is the same as with other CDN operations. The only difference is the `gif2video` URL directive should be included after the `/` separator, not `/-/`. `/:uuid/gif2video/` This feature works when `sequence` = `true` in `image_info` (see the [file info example](https://uploadcare.com/docs/api/rest/file/info)). In case your source file is not a supported animated image or the conversion feature is disabled for your project, you'll get an HTTP 400 error. Please note, even though you don't use `/-/` after `:uuid` with the `gif2video` directive, the separator is used with specific operations designed for the GIF to Video workflow. `/:uuid/gif2video/-/format/webm/-/quality/better/` ### Billing * This feature is available on [paid plans](https://uploadcare.com/pricing/). * Learn how we [charge](/docs/billing/#image-processing) for this operation. ## Format \[#gif2video-format] `-/format/:value/` Converts an animated image to the chosen format. * `:value`: one of the following formats: * `mp4`: H.264 video format. The format is supported by all major browsers. * `webm`: WebM video format.\ [Supported WebM](https://caniuse.com#feat=webm) in Google Chrome, Firefox, and Opera. When no `format` operation is specified, `mp4` is used. When embedding videos, the best practice is to specify both formats and let clients choose a more suitable one: ```html ``` Original GIF: 6.5MB, MP4: 251KB, WebM: 202KB ## Quality \[#gif2video-quality] `-/quality/:value/` Sets both quality and compression ratios for the output video. * `:value`: one of the following levels from better compression to better quality: * `lightest` * `lighter` * `normal` * `better` * `best` When no `quality` operation is specified, `normal` is used.
[](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/quality/lightest/) \ `-/quality/lightest/`\ MP4: 35kb, WebM: 70kb [](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/quality/better/) \ `-/quality/better/`\ MP4: 147kb, WebM: 167kb
## Preview \[#gif2video-preview] `-/preview/`\ `-/preview/:dimensions/` Downscales a video proportionally to fit the given width and height in pixels. * `:dimensions`: width and height in pixels separated by `x`.\ Examples: `320x240`.\ If the dimensions are not specified, it'll be `2048x2048`. [`/:uuid/gif2video/-/preview/`](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/preview/) [`/:uuid/gif2video/-/preview/300x500/`](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/preview/300x500/) ## Resize \[#gif2video-resize] `-/resize/:one_or_two_dimensions/` Resizes a video to one or two dimensions. * `:one_or_two_dimensions`: width and height in pixels separated by `x`, one of the values can be omitted. \ Examples: `320x240`, `320x`, `x240`. When you explicitly set both width and height, it may result in a distorted video. This operation will preserve the original aspect ratio and resize the video accordingly if you specify either side. [`/:uuid/gif2video/-/resize/200x200/`](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/resize/200x200/) [`/:uuid/gif2video/-/resize/200x/`](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/resize/200x/) [`/:uuid/gif2video/-/resize/x600/`](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/resize/x600/) ## Crop \[#gif2video-crop] `-/crop/:dimensions/`\ `-/crop/:dimensions/:alignment/` Crops a video by using specified dimensions and alignment. * `:dimensions`: width and height in pixels or percents separated by `x`.\ Percent values are based on original size and should end with `%` or `p` char.\ Examples: `320x240`, `50px240`, `30%x25%`.\ If given dimension is greater than the one of the video, video dimension is used, and no color-filling happens. * `:alignment`: horizontal and vertical offsets in pixels or percents separated by comma (`,`).\ Percent values are a position of cropped area in full video canvas and should end with % or p char.\ Examples: `100,50`, `50p,240`, `30%,25%`.\ A single semantic shortcut is also allowed as an alignment value: `center`, `top`, `right`, `bottom`, `left`.\ If alignment is not specified, `center` value is used. In URLs, `%` is an escape character and should be encoded with `%25` escape sequence, e.g. `/crop/200x200/80%25,80%25/`. For convenience, you can use the `p` shortcut for percent, which doesn't require encoding.
[](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/preview/) \ Original [](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/crop/220x220/center/) \ `-/crop/220x220/center/` [](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/crop/500x300/100,50/) \ `-/crop/500x300/100,50/`
## Scale crop \[#gif2video-scale-crop] `-/scale_crop/:dimensions/`\ `-/scale_crop/:dimensions/:alignment/` Scales a video until it fully covers the specified dimensions; the rest gets cropped. Mostly used to place videos with various dimensions into placeholders (e.g., square shaped). * `:dimensions`: width and height in pixels or percents separated by `x`.\ Percent values are based on original size and should end with `%` or `p` char.\ Examples: `320x240`, `50px240`, `30%x25%`. * `:alignment`: horizontal and vertical offsets in pixels or percents separated by comma (`,`).\ Percent values are a position of cropped area in full video canvas and should end with % or p char.\ Examples: `100,50`, `50p,240`, `30%,25%`.\ A single semantic shortcut is also allowed as an alignment value: `center`, `top`, `right`, `bottom`, `left`.\ If alignment is not specified, `center` value is used. In URLs, `%` is an escape character and should be encoded with `%25` escape sequence, e.g. `-/scale_crop/200x200/80%25,80%25/`. For convenience, you can use the `p` shortcut for percent, which doesn't require encoding.
[](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/resize/330x330/) \ `-/resize/330x330/`\ Requested size\ Distorted [](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/preview/330x330/) \ `-/preview/330x330/`\ Adjusted size\ No distortion [](https://examples.ucarecd.net/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/scale_crop/330x330/center/) \ `-/scale_crop/330x330/center/`\ Requested size\ No distortion