Animated GIFs, more than any other digital image format, have become ingrained in online culture. JPEGs are more or less a continuation of traditional photography, but GIFs are something new and powerful. Widespread broadband has led to video streaming in the last decade but, before that, the only way to easily share moving images was using GIFs.
GIFs have moved beyond a primitive, soundless video format. With the success of sites like Tumblr and Reddit, they’re an art form in themselves. Reaction GIFs are some of the most popular memes.
The GIF format, however, is not as good at compression as JPEG or PNG. The only reason GIFs continue to be so successful is that the format allows animation. Creating a compressed GIF with good detail, then, requires some thought. Most GIFs you see online are either ludicrously large files or horribly compressed.
Let’s look at how to compress animated GIFs without crushing them.
Why Compress Gifs?
As I touched on above, GIF files tend to run large. A GIF can be ten times the file size of an identical movie file. If you want good looking GIFs that can be shared around the web, this presents a problem.
If you’re using high-speed broadband then loading a 10 MB GIF embedded in a webpage isn’t a problem. It might take a second or two but you’ll barely notice. The issue is that plenty of people aren’t accessing the internet using a fast connection.
Millions of new people gain access to the internet every year, the vast majority of them in developing countries. They don’t always have the luxury of fast, affordable internet access. Their connections are often slow and expensive. When you are designing content for the internet, like animated GIFs, you should consider such users.
Even within developed countries, their is a huge number of people who have limited, expensive access to the internet: mobile users. Smartphones are now the dominant way that most people get online. While mobile data can be incredibly quick in some areas, it is expensive. If more than half the people who view your GIF are going to be doing it with a smartphone then it should be compressed properly.
Finally, most places where GIFs are hosted understand these two issues. This means they place file size limits on uploads or run them through their own compression algorithms. If you don’t compress your own GIF properly, it will be at the mercy of whatever lossy compression someone else has chosen. If your GIFs are properly compressed this will be far less of an issue.
How to Make Good Gifs
There is no point compressing an inefficient and poorly made GIF. Garbage in, garbage out. If you’re going to the effort of making a GIF, then you should do it well at every stage. If you're just getting started making GIFs, I suggest Jose Antunes's tutorial Cinemagraphs: How to Create Animated Photographs in Adobe Photoshop.
Martin Perhiniak has written a great tutorial on ways to optimise an animated GIF file. You should check it out before continuing. The main takeaway is that there are a number of important decisions to make around image size, GIF length, number of frames, number of colours and quality. By limiting your GIF in less important areas, you can maintain detail where you want it.
How to Compress Gifs Losslessly
While there are commercial tools available, one of the best optimisation algorithm comes from the open-source tool Gifsicle. Gifsicle’s compression algorithm compares every frame to the preceding one and calculates the difference. It then only saves the changes, rather than incorporating all the redundant details. This means that if only a small area of the image changes between each frame, you get a much smaller file size. It’s an incredibly efficient way to losslessly compress something.
Gifsicle, however, is a command line tool. If you’re familiar with the command line then you can ahead and use it as is. Just clone Gifsicle from GitHub and you’re good to go.
The command line option is too technical for most people. Fortunately, there are a couple of image optimisation apps that use Gifsicle’s algorithm.
If you’re on a Mac, ImageOptim is the best solution. As well as losslessly compressing GIFs, it can also handle JPEGs and PNGs.
For Windows users, FileOptimizer also uses Gifsicle to power its GIF compression. As well as images, FileOptimizer seems to be able to compress just about everything.
There’s also a few web applications that compress GIFs. Compressor.io’s lossless GIF compression uses Gifsicle, so that’s the one I’d recommend. A lot of the other web apps only offer lossy compression.
Putting it Into Practice
How much Gifsicle can compress your GIF depends on how well you optimise it beforehand. If you create a well designed GIF in Photoshop, Gifsicle can compress it a further two to five percent. If you start with a poorly optimised GIF, however, it can compress it a lot more.
I created the GIF above in Photoshop from a short video I shot. I deliberately made it as difficult as possible for Gifsicle; almost the entire image moves between each frame.
The original video file came in at 20 MB. When I converted it to a GIF in Photoshop, I was able to get it down to around 4 MB, although at the cost of a lot of detail. Running it through ImageOptim reduced it another 4% to 3.8 MB on the button without losing any more quality.
I also ran a random assortment of GIFs from Giphy through ImageOptim. I got a range of values from 0% to 24.9% compression. Again, this was without any loss in quality to the GIFs.
How to Optimize an Animated GIF: 10 Ways
Cinemagraphs: How to Create Animated Photographs in Adobe Photoshop
Wrapping Up
GIFs are incredibly popular online. Unfortunately, they tend to be quite large or badly compressed files. For people accessing the internet from slow or expensive connections, this is a problem.
With apps like ImageOptim, FileOptimizer and Compressor.io, you can use Gifsicle’s powerful compression algorithm to reduce your GIFs losslessly. Depending on how well you made it, you could shave off anywhere between 2 and 25% of the file size.
