*** From the Archives ***

This article is from September 3, 2014, and is no longer current.

Slim Down Your Animated GIFs

10

Animated GIFs are popping up everywhere as a medium for self expression and as a tool for marketing. Twitter and Reddit accept GIFs, and there’s been an explosion of creativity on Tumblr. They’re also great for illustrating steps in tutorials, as shown in this article at InDesignSecrets.com.

Load time is important to websites, so there are file size, or weight, restrictions on your GIF. Here’s a few Photoshop tricks to make sure your masterpiece is the optimal size.

About GIFs

GIF stands for Graphics Interchange Format and it is a common web standard for images. If you’re interested in the history and current state of the artform, PBS Digital Studios has a great video on Youtube: Animated GIFs: The Birth of a Medium. There is a search engine and sharing space just for GIFs: giphy.com and the GIF animations have their own category in the social media industry’s “shorty” awards.

Why is GIF Size Important?

Publications and websites have limited bandwidth. Very simply, bandwidth is rate at which information transfers from a web server to a web browser. The more pictures and animations on a web page, the larger that page will be in file size—and the slower it will transfer to a viewer’s device. Naturally, no one wants to frustrate visitors with a slow-loading page, or worse, crash their browser.

GIFs are measured in two ways:

Size or dimensions – the width and height of an image in pixels, such as 336 px x 280 px

Weight – the file size, such as 25k

You can find standard sizes and weights for banner ads at the designer’s toolbox and most publications and websites have their requirements on their rate sheets. Notice that these are some very lightweight animations. A skyscraper is recommended to weigh no more than 20KB. If you’re creating for Tumblr, you’ll want to be sure your GIF is no more than 500px wide and less than 1.75MB.

Limiting Colors in Your Design to Control Weight

The Graphics Interchange Format allows 8 bits per pixel for each image, so a single image to can have its own palette of up to 256 different colors. A smaller color palette can have a significant effect on the final file size.

Sometimes, you can make an image smaller simply by darkening it, according to Tumblr GIF artist carriefishers. A color overlay works as well, if you make one or more of your frames monochromatic, you can use a smaller color palette.

Optimizing Your GIFs Color Palette

In Photoshop’s Save for Web dialog box there are tools for getting the best outcome for the fewest colors to shave off some weight. Exporting the grid animation above, at 256 colors the file weight was 829.5k.

You can see the 256 colors Photoshop intends to put in the GIF in the color table on the right. Many of these colors look like duplicates or near duplicates, so I’m sure I can use fewer colors. I was able to cut the file weight in half by limiting the colors to 16. But the image quality suffers.

Photoshop offers three schemes for dithering, or dispersing pixels in a way that can imitate smooth areas of color in a limited-palette image. This is a bit deceiving, as the dithering happens in Photoshop and is not directly supported in GIF. It almost always results in a larger file, because it interferes with the way a GIF is compressed. It’s worth trying each dithering option and adjusting its percentage (if available) to get an effect you like, or at least one you can live with.

You can also select way Photoshop interprets and reduces the RGB colors in your image: perceptual, selective, and adaptive each use slightly different algorithms, and its worth trying them all to see which gives you the most accurate palette. For really small files, the restrictive palette limits your image to websafe colors, and while it makes a lightweight file, the colors are not usually acceptable.

The “nuclear option” is to let Photoshop decide how to make your GIF fit your target size. I’m not usually satisfied with the result, but it’s worth a try.

For the final grid animation above, I used a palette of 96 colors and no dithering.

Reducing the Number of Frames

An obvious place to reduce your animation’s file size is to show fewer frames. Tumblr artist Kidsha recommends using about 25 frames to stay within the Tumblr 1.75MB weight limit in his Youtube demo. Another trick is to remove every other frame of imported video and increase the frame’s delay slightly, often the result is still pretty smooth.

There is no file weight change when you choose more or fewer animation loops. Nor is there any change in file weight when the delay between frames is longer or shorter, since both of these choices simply represent a change in integer in the compressed file, rather than more or less data. Wikipedia has a sample of the encoding in the article Graphics Interchange Format.

The thinning GIF animation at the top of the article is 82k. To slim it down below 25k (the standard weight limit for a square web ad) I went from 7 to 4 frames, and used the adaptive algorithm and a pattern dither.

GIF Creation
Apps

In addition to using Photoshop to make GIFs, you can try dedicated apps like GIF Brewery (for Mac) and Giffing Tool (for Windows). Both apps offer handy features that can save you time and effort, especially when you have a lot of GIFs to create.

The Biggest GIF Controversy…

…is how you pronounce it. Like the peanut butter, or the items tied with ribbon on your birthday but without the final “t”? Although everyone from the President of the United States to Steve Wilhite (the creator of the format) have weighed in, the debate will probably never end.

 

  • Jim Jordan says:

    It is too bad that there’s no discussion about (ie: condemnation of) GIF video conversions, the equivalent of taking a sledgehammer to a burlap sack of precious kittens. Too many people abuse GIF. GIF is not a video format.

  • Alexey Kletsel says:

    Why we have to use websafe colors today?

  • Ken Kish says:

    On a web page does a gif file refresh the whole web page for every frame in the gif.

    I noiticed the percentage of my computers processor  goes up significanly even from a 4k gif when I have a gif running.

    If not then how does a gif refresh itself by it self?

  • Susan Neuhaus says:

    Alexey,

      Thanks for your question! We don’t have to use websafe colors anymore. We can choose websafe colors when exporting the gif, but, often it is not the best color palette for the artwork.

  • Susan Neuhaus says:

    Ken,

      The gif would not require the whole web page to refresh itself. Each frame of the gif is drawn/painted separately and preceded by its own extension, perhaps that’s whats keeping your processor busy.

    There’s more indepth information here on wikipedia: https://en.wikipedia.org/wiki/Graphics_Interchange_Format

    Have you checked the processing on other web animation files? I’d be curious to see how flash or javascript animations compare.

  • Andre Vandal says:

    You mention removing every other frame from a video, is therea way to do this with Photoshop? If not then how does one go about editing the number of frames from an imported video?

    • Susan Neuhaus says:

      Hi Andre,
      I’ve removed frames one by one from the animation panel in Photoshop.

      There’s a discussion of command line and batch processing gifs here: https://graphicdesign.stackexchange.com/questions/20908/how-to-remove-eve

      Additionally, you can find tutorials for converting video to GIFs for tumblr on youtube.

      Good luck! Post a link when you’re work is done, I’d love to see it.

      • Andre Vandal says:

        Whne I load a movie (.mp4) into photoshop I don’t seem to be able to convert it to multiple frames like you can the other way around, it just remains as a simple frame. I must be missing something along the way

  • Susan Neuhaus says:

    Andre,
    Try this Adobe tutorial on arranging and trimming video clips:
    https://helpx.adobe.com/photoshop/how-to/photoshop-arrange-trim-clips.ht
    Susan

  • >