I recently wrote a blog post about Figma animations that was very heavy on GIFs, checking the network tab in dev tools revealed that the total page size was 87.6mb and took around 36 seconds to load... Yikes!
Although it's possible to make GIFs smaller by compressing them and/or by decreasing the frame rate and dimensions of the GIF. All of these drastically lower the quality of the GIF which isn't something you want to compromise in tutorials.
As if that wasn't enough, most online compression tools also have strict file size limits, add water marks or don't give you any control over how much you want to compress the GIF.
Converting GIF to MP4
A better alternative if you don't specifically have to use GIF files but just want to use animated graphics is to convert them to .mp4 video files instead.
As I mentioned before, there are many free online converters but most of them have strict file size limit, add watermarks or drastically decrease quality so I don't have any recommendations there.
My favorite way of converting GIFs to mp4 video files is by uploading them to Imgur but instead of publishing them, right click to save the video file and you're done!
This will maintain the quality, frame rate and dimensions of the image while making the file around 95% (!) smaller.
I was able to cut down the total file size of all GIFs in my tutorials from 71.3mb to 3.9mb, a reduction of 67,4mb (94,6%).
Embedding MP4 Files
Depending on what CMS you are using, the support for video files may vary. If your CMS does not support video files natively you can still create a custom HTML element using the <video>
tag.
<video>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
If there is no easy way to upload video files locally within your CMS you will need to find an alternative way to upload the files on your own server or use an external service like Amazon S3 or Cloudinary.
I settled on Cloudinary's free tier which is generous enough for most small blogs and gives me an easy to copy link I can use as the video source.
Make it look like a GIF
If you add a plain <video>
tag into your article you will see that it doesn't quite look like a gif yet. It doesn't autoplay or loop and in some cases the video will also display video controls like play/pause and a video timeline.
We can customize the look of the <video>
element by adding attributes such as autoloop
and autoplay
to make it appear the same as a GIF file.
<video autoplay loop>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Images and GIF files have a native option to add alt captions to it but this option doesn't exist for <video>
elements.
What you can do instead is nest your <video>
in a <figure>
element so you have the ability to add a <figcaption>
.
<figure>
<video autoplay loop>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>This is a caption</figcaption>
</figure>
Video Files in Ghost CMS
Whereas uploading GIF and other image files is a breeze in Ghost, there is no way of uploading video files except for embedding Youtube or Vimeo files.
Instead you will need to find an alternative way to upload the files to your own server or use an external storage service like Amazon S3 or Cloudinary.
Depending on the theme you use, you might need to make some CSS customizations to change the appearance.
For the default Casper theme I found just using the same HTML structure and classes as you would for a regular image was enough to make it appear like other media files.
Source code
<figure class="kg-card kg-image-card kg-card-hascaption">
<video autoplay loop class="kg-image">
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>This is a caption</figcaption>
</figure>
End result
Although these two look identical. One file is 4.1mb while the other one is just 195kb, a 95% reduction in file size!
Unfortunately, the preview inside the editor does not display the video when you use this technique but that's a small price to pay for a drastic increase in page speed for your users.
Small Effort, Big Performance Gains
As for my 87.6mb article, I managed to decrease it down to 17.8 mb after just converting all GIFs to mp4 videos.
After also compressing all static images using TinyPNG and lazy loading them using a CloudFlare worker, the initial download size of the page is now just a mere 289kb.
Quite an improvement!