Explaining How and Why You Should Optimise Animated GIFs on Websites So You Can Keep Potential Customers Engaged
Did you know, even though GIFs are a super popular file format for animations, they weren’t actually created for this purpose?
Instead, GIFs were originally designed to hold more than one static image.
This meant, in the days before WiFi, it made transferring files super FAST.
Today, they’re used all over the internet…
- In our group chats
- Across our social media
- Even on our websites
That’s why it’s important if you end up using them on your website, you know how to optimise your GIFs so they don’t create too much lag.
In this blog, I’m going to show you why and how you should optimise animated GIFs on websites. Offering you some options you can use to eliminate the page bloat. Meaning you can keep a reactive and snappy website that will keep visitors engaged.
Why Should You Optimise Your GIFs?
First things first…
Performance matters when designing your website.
Sure, GIFs are an effective tool to capture your user’s attention. But because GIFs weren’t originally designed for animation, they’re not such an effective tool for keeping your website speed up to scratch.
That means, if your website is too GIF-heavy, it’s going to lead to poor user experience from sluggish load speeds.
Causing your potential customers to bounce and head elsewhere.
How To Stop GIFs Slowing Down Your Website:
1. Lessen Your Use of Animated GIFs
Lessening the use animated GIFs is the number one piece of advice I can give you that’s going to make a significant impact on your page load speeds.
Only use GIFs when absolutely necessary.
I get it.
You’re probably thinking… “How do I choose ONE, when there are SO many good ones?!”
It’s going to be a hard decision to make.
But once you cut them down, your website speed and your potential customers are going to love you and your responsive user experience.
2. Change Static GIFs to PNG Files
There are two kinds of GIFs:
- Static (unmoving images and simple graphics)
- Animated (moving images created through time delays)
Both take up a large amount of space compared to other file formats.
But did you know PNGs can be compressed 5-25% smaller than GIFs?
That means, if you have a static GIF on your website, converting it to a PNG file (another type of image file) instead can relieve your website of some of its bloat.
Plus, changing it over is super simple and free!
Just use a website like this one to upload your image. Press the conversion button and let the website do the rest.
3. Compress Animated GIFs Using Lossy Optimisation
Lossy optimisation… What the HECK is that?!
In short, lossy optimisation reduces file size by permanently removing data from the original file.
This method is known as irreversible compression.
But the data loss isn’t usually noticeable.
Lucky for us, animated GIFs use lossy optimisation.
And since the human eye won’t usually see the difference. Fewer colours are used and that means the overall size of the GIF becomes much smaller.
Check out this blog to find out more and learn how to compress your GIFs.
4. Consider HTML5 Video Instead
Because GIFs were never meant to store video, too many of them will slow down your website.
But there is an alternative we can use…
HTML5 video!
By converting your GIFs to HTML5 before you upload them to your website, your animation can be up to 95% smaller. Using a fraction of the space your original GIF would use.
Use a converter website like this one and let it do the hard work for you.
So tell me, has this blog cleared up your questions about using animated GIFs on websites?
Let me know!
And if you’ve been thinking about setting up a website of your own or need some professional advice click HERE and get in touch with me.
I’m always happy to answer any questions about the process and provide advice tailored to your individual business needs.