GIF to Video

gif2video converts GIF files to video and transforms them on the fly. Video files are much smaller than GIFs, without any quality loss. Their delivery to end users is much faster.

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 file info example here). 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.

/:uuid/gif2video/-/format/webm/-/quality/better/

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

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.

Preview

-/preview/
-/preview/:two_dimensions/

Downscales a video proportionally to fit the given width and height in pixels. If the dimensions are not specified, it'll be 2048x2048.

Resize

-/resize/:one_or_two_dimensions/

Resizes a video to one or two dimensions. When you set both width and height explicitly, it may result in a distorted video. If you specify either side, this operation will preserve the original aspect ratio and resize the video accordingly.

Crop

-/crop/:two_dimensions/
-/crop/:two_dimensions/:two_coords/
-/crop/:two_dimensions/:alignment/

Crops a video by using specified dimensions and offsets. You can set offset in pixels and percent. :alignment values: center, top, right, bottom, left. If no values are set, center is used.

In URLs, % is an escape character; it can’t be used as-is. Use a %25 escape sequence or a p shortcut for percent.

If given dimension is greater than the one of the image, image dimension is used, and no color-filling happens.

Scale Crop

-/scale_crop/:two_dimensions/
-/scale_crop/:two_dimensions/:offsets/

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).

  • :offsetsstring, format: M%,N%, where M and N are the optional offsets along one or both of the axes in percentages; other possible values include:
  • center — a keyword responsible for centering the crop focus.