Some video files contain bulky 3D objects and subtitles. Some are so lightweight they can shrink to a few megabytes. Let’s look into different video file formats, so you can decide which one is the best fit for your needs.

When talking about video file formats, there are two key terms you need to know: containers (a.k.a. file formats) and codecs.

• File formats, also known as containers, are file extensions you choose to save your video data: MP4, AVI, FLV, and others. Some containers can support massive amounts of additional metadata. Others won’t even allow you to store subtitles but have fewer compatibility and file size issues.
• Codecs are responsible for an entirely different part of working with video files. They handle the compression and decompression of your videos. That is basically how the data is treated when uploaded, downloaded, imported, exported, streamed, etc.

Sounds too overwhelming? Let’s break all this down and take a closer look at both containers and codecs.

Video file formats a.k.a. containers

Containers are like boxes that you use to pack your video projects into. A box can be as simple as a kraft paper wrapping or as elaborate as a colorful box with ribbons, stickers, and confetti flying out of it. As bizarre as it sounds, this is the best way to explain how video containers work.

Some of them only store a video and an audio track, while others store generous amounts of metadata. Metadata can be structural, administrative, or descriptive and contain anything from video title and camera model to copyright info and video chapters. Some of the most versatile formats that handle numerous types of metadata include Adobe After Effects’ AEP, Google’s WebM, Apple’s MOV, and the good old MP4.

MOV

MOV is Apple’s native video file format. It is one of the most popular containers, as it can store video, audio, image, and text data along with video effects. MOV files are known for being bulky yet impeccably crisp. Though MOV was originally developed by Apple for QuickTime, it is largely supported by video players and editors across other operating systems. You can open MOV files using Windows Media Player or VLC Media Player.

MOV is not ideal for use online due to large file sizes. Luckily, because MOVs are supported by other media players, you can easily convert them into other formats.

MOV can be encoded with both AVC (H.264) and HEVC (H.265) codecs.

WEBM

Developed by Google specifically for the web, WEBM is an irreplaceable format for streaming and posting online. In a way, WEBM is a one-in-all that allows you to have the best of both worlds: superb video quality and magically small file sizes. It is natively supported by Chrome, Opera, Mozilla Firefox, Microsoft Edge, and Safari. You can also open WEBMs using VLC Media Player. WEBM video files support the entire range of metadata types, except interactive menus. Other than that, you can even have 3D data in your WEBM, along with video, audio, and subtitles.

Though editing a WEBM file can be tricky, there are plenty of online and desktop editors that support this format. These include iMovie, VSDC Free Video Editor, VLC, Clipchamp, and others. Read here about the best video editing software. 

AEP

Adobe After Effects’ native project file format is the go-to video format for many motion designers. It can store video and audio files, images, texts, and visual effects. Along with a .aep file, you may find a .aepx which is a text-based XML project file. You can open and edit it in a text editor without having to run After Effects. The elements it includes are comments, chapter point parameters, file paths of source footage items, etc.

As great as it is, once your video is ready, you will need to choose a different container to export the file. You need to select an appropriate file type depending on whether you want to stream, store, or publish the video online. While After Effects only allows MOV and AVI export by default, you can turn an AEP into an MP4 or a WEBM with a bit of plugin magic.

MP4

The most widely used video container of all, MP4 is incredibly easy to work with. No matter what OS, video editing software, or multimedia player you use, opening an MP4 won’t be an issue. MP4s are universally compatible, making them the most convenient file format of all. The MP4 container uses lossy compression, which makes the file sizes significantly smaller without a noticeable reduction in video quality. Because of this, MP4 is the go-to choice for streaming platforms and all things web. Plus, MP4 allows you to store all kinds of metadata, plus interactive menus and 3D data.

The biggest downside of using the MP4 container is that because it can store chunks of data this massive, you might often encounter playback errors. It’s not uncommon to come across MP4 files that are corrupted or have the audio out of sync.

Other non-video file formats in motion graphics

When you have a small animated scene that is only a few frames long, an image or text format can be a much better choice. They are smaller, easier to integrate into web design, and less computationally demanding than videos. You won’t be able to store metadata, visual effects, 3D elements, or audio, but it’s all worth the satisfaction of immense size reduction. This is why in our Ouch! illustration library, JSON, and GIF are the top options for file export. Let’s take a closer look at both.

JSON

JSON or JavaScript Object Notation is a file type that only contains text. In essence, with JSON, you can represent any data you want as a code. You can quickly edit it using any text editor, including apps as simple as Notepad or Apple TextEditor. Thanks to this, JSON files are extremely small, allowing you to pack an animated scene into less than 1 megabyte of data. The tricky part is that you won’t be able to open the media file if you save it as a JSON file. You will need to convert it to a different file type or feed it into an application that can transform JSON codes into media files.

An example of a tool like this is Lottie — a library that parses JSON animations and renders them natively in web browsers. The smart JSON reader was created by Airbnb’s developers. It’s an open-source tool that works on Windows, iOS, Android, and other platforms.

GIF

One of the longest-living motion graphics file formats, GIF, was developed back in 1987. Because it supports a 256-color RGB palette, GIF is not an ideal format for images with complex billion-shade-deep gradients, but it’s great for stylized 2D motion graphics. Thanks to a reduced color palette, GIFs are normally less bulky than video files and load faster when viewed in a web browser. GIFs can store transparency data, making them convenient for placement on top of UI elements. Creating a GIF file is a no-brainer since many video editors support GIF export. You can also convert ready-made videos to GIFs using online and desktop video editors.

The main disadvantage of using a GIF is that it can turn out surprisingly heavy, especially if you choose higher frame sizes and keep a high number of frames in your animation. Plus, you’d be surprised to see how often converting a video to a GIF makes it even bigger than the original file. In cases like these, GIFs can take forever to load or lag mid-loading.

Codecs

As we mentioned earlier, codecs handle compression and decompression of video files. Compression can be lossy or lossless. As the name suggests, lossless compression is more quality-friendly since it preserves every bit of data making up the original file.

• Lossy codecs get rid of excess chunks of data, which inevitably leads to a slight decrease in video quality for the sake of smaller file sizes. To be fair, lossy never means distorted to the point of being completely unviewable. Most of the time, you won’t even notice a drop in video quality unless you view it on a cinema theater-size UHD screen.
• Overall, lossless compression is a go-to option for storing videos and playing them on big screens. For anything else, lossy compression is a smarter choice. When using a lossless codec, you’ll get unmatched pixel-perfect quality at the cost of enormous file sizes. Since most videos today end up on the web, there are very few purely lossless codecs.

H.264 (AVC)

H.264, also known as Advanced Video Coding, was published almost 20 years ago, and it’s still the most common codec. AVC is used for streaming, broadcasting, video storage, and everything in between, making it the industry standard. Most video editors were designed to work with H.264-coded files. It delivers high video quality (up to 8K UHD) at much lower bitrates than older codecs like MPEG-2 or H.263.

As you might have guessed from the description, H.264 is a lossy codec that provides efficient data compression. Some of the platforms that rely on H.264 heavily include Netflix, Vimeo, iTunes, and many other media giants. Because H.264 has been around for two decades now, you’ll likely have no software or hardware compatibility issues when working on an AVC-coded video file.

H.265 (HEVC)

H.265, a.k.a. High-Efficiency Video Coding, is the newer, more advanced video coding standard designed as AVC’s successor. Like H.264, it supports resolutions up to 8K UHD, except at an even lower bit rate and up to 50% smaller file size. With 4K becoming the new HD, the demand for exceptionally crisp, high-resolution videos at low bitrates is calling for a wider use of HEVC. Netflix uses H.265 for its 4K content, and so does Amazon Prime Video.

What stops everyone from using HEVC if it’s so good in every way then? Because it’s relatively new, not every video editing app and not every PC can handle H.265-coded video files. It has entirely different encoding and decoding algorithms compared to H.264. Unlike its predecessor, which encodes every pixel from every frame, HEVC detects areas that stay the same from frame to frame. Thanks to this, it drops redundant calculations, which eventually reduces the bitrates. Naturally, it requires more computational power than the older algorithm used by H.264, making H.265 not exactly universally accessible.

VP9

HEVC’s main competitor, VP9, is a free and open-source codec developed by Google. It supports both lossy and lossless compression and works with resolutions up to mind-blowing 65536×65536 pixels. In contrast, HEVC supports resolutions up to 8192×4320 pixels. VP9 is WEBM’s best friend, and together this codec and this container from Google can make insanely clean videos that don’t take up endless gigabytes of space and are easy to stream in high quality.

Just like H.265, VP9 supports HDR and 10-bit color depth. Compression rates and bitrates for VP9 are pretty much the same as those of H.265. In terms of data processing, VP9’s encoding and decoding are similar to HEVC’s, too. Instead of going pixel by pixel, VP9 analyzes frames by tiles and superblocks.

Though VP9 is computationally expensive, like HEVC, it’s supported by every major web browser and open-source media player software. Aside from Google’s products (YouTube and Google TV), the codec has been adopted by Amazon, Netflix, and other platforms.

AV1

One of the latest codecs in video production, AV1, was released in 2018 as VP9’s successor. It was developed by the Alliance for Open Media, which includes Google, Amazon, Huawei, Intel, and other global tech giants. Like VP9, AV1 is an open, royalty-free codec that can deliver impressively efficient data compression along with faultless video quality.

Like VP9 and HEVC, it analyzes video data by blocks, except it has a more precise frame prediction, allowing for an even smoother viewing experience. Thanks to its exceptional data compression capabilities, it requires about 30% lower bitrate than VP9 and HEVC, making it the true holy grail for UHD streaming and broadcasting. Currently, AV1 is not as widely supported as some of the earlier codecs. Compatibility issues are a little too real with this one. Apple only started introducing AV1 support this year, and aside from DaVinci Resolve and VLC, not too many media players and video editors can handle AV1 files.

Containers and codecs for motion design: which one is best?

Still not sure which ones to pick for your motion design project? Let’s do a brief overview.

Containers

1. Best for the web – WEBM. Truly unmatched quality and file sizes.
2. Best for preserving the original video data – MOV. Bigger size, minimal data loss.
3. Best for further editing in Adobe After Effects – AEP, duh. Just when that video needs a little tweaking.
4. Best for small motion design elements – GIF. Tiny, web-friendly, and easy to add to any design.

Codecs

1. Best for the web – VP9 and HEVC. While AV1 is ‘the future,’ we are in the present where VP9 and HEVC simply have wider hardware and software support.
2. Best platform support – AVC. H.264 is hands down the safest option for wide content distribution. No need to worry about compatibility.
3. Best for motion design projects displayed on big screens – VP9 and AV1. In case you’re planning to have your video on the MSG Sphere in Nevada, you might want to pick one of these UHD beasts.