Instant GIFs! For animated video thumbnails and...whatever

We might not be able to agree on how to pronounce "GIF" (despite the creator ending the debate, but that's neither here nor there) but there's something special about them. Are they an ancient technology? Yes. Are there far more efficient ways of displaying animated frames? Absolutely. But GIFs are a blast, they work everywhere, and, most importantly, sometimes they're simply what users want.

(It's animated!)

For as long as I've been helping developers build on and work with video platforms, GIF outputs has been one of the most consistent requests, and the answer has always been a reluctant no. It's weird being this excited to announce that we support a format from the 1980s, but I'm incredibly proud to do so. Now you can create high quality GIFs from any Mux video with one simple GET request.

Our nifty new feature can instantly create a GIF from video. There’s no additional API request to make or waiting period to receive it - just GET a URL and we’ll create a GIF. With our Image API, you can create an animated GIF up to 10 seconds long from any part of a video.

Let's try it out

We can use any video we've already got in Mux, so we'll use the most recent copy of Big Buck Bunny we've got on hand. Let's create a new asset with a public URL for playing with, then a signed URL that we'll use in production:

curl --request POST \  
  --url https://api.mux.com/video/v1/assets \
  --header 'authorization: Basic {YOUR_AUTH_TOKEN}' \
  --header 'content-type: application/json' \
  --data '{
  "input": "{BIG BUCK BUNNY URL}",
  "playback_policy": ["public", "signed"]
}'

For the sake of the examples, let's say you just ran that request above and got these two playback IDs back:

"playback_ids": [
  {
    "policy": "public",
    "id": "tgcgNxURMDq02gJ02thoMZ3cLPsNHzN4Ak"
  },
  {
    "policy": "signed",
    "id": "p5yZIQjFHBwaBt402PMTtxZnZzkyi200qq"
  }
]

We can already easily grab a thumbnail by getting the images from the video:

https://image.mux.com/tgcgNxURMDq02gJ02thoMZ3cLPsNHzN4Ak/thumbnail.jpg?time=20

This looks like it'll make a great poster image, but now we could use this same endpoint to get something animated:

https://image.mux.com/tgcgNxURMDq02gJ02thoMZ3cLPsNHzN4Ak/animated.gif?start=20

From here we can tweak our GIF in terms of frame rate, width, or duration:

https://image.mux.com/tgcgNxURMDq02gJ02thoMZ3cLPsNHzN4Ak/animated.gif?start=50&end=55&width=500&fps=2

Great! Now that we have the GIF we want, we should make sure we deliver the image to viewers using a signed URL in production. This makes it so viewers can't monkey with the parameters and get new and different images than the one we selected.

If you've used our signed URLs already for videos or thumbnails, the only difference is you'll use a g type when creating the JWT. Here's an example using Node and the jsonwebtoken package that creates a token for the last GIF we created.

const jwt = require('jsonwebtoken');  
const gifParams = { start: 50, end: 55, width: 500, fps: 2 };

const keyid = process.env.MUX_SIGNING_KEY;  
const keySecret = Buffer.from(process.env.MUX_PRIVATE_KEY, 'base64');  
const tokenParams = {  
    keyid,
    audience: 'g', 
    subject: 'p5yZIQjFHBwaBt402PMTtxZnZzkyi200qq',
    expiresIn: '1d',
    noTimestamp: true,
    algorithm: 'RS256',
};

const token = jwt.sign(gifParams, keySecret, tokenParams);

The above assumes you have environment variables set for a URL signing key pair and a signed playback policy to use, but if all goes according to plan you should have a token you can now use! In production, you would probably want to have your API return image urls with this signed token, like so:

https://image.mux.com/p5yZIQjFHBwaBt402PMTtxZnZzkyi200qq/animated.gif?token={token}

GIFs can help increase engagement of your video

A thumbnail is like a mini ad for each video. It’s what catches people’s eyes and compels them to hit “play”. A GIF is a great way to deliver a bite-size piece of content and pique curiosity.

There are some guidelines one should consider when creating a thumbnail. Quality is a given (and if you’re already using our Image API, you’re covered) but a thumbnail should also be visually compelling and representative of the content. By offering the option of a GIF to your users, it can help them achieve both through animation and the ability to provide a preview of their content.

There are examples of this emerging on the web with the most visible one being YouTube. They’ve transitioned from static images to animated thumbnails. Try A/B testing to see if having GIF thumbnails increases click-throughs across the videos on your platform.

Help your users’ videos go viral

Even if you don’t use GIFs as thumbnails, you should still consider creating some to promote your content because generally, they’re fun and easily shareable. Since browsers treat GIFs as images, you don’t have to worry about whether it will play (unlike video). You can share your GIF anywhere including Twitter, Slack, or any social media.

Make all the GIFs your heart desires! Simply sign up for a free Mux account.