Animated Image

What is an Animated Image in the Computer?

An animated image is a video without sound stored in an "image" format such as GIF or WebP that supports animation. Looking at it from another way, some image formats support animation, but they don't support audio, so they aren't called "video" formats, they're called "image" formats. An animated image is just a mute video stored as a file in one of these image formats.

More technically, video formats are typically video container formats, they contain a video stream encoded with a video codec such as MPEG, and an audio stream encoded with an audio codec such as AAC. They're inherently complex. By contrast, image formats typically only include pixel data that is compressed with some compression method.

Animated images can be trivially added to a format by simply adding more pixel data to a file. For example, if we have a GIF that is a static image, it's practically the same format as an animated GIF that only has 1 frame of animation. If we want to add more frames, we could just have the data of 2 GIF files "merged" into a single GIF. So long as both images have the same resolution and same color palette, it should be pretty simple to do.

Animated images are terrible for long animations, quickly ballooning in file size. Animated images typically store each frame as a separate image together with metadata telling how long a single frame should be displayed on screen. This is terrible for file sizes because it means if a single frame is 90% identical to the previous frame, we can't save bytes by reusing the data from the last frame. Naturally, animated image formats do come with some methods to achieve this, however, these methods are often terrible for most types of animation. For example, GIF can reuse data from the previous frame, however it works by making the new frame a smaller rectangle and applying it only to pixels that changed. This means if a tiny rectangle area changed from the previous image, most of the data can be reused, but if the top-left corner and the bottom-right corner have changed, the GIF format can't modify both sides separately in a new frame, it has to create a huge rectangle with duplicated data. WebP, although more modern, isn't very good at compressing video either compared to an actual video format like WebM. Video compression codecs are amazing and can do all sorts of things to save bytes between frames.

In the past, animated GIFs were the only widely supported way to place animated images on pages, and animation pulls attention from users. Many old websites had animated image banners and 88x31px buttons.