So I wanted to share a quick tutorial with you guys on how to compress animated GIF for speed, so it doesn’t bog down your WordPress site. I am personally a big fan of GIFs and life is too short not to throw some humor into it. Below are the exact steps I take when I want to include an animated GIF on a blog post.
Animated GIFs Problem
So a typical blogger will usually go find a GIF that they want from GIPHY. Which is fine, that is also where I get most of mine. But have you ever looked at the size of animated GIFs? A typical one is over 1MB. That is ridiculous when it comes to web performance. If you have a well optimized website, your entire website shouldn’t come out to more than that. So it doesn’t make sense to destroy performance on an entire post just to use one GIF.
But there is a solution! Fortunately for bloggers there are free online GIF compressors. I am going to walk you through the one I personally like the best. Why don’t I just use a WordPress compression plugin? Well, because a lot of WordPress image compression plugins don’t support animated GIFs, and those that do rarely work because things on GIPHY are usually already compressed.
For example with Imagify, you will most likely receive this message. “WELL DONE. This image is already compressed, no further compression required.” So then you are just out of luck there.
Compress Animated GIF
Ok, so let us find a GIF first to use as an example. I browsed to the excited category on GIPHY and immediately I spotted one of the “Never Ending Story.” Perfect! If you guys grew up in the 80’s then you might get this reference lol. So let’s first look at the original size, it is 903KB, almost 1MB. That is pretty large for just an image. So follow the steps below.
So the very first thing I do on GIPHY is right click on it and select “Save image as…”
Then I head over to ezgif.com. This is a free website that will allow you to compress your animated GIFs in a matter of seconds. They allow for max file size uploads of 20MB and compress GIFs with Lossy GIF encoder which implements lossy LZW compression.
I browse to the file I just downloaded and click on upload.
I then choose a compression level. Medium usually works best for me to get the file size down enough to where I am happy without losing all my quality. You can change this depending on the size or quality of the original animated GIF. Then click on “Optimize it!”
It will show you the file size underneath the optimized GIF. As you can see, it is 290 KB now. So that is a decrease in file size by 67.88%! Awesome. I then click on the “Save” button. (Note: I normally aim for 100 KB or under for all the images you see on my websites. However, when it comes to animated GIFs, I relax my rule a bit)
Then simply upload it to your WordPress post like normal and that’s it! It is important to upload the GIFs on your own website. This way if you are using a CDN and fast web server they will load faster. However, like I did below in the caption, always make sure you link back to GIPHY to give credit where it is due.
You can now use more animated GIFs without horribly hurting your performance. If this post on how to compress animated GIF for speed was helpful, please let me know below. Thanks!
GET MORE STUFF LIKE THIS
Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.
Thank you for subscribing.
Something went wrong.