Convert animated images to videos

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). 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.
• Learn how we charge for this operation.

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 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:

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

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

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.

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.

https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/preview/
/:uuid/gif2video/-/preview/
https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/preview/300x500/
/:uuid/gif2video/-/preview/300x500/

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.

https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/resize/200x200/
/:uuid/gif2video/-/resize/200x200/
https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/resize/200x/
/:uuid/gif2video/-/resize/200x/
https://ucarecdn.com/af0136cc-c60a-49a3-a10f-f9319f0ce7e1/gif2video/-/resize/x600/
/:uuid/gif2video/-/resize/x600/

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.

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.