Whether you love it or hate it, the web is full of people posting animated GIFs. If a picture is worth a thousand words, an animated GIF of two characters from Star Wars must be worth a million!
This trend isn’t going away anytime soon. People will continue to use animated GIFs for things like progress spinners and other UI elements, but more and more of the animated GIFs people are posting are short video clips or large animated background images. While Animated GIFs can be fun and succinct way to make a point, they have many downsides from a web performance perspective. One of the biggest issues is their size. That animated GIF above is 2.9 MB in size. In this article, we will discuss a new optimization technique that can reduce the size of your animated GIFs by 40-50%!
Lossless Animated GIF Optimizations
As I’ve written about before, you can use the command line tool gifsicle to losslessly optimize animated GIFs. However, lossless optimizations have a fundamental limit on how far they can go in reducing data size. Lossless optimizations cannot modify the graphical data inside an image. That’s what makes them lossless. With animated GIFs of video clips, the vast majority of the data is graphical data, so the impact of losslessly optimizing an animated GIF is minimized. For example, if I use gifsicle to optimize the animated GIF above, it only reduces the size of the animation by 19 KB, which is less than 1%!.
Clearly lossless optimizations just are not good enough for video clip GIFs.
If lossless isn’t enough, we can try lossy optimizations, where we are actually modifying the graphical data to see some truly amazing savings. While “modifying” graphical data sounds scary and bad, if you are smart about how you do it, you can get much smaller files without noticeably degrading the quality of the image.
Why does this work? The human eye is not very good at seeing subtle changes in color. A photograph of a rose might have thousands of shades of red. But if one pixel is a shade of red, and the pixel next to it is a very slightly different shade of red, your eye cannot tell the difference. An image file can take advantage of this fact and doesn’t have to store 2 different colors for those pixels. It could use the same color for both pixels, making the file smaller, with little visual difference. This is a lossy optimization, because we have lost graphical data, but not in a significant way.
This approach works especially well with things like storing photographs or movies and video, since these contain so many subtle changes in colors and shades. You can throw a lot of this graphical data out and no one notices. Indeed this simplified explanation is how still image formats like JPEG and video formats like MPEG-4 use lossy optimizations to reduce their size.
Since Animated GIFs of video clips should have similar properties, can we use the same lossy techniques to make a GIF? Turns out, yes we can.
A Lossy GIF Encoder
GIFs compress their graphical data using the LZW algorithm. This works by keeping a dictionary of long sequences of pixels that have been seen. If a sequence repeats anywhere in the image, you don’t need to store those pixel values again. You just define that sequence of pixels and simply include a reference everywhere that sequence is used in the image. For example, consider an image containing a sequence of five pixels
Red-Red-Red-Blue-Red. Later in the image, that same pattern repeats. The GIF image can simply store the
Red-Red-Red-Blue-Red pattern once in the dictionary, and then insert a reference that says “use dictionary entry X here” every time that pixel sequence appears. This process is called encoding and normal GIF encoders will only match exact sequences of pixels. See this article for a super technical discussion.
The more often a sequence appears, the more often you can just use a reference instead of the raw pixel data, which means the GIF file gets smaller. We could make a GIF image even smaller if we are a little more liberal with how we find matching sequences. We could use an encoder that instead of using “sequences of the exact same pixels colors” will use “sequences of nearly the exact same pixels colors”.
For example, we could find a pixel sequence
Red-Red-Red-Blue-Red in an image, and later in that image you had a sequence of
Red-Red-Red-Blue-SlightlyDarkerRed. We could decide that is “close enough” to consider them the same sequence and match them to a single dictionary entry. This would alter the image slightly; when it gets displayed, both areas of the image would be drawn as
Red-Red-Red-Blue-Red. However, the image is smaller than if we only matched exact pixel sequences. Awesome, but is there existing software that has a lossy GIF encoder like this?
Lossy Optimizations for Animated GIFs
Yes! Luckily there is a modified version of gifsicle that you can download that can use a lossy encoder to find these near matches, creating a smaller file than if we used a lossless encoder that only uses perfect matches. Since an animated GIF is just a series of dozens and dozens of still image frames, and this lossy encoding can match each image even smaller, these savings add up quickly. Here is that same Star Wars clip, optimized with a lossy encoder:
This animated GIF is only 1.1 MB, which is a savings of nearly 65%. Imagine how much faster your site could be if you could avoid downloading an extra 2 MB of content! In fact, a quick scan of Animated GIF heavy sites like Buzzfeed shows a median savings of around 40-50%. Considering these GIFs are usually between 2 MB to 8 MB, that leads to truly awesome savings in size, reducing bandwidth needs, and speeding up page load times.
Using this modified version of gifsicle is easy. There is now a
lossy parameter you can use which controls how “loose” or “strict” the matching is on pixel sequences. You can see how we use it below:
>gifsicle -O3 --lossy=80 -o output.gif input.gif
I have found 80 is a good trade off between visual quality and size savings. Feel free to adjust it and see what you are comfortable with.
For our Rigor Customers, we have added a new check to Zoompf, our performance analysis product, which will detect Animated GIFs which can be lossy optimized. Zoompf will show you the optimization savings, and even provide an already optimized image for you to download to resolve the issue. If you just want a quick check, you can use our Free Performance Report.
Animated GIFs of short video clips rarely see much savings for lossless optimizations, simply because of the shear size of the graphic data. However, by using the tricks of lossy video formats, we can use a lossy encoder and see significant savings of 40-50% with little loss of visual quality. If your site has animated GIFs you should be using this modified version of gifsicle to optimize your site.
If you are interested in improving your website’s performance with optimizations like Lossy Animated GIFs, then you’ll love Zoompf, Rigor’s performance analysis product. Zoompf can test your entire website and identify over 420 performance issues that are slowing it down. Our continuous monitoring allows you to ensure that nothing changes that hurts your website performance. To learn more about a free trial of Zoompf and other Rigor performance products, contact us today.
E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online. However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...Read More
Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...Read More
Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...Read More
Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...Read More