Tools & Tips

10 Ways to Optimize an Animated GIF File


GIF is the standard format for compressing images with large areas of solid colors and crisp details like those in line art, logos, or type. Being an 8 bit-depth image format it would have disappeared from the web after the introduction of the JPEG and PNG file formats, but GIF is still a favored web file format thanks to its frame animation feature. In this tutorial, we will have a close look at all the available options to convert a video to a GIF animation, and how to optimize its file size. Let's get started!

1. Trimming Animation

First of all you will need to open the video file with Photoshop. Most of the time you won't need the whole sequence for the GIF animation, so you can trim the video in the Timeline Panel. Turn on the Loop option and try to find a good place to trim your video.

10 Ways to Optimize a GIF File

2. Reducing Image Size

You can either reduce the image size from the Image menu or do it later in the Save for Web dialog box. I prefer to do it in the beginning with the Image Size Dialog Box as it can save a considerable amount of loading time when you open up the Save for Web dialog box. Your video layer will have to be turned into a Smart Object if you resize the image, but you don't have to worry about this, it won't effect our workflow at all.

10 Ways to Optimize a GIF File

3. Save for Web

My favorite thing about this workflow is that we don't have to do any conversion on the Timeline panel to be able to save a frame animation, as the Save for Web dialog box will do the work for us once you select the GIF file format as your output. Notice that the Animation options will appear on the bottom right corner of the dialog box. In case you decide to further reduce the size of your image you can still do it here.

10 Ways to Optimize a GIF File

4. Reduce the Amount of Frames

You can further reduce the size of the GIF animation if you reopen the exported GIF back into Photoshop and delete every second or third frame from the Timeline Panel. Then you should select all remaining frames and increase the duration of them to compensate for the loss of frames. If you don't do this compensation your animation will be played faster than the original. Once you are ready you can save the new version, which should be much smaller than the original.

10 Ways to Optimize a GIF File

5. Number of Colors

The most relevant option to optimize the size of a GIF file is the number of colors used in the Color Table. The maximum amount of colors is 256, which comes from the 8 bit-depth limitation. Generally speaking it is good to stick with 64 colors or less, but depending on the original video you might need to increase the number of colors to get a better result.

10 Ways to Optimize a GIF File

6. Which Color Reduction Algorithm to Choose?

  • Perceptual to create a custom color table by giving priority to colors for which the human eye has greater sensitivity.
  • Selective to create a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of Web colors. This color table usually produces images with the greatest color integrity. (Selective is the default choice.)
  • Adaptive to create a custom color table by sampling colors from the spectrum appearing most commonly in the image. For example, an image with only shades of green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  • Restrictive uses the standard, 216‑color, web‑safe color table common to the 8‑bit (256‑color) panels of Windows and Mac OS. This option ensures that no browser dither is applied to colors when the image is displayed using 8‑bit color. If your image has fewer than 216 colors, unused colors are removed from the table.
10 Ways to Optimize a GIF File

7. Dithering

Since GIF files contain a limited number of colors, we may want to imitate the missing colors with available ones using the dithering. From the "Dither" menu, we choose one of the algorithms for such imitation. The "Diffusion" method lets us adjust the amount of dither. With "Pattern" and "Noise" algorithms there is nothing to adjust. The more dithering in an image, the larger the file size. Dithering adds different-colored pixels in close proximity to each other to simulate secondary colors or smooth gradations in color. Some images must contain dithering to look good, but it's best to use the least amount of dithering possible to keep the smallest file size.

10 Ways to Optimize a GIF File

8. Web Snap, Lossy, Transparency and Interlaced

  • Web Snap is used to help prevent dithering in a browser. It is done by snapping some of the colours to Web-safe colours. The more Web-safe colours present in a GIF, the less browser dithering will result. A value of 0% won't change any colours while a value of 100% will change all the colours in the image to Web-safe.
  • Lossy compression discards visual information, which can reduce the file size.
  • If the image contains Transparency, select Transparency to preserve transparent pixels; deselect Transparency to fill fully and partially transparent pixels with the matte color.
  • Interlaced GIF files are loaded in a browser in a few passes (like the progressive JPEG's).

9. Compare Original and Optimized Versions

Once you added a lot of custom changes you can check the difference in file size and quality by using the 2-Up view.

10 Ways to Optimize a GIF File

10. Preview, Save Preset and Optimize to File Size

If you are happy with your settings take a look at your final GIF with the Preview option in a browser and don't forget to save your settings as preset. You can also specify a file size limit with this additional option from Optimize Menu and once this is applied Photoshop will try to fit the size with the best possible image quality.

10 Ways to Optimize a GIF File
Related Posts
  • Computer Skills
    App Training
    Writing Destinations for DropzoneDropzone400
    Dropzone is not just another FTP upload client, but a great utilities platform for processing files and text. Dropzone is a collection of destinations that can have two types of actions: drag and drop action and/or a click action. There are a lot of pre-programmed destinations to use, but you can also write your own destinations in Ruby!Read More…
  • Design & Illustration
    Video Effects
    Create Animated Falling Snow in PhotoshopPreview400x400
    Digitally created snow can often be quite difficult to generate in Photoshop, in a realistic-looking way. We recently published a tutorial showing how to add snow to a still image, so in this tutorial, we decided that it would be fun to show how to create a realistic-looking animated snowfall effect in Photoshop, and then turn it into an animated GIF file. Let's get started!Read More…
  • Design & Illustration
    Design Challenge #9: Create a Winter-Themed Animated GIFDesign challenge 400
    2013 saw the beginning of the Psdtuts+ Design Challenges where artists around the world submitted incredible creations based on our monthly themes. This year, we want to kick off 2014 with a fun animation challenge inspired by winter. Submit your final creations to our community on Google+ and check out the works of other talented artists. Read More…
  • Design & Illustration
    How to Create a Holiday-Inspired Animated GIF Using Stop Motion Photography0936 gift 0936 gift preview400
    Introduced in 1987 by CompuServe, the animated GIF is as popular today as it has ever been. The GIF animation has gone through many phases over the years. It's been loved, hated, and then loved again. Today, I think the GIF animation has found its place as a useful way to distribute short and fun animations online. Recently, I was inspired by a GIF that I saw on Twitter and thought the concept would make a fun tutorial. Read More…
  • Photography
    How to Shoot Images for a Stop Motion Animated GIFBatchsequence preview retina
    GIFs have a bit of a low brow reputation from being deployed on silly websites in the 90s, but they can be used for more sophisticated purposes. Our GIF will show the unwrapping of a gift, and could be used in an online ad. After I show you how to set up the shoot and capture the necessary images, one of our resident Photoshop experts will teach you the process of animating the image sequence into a GIF.Read More…
  • Design & Illustration
    Understanding the Different File Types in Adobe Illustrator's Save for WebSfwretina
    The purpose of the Save for Web feature in Adobe Illustrator is to optimize graphics for use on a Web site or other screen display, such as a phone of tablet. The word "optimize" refers to the optimum balance between file size and quality. We want small file sizes so they'll load quickly on a Web page, but we don't want to sacrifice their appearance. Save for Web lets you preview how an optimized  vector graphic will look, so you can choose the best compromise. In this article, I'll go over the file formats available in Save for Web, and show you which formats are best suited for different kinds of artwork.Read More…