api.video

Features

Documentation

What's the Difference Between a GIF and a Video?

March 10, 2021 - Erikka Innes

A GIF differs from a video in that it's an animated sequence of images. How does an image sequence differ from a video? Aren't all videos just sequences of images? In some respects, yes, in others no. The difference lies in how the containers and files inside the containers are configured, as we'll soon find out.

What's a GIF?

via GIPHY


GIF is short for graphics interchange format, and first appeared in 1987. This format was developed by a team led by Steve Wilhite at CompuServe. GIFs work by compressing a set of frames or images into an image sequence that then loop for a set amount of time (or forever). Each image can contain up to 8 bits per pixel, allowing for a limit of 256 colors. GIFs are compressed using the Lempel-Ziv-Welch lossless data compression, which reduces file size without degrading visual quality. Take what I said about reducing file size with a grain of salt - video of the same length takes up much less space than a GIF of the same length. GIF quality also typically isn't that great due to the color limitation.

Fun Side Note: The creators of GIF pronounced it JIF (same sound as J in jog). This is pretty disappointing for those of us who say it with a hard G sound, but you can't always get what you want.

The value of a GIF, is that it's counted as an image. You don't have to do any special storage or processing for GIFs, you just add them to your website, they count as an image and play. So in this way, they are cost effective, because you are likely not paying to host the GIF somewhere (though that's possible, we have sites ike GIPHY for example).

GIFs are especially useful if you're doing something with limited colors, well defined edges and lines, and plan to use them sparingly. Because they use a lossless compression, they're very big, so putting a bunch of GIFs on your mobile app or website might seem like a good idea but it will slow the performance.

A GIF is a Type of Image Sequence

GIFs are collections of images that are played in quick succession. If you take a GIF file apart, one part of a GIF file is a series of images. It's the same as if you have a set of images labelled with a pattern that increases by one for each image (i.e. image1 image2 image3). In fact, an image sequence is information about how to play a set of sequential images, the set of images, and other details like the compression algorithm all bundled together inside a container. Common image sequence containers include TIFF, PNG, TARGA, DPX and others. (These can also be individual images.)

Image sequences are useful for a few reasons. First, they provide very high image quaility, and allow for more flexibility in a workflow. Some of that flexibility is in terms of editing - you can more easily crop a sequence of images in bulk while maintaining quality if you use an image sequence. You can also avoid choosing a video format if your production didn't decide which one to use. You can also use more tools for image sequence editing. For example, you can use the free tool GIMP to edit images in bulk and still maintain quality. NOTE: You probably won't find yourself doing this with a GIF very often - GIFs are typically not very high quality image sequences.

Second, they're great if you need to do a 3D render, or create visual effects. When it comes to rendering, they're more reliable, because should your render fail, you can pick back up on the last image rather than having to start all over again as you would have to if you rendered a video. Another great thing about image sequences is that they don't require a codec to play or render.

How Video Differs from an Image Sequence

If you take apart a video file, you'll find different pieces to it as you would for a GIF or other type of image sequence. However, the pieces are very different. Where an image sequence includes a folder that contains a series of images, a video file doesn't. Instead a video file contains frames. A single frame is the same as an image, but the way they're handled is different. Instead of going image by image, video files break the frames into chunks. You'll find a certain number of frames bundled into each chunk and for some formats, the video is one complete piece.

Video compresses in a more lossy way and you have to render it in one go. If your render fails, you have to start the whole thing over since the computer can't easily tell at what point everything broke down. So why use video? Online video compresses more efficiently, allowing for faster, better playback. If you add it to your website, video doesn't automatically slow down performance (unless you have it set to play by default, but that's a different story). Video is also best for live streaming, where you need a combination of quality and also compression in order to stream the video quickly enough for people to have a smooth viewing experience.

Conclusion

If you were feeling TLDR, here's the highlights:

Properties of a GIF

  • A GIF is a type of image sequence, but it is lower quality. This makes it useful on the web, but not necessarily as part of a video production workflow.
  • A GIF is counted as an image, so you can add it to a website and it's treated like an image. You don't have to pay for video hosting.
  • For what they are, GIFs take up a ton of storage space. GIFs will drag down site and application performance if you use too many of them.
  • GIFs are great for high-impact, quick marketing if you are using limited colors and clear, sharp lines and edges in your images.

Properties of an Image Sequence

  • An image sequence is a container with a folder containing a sequence of images in it.
  • Image sequences are often very high quality (GIFs not so much, due to color restrictions).
  • You don't need a codec to play an image sequence.
  • Image sequences take up a lot of storage space, so they can slow performance.
  • Image sequences are ideal for visual effects, animation, and 3D video where you'll be doing a lot of rendering. This is because if your render fails, your computer can easily figure out where to pick back up to complete the render from.
  • Image sequences can be edited or cropped in bulk with tools like Photoshop or GIMP without sacrificing the quality of any of the images.

Properties of a Video

  • A video container has the video inside, but it's broken into chunks of frames or has one single file that's all of the frames, depending on the format.
  • Videos can be high quality, but are more lossy than image sequences.
  • You can't easily edit individual video frames.
  • Video codecs allow for fast, efficient compression allowing for better performance on the internet. Most films will eventually be transcoded into some kind of video file if they're going to be displayed via internet.
  • Video is ideal for live streaming and video chat since it allows for a combination of good enough quality and high enough speed to provide a smooth user experience.

You May Also Like

Erikka Innes

Developer Evangelist

Get started now

Connect your users with videos