Fixing the “Use video formats for animated content” error that is shown in Google Search Console and Google Web Vitals can be done by converting the gif on your page into HTML5, MPEG4s, or WebMs using the tools below.
Delivering the content in animated form is one of the best ways to express an idea to your customers. And animated GIFs are popular for this purpose. However, using GIFs format for storing videos and bigger in size files is a bad idea and leads to slow page speed. If you check your site on Google PageSpeed Insight you would receive the warning “Replace Gifs with video formats’ ‘. Doing this will drastically improve the loading time and improve your site performance.
In this article, we will explore how you can replace the animated GIFs on your site with video formats to enhance your site speed and provide a better user experience. We will also see how replacing GIFs with video formats can boost page loading and site performance.
So let’s get started!
Why replacing GIFs to video formats is critical for boosting site speed?
Replacing GIFs with video formats is critical as using animated GIFs has many downsides. Although animated GIFs are very popular, GIFs formats were not originally made for animations. The basic purpose of GIFs is to compress multiple images in a single file that is far easier to download in a short time span. It is a limited animation platform with a palette of 256 colours. Plus, GIFs formats also do not take advantage of the newer technology. That’s the reason that a few seconds of GIF can be a significantly large size.
And even if you try to compress the file with a tool, it can not reduce it to a reasonable file size that Google will be happy with. So when we use animated content in GIFs formats, it drastically increases the size of the site and slows down the loading process. When the browser requests the server for all page resources it will require more time to download these files and ultimately reduce the page loading speed. That’s why heavy websites like Giphy and Imgur do not use GIFs for animated content. Instead, they use other video formats like HTML5, MPEG4s, or WebMs for this job. Thus, replacing GIFs with video formats can significantly reduce page loading time and provide a more pleasurable user experience.
So now let’s take a look at some techniques that enable us to convert GIFs to video formats. Below I have shared some amazing tools that do this job conveniently and embed the video in such a way that they look just like GIFs but are smaller in file size.
How to replace GIFs with video formats?
There are a number of ways to convert GIF’s to video formats and all are super easy and effortless. There are many video formats such as MPEG4s, OGG, MP4, and WebM. Among all, Mp4 is the most famous with 94% of all browsers supporting it. Next is WebM format provides high-quality videos with significantly reduced file size. However, the browser support is comparatively less than Mp4. Now let’s take a look at how to convert a GIF to these formats.
There are many online tools that can convert GIF’s to video formats. One of the best online tools that I have used so far is FFmpeg. It is an amazing free online tool that can handle, record, convert, and stream audio and video files. You can convert a GIF to any video format including MP4, WebM, and Ogg. Working with FFMeg is simple and effortless. Run the ffmpeg command on your terminal. If ffmpeg is installed on your system you will see some diagnostic information. If not, you will see an error message, showing you that you need to install it. Once installed, now you can convert the GIFs to your desired video format.
To convert GIFs to an Mp4 format run the following command on your terminal.
ffmpeg -i input.gif video.mp4
This is one of the simplest syntex to do the conversion. When you enter the command, you will see a video.mp4 file will appear in your directory. There are many other great options that FFmpeg provides to finetune the video output. So when you are converting a high-quality video you can employ an encoding mode called Constant Rate Factor (CRF).
ffmpeg -i input.gif -b:v 0 -crf 25 output.mp4
In this command, CRf uses a value between 0 – 51. The lower the value, the higher the video quality and the larger the file size.
Another amazing tool to convert the GIFs to an Mp4 format is Cloud converter. This is an amazing free online converter that can support nearly all audio and video formats. Simply convert the file on Cloud converter and embed it using the following snippet.
<video autoplay loop muted poster=”chaplin.png”>
<source type=”video/webm” src=”chaplin.webm”>
You can see we use the <video> tag to embed our elements with three particular attributes – autoplay, loop, and poster. These attributes stimulate the GIF’s behaviour. After specifying the attributes you need to specify the video format to indicate which type of video you want to embed. You can choose one of the following codes from WebM, Mp4, or Ogg. Next, you need to specify the location of your video file. Now your video will be played in a loop. You can also specify whether the video will be played muted or with sound. In the above example, your video will be played muted.
Using video or animated content is a powerful way of expressing your thoughts on media and websites. A recent survey shows that people spend approximately 1.5 hours of the day watching videos and most businesses use video content to advertise their ideas. GIFs have gained great popularity to serve visitors on websites. But using GIFs for animation can greatly increase the file size and cause more time to download the file during page loading. This results in slowing down the page speed and causes users to wait for the page to render. The best alternative is to use video formats like HTML5, MPEG4s, or WebMs on your site. Video files are smaller in size and can be downloaded much faster than GIFs, thus reducing the page loading time.
So if you really care about your site’s health and performance, replace all the GIFs with videos and enjoy a high-speed page loading experience. And don’t forget to share your feedback in the comment section below. I would love to hear from you guys.
Know your websites slow and worried about Google reducing your visibility due to video formats issues and other speed-related errors. Book in a call to talk to us today or book one of our free speed checks or paid speed audits.