Anatomy Of the Animated GIF

Posted on by gifcruncher

GIF is the standard format used for compressing images with crisp details and large areas of solid colors like those in logos, art, or type. Being an 8 bit-depth image format it would’ve disappeared from the web after the introduction of PNG and JPEG file formats, but GIF is still one of the most favored file formats thanks to its unique frame animation feature.

Being indexed color images, GIF file contains a limited palette that is saved simultaneously with the image. The less color you use in your image, the smaller the size of the file will be. For that to happen with animated GIF’s, each frame in the file should use the same color pallete….so, if you’re varying the colors significantly from frame to frame, you’ll get a much larger file. Therefore, to limit the file size, you should try to limit colors as much as possible, and use same colors from frame to frame.

More information available here on creating an animated GIF in adobe photoshop

You can reduce the file size of GIF images by cutting down on the pixel dimensions. Cutting the number of frames in your animated GIF file will also reduce its size. GIG animations won’t work for large dimensions. Therefore, to keep the reasonable size for use on the Internet, you should limit the size of GIF animations to couple of hundred pixels.

Cool Animated GIF

Let’s have a close look at all available options for converting a video to GIF animation, and ways to optimize its file size. Let’s get started!

  • Trimming animation-You will need to open your video file with Photoshop. For GIF animation, you won’t need the whole sequence, so you can trim the video in the Timeline Panel. At this point turn on the loop option and find a good place to trim the video.
  • Reducing image size-Image size can be reduced from the Image menu. You can also do that later in “Save for Web” dialog box. It’s best if you do it in the beginning with Image Size Dialog Box as it will save considerable loading time when you open the Save for Web dialog box. You need to turn your video layer to a Smart Object if you want to resize your image, but don’t worry, this won’t affect your workflow at all.
  • Save for web-The best thing about this workflow is that you don’t have to do any conversion on the Timeline panel so as to save a frame animation, because Save for Web dialog box will do this work for you once you choose the GIF file format as your output. Keep in mind that animation options will appear on the bottom right corner of the dialog box. If you want to further reduce the size of your GIF image, you can still do that here.
  • Reducing the amount of frames-You can also further reduce the size of your GIF animation if reopen the exported file back into the Photoshop and delete each of its second or third frame from the Timeline Panel. Then select all the remaining frames and slightly increase their duration to compensate for any loss of frames. If this compensation is not done, then your animation will play faster than original. Once you’re ready, you can save this new version, which will be much smaller than the original one.
  • Number of colors-The best option here is to optimize the size of GIF file is the number of colors used in the Color Table. The maximum number is 256, which comes with the 8-bot depth limitation. Usually, it’s best to stick with 64 colors or less, but depending on your original video you might have to increase the number of colors to get much better results.
  • Choosing the best color reduction algorithm-Perceptual is best to create a custom color table by using colors for which human eye has greater sensitivity.

Adaptive is best to create a custom color table by sampling various colors from the spectrum that appear most commonly in the image. For instance, an image with the shades of blue or green produces color table made primarily of blues and greens. Most of the images concentrate colors in a specific area of the spectrum.

Selective would work best if you want to create a color table similar to Perceptual color table, but for preserving Web colors and for favoring broad areas of colors. Usually this color table produces images with the greatest color integrity.

Restrictive uses the standard 216 color with web safe color table common to the 8 bit panels of Mac OS and Windows. This option will ensure no browser dither is applied to colors when images are displayed using 8 bit color. If your image has fewer than 216 colors then all unused colors will be automatically removed from the table.

  • Dithering-Since most GIF files have limited number of colors, you may want to imitate all missing colors with available ones using the dithering. You can choose one of the algorithms from the “Dither” menu for such imitation. With “Noise” and “Pattern” algorithms there’s nothing to adjust. The “Diffusion” method will let you adjust the amount of dither. The more the dithering of GIF image, the larger the file size. Dithering will add multi-colored pixels that will be in close proximity to each other and will simulate smooth gradations of colors or secondary colors. Some images must have dithering in order to look impressive, but you should try to limit it in an image to reduce file size.
  • Web Snap, Transparency, Lossy, and Interlaced-Web Snap helps in preventing dithering in a browser. It can be done by snapping few colors to Web-safe colors. The more the Web-safe colors in your GIF, the less dithering will result. A value of 0 percent won’t change any colors while a value of 100 will change all the colors in the GIF image to Web-safe. Web Snap is mostly used to help prevent dithering in browsers.

 

If you image contains Transparency, choose Transparency for preventing transparent pixels. Deselect it to fill partially or fully transparent pixels with matter color.

Lossy compression will discard visual information that can reduce the file size.

Interlaced GIF animation files are loaded on a browser in a few passes

  • Compare the original and optimized versions-Once you’ve added custom changes, you should check the difference in quality and file size by using the 2-Up view.
  • Preview, save preset and optimize to file size-If you’re satisfied with the settings take a look at your final GIF using the Preview option in browser, and save your settings as preset. With this additional option in Optimize Menu you can specify file size and once this is applied, the Photoshop will fit the file size with the best possible image quality.

Resources:

http://www.webreference.com/dev/gifanim/index.html

http://graphicssoft.about.com/od/aboutgraphics/l/aaoptimizegifs.htm

http://graphicssoft.about.com/cs/general/ht/smallergifs.htm

http://graphicdesign.stackexchange.com/questions/5171/optimizing-gif-image-sizes

Conclusion

All in all, optimization of animated GIF’s helps you get best results without compromising on quality. Most of the GIF compression software works in a similar way, so it’s not so much a matter of finding the “best” program. A better approach would be to learn about how GIF compression works and keep that in mind throughout the image creation process.