How to turn GIFs into videos on the fly with a single URL operation?

GIFS can be huge: a GIF uses a lossless LZW compression format but is not efficient enough, so it results in a large file size. Additional payload adversely impacts your app’s UX, and your SEO ranking.

If you have GIFs that negatively affect the website’s performance, Lighthouse in the Chrome DevTools will give you a suggestion like this one under the Opportunities heading:

Convert GIFs to videos

Video formats such as MP4 or WEBM reduce the file size considerably while not compromising the image quality.

There are a few ways you can go about performing this conversion.

Solution 1: Use Uploadcare’s gif2video operation in file URLs

Upload your GIF to Uploadcare

• Create an account; it’s free

• Navigate to your dashboard and choose a project where your files will go

• Upload your GIF

Or just use one of the File Uploader integrations.

Every uploaded file gets a unique URL that follows this structure:

https://ucarecdn.com/:uuid/:filename

Where:

• :uuid is a unique file identifier

• :filename is the original filename

Append the gif2video operation to the file URL

Once your GIF is uploaded, get the uuid for your file, and then you can start using Uploadcare’s gif2video API endpoint to handle the conversion.

gif2video operation supports GIF, WebP, and HEIC image formats and can convert them to their video counterparts.

The endpoint has the following URL structure:

/:uuid/gif2video/-/format/{video format}/-/quality/{quality level}/

Where:

• :uuid represents the unique id in Uploadcare’s CDN URL for your GIF.

• {video format} represents the required format. Currently, mp4 and webm values are supported. Default is mp4.

• {quality level} represents the required quality. Currently, lightest , lighter , normal, better and best values are supported. Default is normal.

For example, if Uploadcare’s CDN URL for your GIF is https://ucarecdn.com/70ccc603-a7d2-4988-8ab1-927e64d1d7ef/spongebobrainbow.gif, use the following URL to get an MP4 counterpart of your GIF with a normal quality level:

https://ucarecdn.com/70ccc603-a7d2-4988-8ab1-927e64d1d7ef/gif2video/-/format/mp4/-/quality/normal/

And that’s it! You don’t need to worry about conversion anymore; just use this URL in your video player and let Uploadcare’s magic handle the rest. You can refer to the gif2video endpoint documentation here.

Solution 2: Use manual conversion

You can also manually convert a GIF to different video formats by using ffmpeg. ffmpeg is a powerful tool that is widely used for video format conversion and transformation and can handle conversions from GIF to webm, and mp4 as well.

However, it is a manual process that you would have to repeat for every GIF. Once the GIFs are converted, you will have to upload them to Uploadcare, or a third-party CDN, and embed the final URL into your app.

Replace GIFs with videos

Now that you know how to convert a GIF to different video formats, you can replace your GIFs with videos.

Start by finding out all the <img> tags that use a GIF as their source:

<img src="{URL_TO_GIF}" />

Replace them with HTML5 <video> tags that contain Uploadcare’s gif2video URL as the source:

<video>
  <source src="https://ucarecdn.com/:uuid/gif2video/-/format/webm/-/quality/normal/"
  type="video/webm">
  <source src="https://ucarecdn.com/:uuid/gif2video/-/format/mp4/-/quality/normal/"
  type="video/mp4">
</video>

We recommend you define an HTML5 <video> tag with 2 sources: the first source will be used if the user’s browser supports webm, and will play a webm video counterpart of your GIF. The second source will be used as a fallback that plays an mp4 video.

Note that the 3 key traits of a GIF (they play automatically, loop continuously, and they’re silent) can be replicated by using video properties. Thus, you can replace all your <img> tags containing GIFs with the following:

<video autoPlay loop muted playsInline>
  <source src="https://ucarecdn.com/:uuid/gif2video/-/format/webm/-/quality/normal/"
  type="video/webm">
  <source src="https://ucarecdn.com/:uuid/gif2video/-/format/mp4/-/quality/normal/"
  type="video/mp4">
</video>

If you have any questions, be sure to reach out to our helpful team of Support engineers at help@uploadcare.com!