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.
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.
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.