Stop Using GIFs. Use Videos and Other Image Formats Instead

GIFs (pronounced yiffs¹) are an integral part of the world wide web. Whether they’re used express emotions or to illustrate a concept, these short looping images (well videos) are there to do it. As great as they are they have problems, biggest of which are their filesizes. Thankfully, there are alternatives you can use instead that are far better.

In this post, I’ll describe the alternatives, how they perform (in my very limited use case) and how to use them.

The Alternatives

You can replace GIFs with either a video or another animated image.

For animated images, you have WebP and sequenced AVIF. For videos, you can encode them with H.264/AVC, H.265/HEVC, VP9 or AV1. Each of these have differing levels of support across browsers as shown by this table (using data from Can I Use).

Difference Between Media Codecs and Containers

A codec is how video and audio streams are encoded and decoded. Examples include the H.264 and AV1 for video, AAC and Opus for audio.

A container is a file format which holds multiple video and audio streams along with data like subtitles, menus and metadata. Examples include MP4, WebM, MP3 (which is a codec on its own as well) and AVI.

How They Perform (In My Very Limited Example)

For my example, I’ll use clip from the video game Yakuza 0 of deuteragonist Goro Majima who unfolds his arms to the side exclaiming “holy shit”, all while the camera is zooming in on him.