Animated GIFs have been a fixture on blogs (and the rest of the internet) for some time. But the fact of the matter is that they were never intended to be used that way, and the original GIF89a specification states as much.
Because GIFs were not intended to act as videos, they were never optimized for it. That is why even though there are ways to optimize animated GIFs now, you still will end up with relatively large file sizes for what amounts to a few seconds of video.
That is why replacing the animated GIFs on your blogs with videos makes a lot of sense. In some cases the video files will be 95% smaller than their GIF counterparts – which is why many websites such as Imgur and Giphy serve videos disguised as GIFs instead of actual GIF files.
Converting GIFs to Video Files
To replace the animated GIFs on your blogs with videos, the first thing you need to do is convert the GIFs to video files. The only question is: What format of video should you convert it to?
Because you’re going to be displaying the GIF-turned-video on your blog, the main criteria that you consider is that the video needs to be web and browser-friendly. The most widely-supported format nowadays is MP4 with H.264 and while WebM and OGG could be used – they aren’t supported by Apple browsers.
In short the safest and easiest option is to convert GIF to MP4. That can be done with most any video converter, and for example you could use Movavi Video Converter.
Once converted, the video should be much smaller than the original GIF. Its quality should be similar, or in some cases it may even appear to be slightly better.
Publishing and Replacing GIFs on a Blog
Having converted your animated GIFs into videos, you can upload then add them to your blog. That can be done quite easily with the HTML5 <video> tag – but there are several attributes that you may want to use so that the video behaves the same way an animated GIF would.
The three main traits of animated GIFs that define them are:
Animated GIFs start to play automatically
Animated GIFs are mute (i.e. they do not contain audio)
Animated GIFs loop continuously
In HTML5 you can accompany the <video> tag with attributes that mimic these traits, namely ‘autoplay’, ‘muted’, and ‘loop’. On top of that you should use the ‘playsinline’ attribute so that it plays in the position it is inserted into the code, and not in full screen.
Keep in mind that these attributes aren’t just there to mimic the traits of animated GIFs however. If you want your video to autoplay it needs to have a ‘muted’ attribute, and on iOS devices the ‘playsinline’ attribute is compulsory for autoplay to work as well.
Overall the code that you add will look something like:
< video autoplay loop muted playsinline >
< source src=”filename.mp4” type=”video/mp4” >
Admittedly this is a bit more involved than inserting a standard animated GIF, as the code for that would look something like:
< img src=”filename.gif” alt=”” width=”400” height=”300” />
All in all you should have no problem replacing your animated GIFs with videos that look similar to them using the code above. Granted it may not be as simple as the one-liner required to insert animated GIFs, but it will get the job done.
Some blogging platforms may have easier ways to insert videos however, and you can take advantage of them so long as you’re able to set the attributes mentioned above.
Although it will take a bit of effort on your part to convert your GIFs into video files and replace the code on your blog – the benefits are worth it. Overall your blog should load faster, and considering page speed is a factor that search engines consider it could have a very positive spillover.
In the future you may want to make it a policy to publish videos instead of animated GIFs right from the get go. Granted that may require you to modify your workflow, but it is definitely preferable and most major platforms are starting to shift from GIFs to videos to optimize performance.