How to Compress Animated GIF for Speed

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.

compressed animated gif after

src: GIPHY

Step 1

So the very first thing I do on GIPHY is right click on it and select “Save image as…”

save animated gif

Step 2

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.

upload animated gif

Step 3

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!”

optimize gif

Step 4

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)

save optimized animated gif

Step 5

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.

compressed animated gif after

src: GIPHY

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.

RankXL SEO Niche Course is back open for limited time!Learn More
92 Shares
Tweet
Share
Share
Buffer