Optimizing load time has become a priority for many businesses on the web. If GIFs are more and more popular, their integration into web pages can have a very negative impact on their loading time. Here is a method that allows you to convert GIFs to embedded mp4 videos in HTML5 in order to best optimize your final load time without having to give up the marketing appeal of the GIF effect.
As you probably know, the weight of your web page and the files that are integrated into it play an important role in the final loading time of the latter and in its positioning in search engines (especially since the Google Speed Update).
If the gifs can bring an undeniable advantage to your content, they tend to be in most cases very large and therefore significantly impact the loading time of your page.
But as always, there are alternatives and tips to limit the impact of GIFs on loading time while having an almost identical rendering.
In our case, converting gifs to MP4 videos and then integrating them into HTML5 is the most interesting solution to optimize the loading performance of web pages. Here’s how to do it.
1- Why compress GIFs then embed them in HTML5 video?
Before showing you how to compress GIFs and embed them into MP4 videos, here are a few things that should help convince you of the value of this approach.
Are you used to fetching your gifs on giphy? Did you know that on their site, Giphy did not actually integrate gifs directly on its web pages but indeed .mp4 videos with an optimized weight that run in a loop in order to optimize their loading time?
If the star gifs site does it, it’s for good reason. MP4 videos are on average 90% smaller in weight than the gifs themselves.
In this example, the .gif file has an original size of 7.74 MB against 1.3 MB in .mp4 format, or -83%.
Why the .mp4 video format and not another?
The second question you might be asked is why the .mp4 format and not another?
There are 3 compressed video formats compatible with HTML5 integration:
Of these three compressed video formats, MP4 is the most widely compatible format with browsers since 95% of these fully support it (against 76% for WebM and 41% for the OGG format).
2- How to convert or compress large gif to lighter mp4 video?
The first step will therefore consist of convert your GIF to compressed MP4 video.
The easiest way, if you only have a few GIFs to convert, is to go through a dedicated website that will do the conversion for you.
We use this one on our side (but there are many others): https://ezgif.com/gif-to-mp4
- The first step is to upload your Gif to the online conversion platform (via your computer or its URL if it is hosted online (ex: giphy URL ending in .gif))
- Then click on ” Upload”
- At this step, you will be able to view the weight before conversion of the Gif you want to convert
- All you have to do is click on ” Convert GIF to MP4 »To start the conversion
- Once the file has been converted, you will be able to view its final weight after conversion and save it to your computer by clicking on the “diskette” icon ” Save“.
In our example, we reduced the weight of the GIF by 94% by changing it to .mp4 format (7.74MB to 443.3KB).
Alternative: if you are comfortable with command lines, you can also use this solution to convert your GIFs: https://www.ffmpeg.org/
- To install it on MacOS, use Homebrew.
- To install it on Windows, use Chocolatey.
Once installed, you will need to carry out a command line similar to this one to convert your GIF to MP4 (by modifying the directory according to where your gif is located and the name of the source file so that it corresponds to the one to convert ):
ffmpeg -i input.gif output.mp4
3- How to embed MP4 video in HTML5 to simulate GIF?
Usually when a GIF is embedded on a site, the source HTML code contains the tag since a GIF is nothing more than a specific image format.
In our case, the trick will be to integrate the GIF converted to MP4 in a HTML5 tag with attributes that will help the video to simulate the GIF effect:
- its mute,
- loop playback.
Once your GIF has been converted into an MP4 video and uploaded to your site (via FTP or via the administration interface of your CMS), all you have to do is integrate it into HTML5 using code similar to this one. this :
<video alt="texte alternatif pour le GIF transforme en video" src="https://www.votredomaine.com/media/nom-de-votre-video.mp4" autoplay loop muted playsinline style="display:block;"></video>
If we analyze this HTML5 code:
- the “alt” attribute corresponds to the alternative text of the video (same principle as for an image
- the “src” attribute must contain the URL of your site where your MP4 video is hosted
- the “autoplay” attribute will play the video automatically
- the “loop” attribute will force the loop to replay the video
- the “muted” attribute will ensure that the video is played without sound
- the “playsinline” attribute will make the autoplay work correctly on iOS devices
Here is the result of our GIF compressed to 94% and embedded in HTML5 MP4 video:
In some cases, especially when the gif is too short, this trick will not work ideally. It will therefore be preferable to integrate the gif as it is in its most compressed version possible in order to limit its impact on the loading time as much as possible. If you have implemented lazy loading of images and gifs on your site, the impact will be more limited.
Do you want to receive our best articles?
By subscribing to the LEPTIDIGITAL newsletter, you confirm that you have read our confidentiality and data processing policy (your email will never be shared and will remain anonymous 😉).