uploadcaredocs

GIF to Video

Uploadcare Image Transformations features GIF to Video conversion that provides better loading times thus reducing your bounce rate. The feature is available on paid plans only.

GIF to Video workflow is the same as with other image transformations. The only difference is the gif2video URL directive should be included after the / separator, not /-/.

/:uuid/gif2video/

gif2video converts GIF files to video on the fly. Video files are much smaller than GIFs, without any quality loss. Their delivery to end users is much faster. In case your source file is not an animated GIF 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: format and quality. We use such approach for our parser to tell the format and quality operations related to GIF to Video from their general versions.

Set Output Video Format, format

-/format/:value/

Converts an animated GIF to one of the following formats:

  • mp4 — H.264 video format. The format is supported by all major browsers. When no format is specified, mp4 is used by default.
  • webm — WebM video format. Supported in Google Chrome, Firefox, and Opera.

When embedding videos, the best practice is to specify both formats and let clients choose a more suitable one,

<video width="384" height="216" autoplay loop muted webkit-playsinline playsinline>
  <source src="https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/format/webm/road.gif" type="video/webm">
  <source src="https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/format/mp4/road.gif" type="video/mp4">
</video>

Original GIF: 6.5MB, MP4: 251KB, WebM: 202KB

Set Output Video Quality, quality

-/quality/:value/

Sets both quality and compression ratio for the output video. There are five :value levels: from better compression to better quality:
lightest, lighter, normal, better, best.

When quality is not explicitly specified, normal is used by default.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.