How to Use Video Formats for Animated Content (Plus Why Bother)

Why use video formats for animated content?

Before we show you how to use video formats for animated content, let’s discuss why you might want to do this. First of all, there are plenty of reasons for including animations on your site. You may want to use them to entertain, engage, or even inform users.

The Graphics Interchange Format (GIF) is a popular file type that displays animated content (usually presented on a loop). You may be familiar with the popular GIF library, GIPHY:

However, GIF files can be large, requiring lots of bandwidth in order to function. As a result, your website’s speed might suffer.

Slow-loading pages will likely create a bad user experience. What’s more, if your site performs poorly, this could impact its Core Web Vitals scores and lower its rankings in search results.

If you were already concerned about your site’s performance, you may have discovered that GIFs were to blame when using PageSpeed Insights. This popular tool provides users with advice on how to improve site speed. One common recommendation is to “use video formats for animated content.” You may also get the same advice in the Opportunities section if you’re using Google’s Lighthouse tool.

When you use video formats for animated content instead, you can spice up your site without slowing it down. That’s because videos require less bandwidth and their file sizes are smaller. Plus, you’ll be able to configure them to play on a loop just like GIFs.

In addition, videos can support unlimited color palettes, which means their quality will likely be better than GIFs. Lastly, video formats are more widely supported by web browsers. This means you don’t have to worry about compatibility issues when you use videos for your animations.

How to use video formats for animated content

Now that you know why you might want to use video formats for animated content, we’re going to walk you through the three steps to do just that!

• Step 1: Create an MP4 video
• Step 2: Generate a WebM video
• Step 3: Configure your video as a GIF

Step 1: Create an MP4 video

If you want to use videos instead of GIFs, the first step is to convert your animation file into a video file. MP4 is one of the most commonly used video file formats, so it’s a good place to start.

You can easily convert a variety of file formats using a free development tool like FFmpeg:

Keep in mind that FFmpeg enables you to convert file formats using the command line. So, if you want to use this method, it’s best if you already have some experience with this type of program.

Once you’ve installed FFmpeg on your operating system, navigate to your command line tool and run the following:

ffmpeg -i your-animation.gif your-animation.mp4

Make sure to swap in the names for your own input and output files in the place of your-animation.gif and your-animation.mp4.

This will convert your GIF to an MP4 video.

Step 2: Generate a WebM video

As mentioned earlier, video files are smaller and more efficient than popular animation file formats like GIFs. However, you can choose from multiple types of video files. MP4 is perhaps the most popular, but WebM video files are even smaller.

Not all web browsers support the WebM file format, but it’s still a good idea to generate both .mp4 and .webm files. This way, you can use either video source in the next step.

The good news is that you’re also able to generate a WebM video file using FFmpeg. Simply enter the following code in your command line tool:

ffmpeg -i your-animation.gif -c vp9 -b:v 0 -crf 41 your-animation.webm

Once again, make sure to swap in your unique file names.

Step 3: Configure your video as a GIF

After you’ve created your files, the last step is to display your video. If you’re using WordPress or any other platform that allows you to embed code, you can use a simple <video> html element. Moreover, you can easily configure your video embed to behave like a GIF by adding certain attributes.

In particular, you might want to make sure it’s set to autoplay, runs on a loop, and is silent. To mimic these characteristics, simply use the following code snippet:

<video autoplay loop muted playsinline>

<source src="your-animation.webm" type="video/webm"/>

<source src="your-animation.mp4" type="video/mp4"/>

</video>

As you can see, you’re able to use two video sources. This may seem redundant, but the browser will simply use whichever source it’s able to identify first. Meaning, if it supports WebM files, it will use that option first.

Once you embed the above code on your site, you’ll probably want to test it out to ensure that it’s working properly on the frontend. That’s it! You may also want to return to PageSpeed Insights or Lighthouse to see how much your site speed scores have improved after making this change.

A shortcut for using video formats for animated content

As we have seen, manually converting animation files to videos can be relatively simple when you’re using a tool like FFmpeg. However, if you’re not familiar with using the command line, getting started can be difficult. What’s more, if you have no other reason to use it, it might not make sense to learn this skill.

In that case, you may be looking for a shortcut for using video formats for animated content. The good news is that you can employ an image Content Delivery Network (CDN) to achieve the same results. Even better, when you’re using WordPress, you can get an image CDN with an optimization plugin.

Optimole helps you optimize everything related to images with its image CDN and other tools. Therefore, it’s an excellent solution for the job:

To get started with Optimole, install and activate the plugin in your WordPress dashboard. Then, you’ll be prompted to create an account with Optimole.

Next, you’ll receive an email confirmation that includes your login details as well as a link to activate your new account. Once you activate your account, you’ll get an API key which you can use to connect your website to your account.

Then, you’ll be able to access Optimole directly in your WordPress dashboard. Simply go to Media > Optimole > Settings:

On this screen, open your Advanced options. Under Compression, find the Enable Gif to Video conversion panel and simply toggle the button to activate this feature:

Then, click on Save changes. It’s as simple as that!

Now, Optimole will scan your site and automatically convert GIF images to video files. Even better, it uses both MP4 and WebM formats. This means your animated content will always be served up in the most optimal video format!

Conclusion on how to use video formats for animated content 🧐

When you incorporate eye-catching visual content on your website, you may be more likely to hold your users’ attention and get your message across. Adding animations to your pages is an excellent way to achieve this. However, if you use large GIFs, they may slow down your site and create a poor user experience.

Fortunately, you can use video formats for animated content. This is a more efficient way to serve up animations, as it can help keep your site running smoothly. You’re able to manually transform your GIFs into videos using the command line, but this can be tedious. As an alternative, you may want to use an optimization plugin such as Optimole. The plugin uses an image CDN and has a setting you can enable to automatically convert GIFs to videos. 😎

Do you have any questions about how to use video formats for animated content? Let us know in the comments section below!