How to Optimize an Animated GIF: 10 Ways

In this tutorial, we’ll have a close look at all the available options to convert a video to a GIF animation, and how to optimize its file size.
What Is a GIF File?
Before we start, let’s take a closer look at the question, “What is a GIF file?” GIF i…


This content originally appeared on Envato Tuts+ Tutorials and was authored by Martin Perhiniak

In this tutorial, we'll have a close look at all the available options to convert a video to a GIF animation, and how to optimize its file size.

What Is a GIF File?

Before we start, let's take a closer look at the question, "What is a 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. 

By the way, if you work with animated GIFs often, you may want to check out an automated solution: the Gift Export Photoshop Action available on GraphicRiver.

Gift Export Photoshop ActionGift Export Photoshop ActionGift Export Photoshop Action

How to Optimize an Animated GIF: 10 Ways


If you want to learn these techniques via video, check out our lesson on the Envato Tuts+ YouTube channel:

1. How to Trim the Animation

First of all, you'll 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 by going to Window > Timeline. Turn on the Loop option and try to find a good place to trim your video.

Reduce GIF Size Photoshop Tutorial Trimming the video in adobe photoshopReduce GIF Size Photoshop Tutorial Trimming the video in adobe photoshopReduce GIF Size Photoshop Tutorial Trimming the video in adobe photoshop

2. How to Reduce the GIF Image File Size

You can either reduce the GIF image file size by going to Image > Image Size or by hitting Alt-Control-I. Your video layer will have to be turned into a Smart Object if you reduce the GIF size, but you don't have to worry about this—it won't affect our workflow at all.

How to Reduce GIF Size Tutorial Resizing the image sizeHow to Reduce GIF Size Tutorial Resizing the image sizeHow to Reduce GIF Size Tutorial Resizing the image size

3. How to Save the GIF File for the Web

Another option to reduce GIF size in Photoshop is the "Save for Web" function. You can find it by going to File > Export > Save for Web or by pressing Alt-Shift-Control-S.

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 in the bottom right corner of the dialog box. If you decide to further reduce the GIF size in Photoshop, you can still do it here.

How to Reduce GIF Size Tutorial saving the gif file for WebHow to Reduce GIF Size Tutorial saving the gif file for WebHow to Reduce GIF Size Tutorial saving the gif file for Web

4. How to Reduce the Number of Frames

You can also reduce the GIF size 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 the remaining frames and increase their duration 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're ready, you can save the new optimized GIF, which should be much smaller than the original.

How to Compress GIF Tutorial Reducing the number of frames in GIFHow to Compress GIF Tutorial Reducing the number of frames in GIFHow to Compress GIF Tutorial Reducing the number of frames in GIF

5. How to Change the Number of Colors That Are Animated 

The most relevant option for optimizing GIF size 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's good to stick with 64 colors or less to compress the GIF file in Photoshop. But depending on the original video, you might need to increase the number of colors to get a better result.

How to Compress GIF Tutorial change the number of the colors of the GIFHow to Compress GIF Tutorial change the number of the colors of the GIFHow to Compress GIF Tutorial change the number of the colors of the GIF

6. How to Choose the Color Reduction Algorithm

Here are the options for choosing color reduction:

  • 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 operating systems. 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.
How to Compress GIF Tutorial choosing the color reduction algorithmHow to Compress GIF Tutorial choosing the color reduction algorithmHow to Compress GIF Tutorial choosing the color reduction algorithm

7. How to Use Dithering to Reduce the GIF File Size in Photoshop

Since GIF files contain a limited number of colors, we may want to imitate the missing colors with available ones using 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 the Pattern and Noise algorithms, there's 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.

Compress GIF Photoshop Tutorial choosing the dither functionCompress GIF Photoshop Tutorial choosing the dither functionCompress GIF Photoshop Tutorial choosing the dither function

8. How to Use the Web Snap, Lossy, Transparency, and Interlaced Functions 

  • Web Snap is used to help prevent dithering in a browser. It's done by snapping some of the colors to web-safe colors. The more web-safe colors present in a GIF, the less browser dithering will result. A value of 0% won't change any colors, while a value of 100% will change all the colors in the image to web-safe.
  • Lossy compression discards visual information, which can compress the GIF 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 progressive JPEGs).
Compress GIF Photoshop Tutorial using web snap lossy transparency and interlaced functions Compress GIF Photoshop Tutorial using web snap lossy transparency and interlaced functions Compress GIF Photoshop Tutorial using web snap lossy transparency and interlaced functions

9. How to Compare the Original and Optimized Version of the GIF File

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

Optimize GIF Photoshop Tutorial comparing the original and optimized gifsOptimize GIF Photoshop Tutorial comparing the original and optimized gifsOptimize GIF Photoshop Tutorial comparing the original and optimized gifs

10. How to Use Preview, Save Preset, and Optimize to File Size

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

Reduce GIF File Size Tutorial saving the preset using preview and optimizing to file sizeReduce GIF File Size Tutorial saving the preset using preview and optimizing to file sizeReduce GIF File Size Tutorial saving the preset using preview and optimizing to file size

Which Way of Optimizing a GIF File Do You Prefer to Use?

Now you know ten simple ways to optimize your GIF files. I hope this article was helpful to you. If you're looking for GIF-related Photoshop products, then check out these awesome actions and templates:

GIF Export Photoshop Action (ATN)

GIF Export Photoshop Action lets you take multiple images, automatically upload them in Photoshop, and export them as a GIF.

Gif Export Photoshop ActionGif Export Photoshop ActionGif Export Photoshop Action

Animated VHS Instagram Stories Template v.2 (PSD)

If you want to create glitched and VHS-looking animated Instagram stories or animated GIF files from your static pictures, check out this Photoshop template, which is extremely easy to use and suitable for any photo.

Animated VHS Instagram Stories Template v2Animated VHS Instagram Stories Template v2Animated VHS Instagram Stories Template v2

Animated Zombie Grime Art Photoshop Action (ATN, PAT, PDF)

This awesome Photoshop action will help you to add the trendy animated zombie/grime effect to your photos. In the main archive, you'll find one action file, one pattern file, and a link to a video tutorial.

Animated Zombie Grime Art Photoshop ActionAnimated Zombie Grime Art Photoshop ActionAnimated Zombie Grime Art Photoshop Action

GIF Animated Sparkles Photoshop Action (ATN, ABR, PAT, PNG, PSD)

If you're looking for something more bright and magic-looking, GIF Animated Sparkles Photoshop Action is the best choice for you. It gives your photos that fabulous glowing look in a few simple clicks.

Gif Animated Sparkles Photoshop ActionGif Animated Sparkles Photoshop ActionGif Animated Sparkles Photoshop Action

Animated 80's Synthwave Poster: Photoshop Action (ATN, ABR, PAT)

This action is one of my favorites as well. It gives you the possibility to create amazing animated posters in Adobe Photoshop, in synthwave/retrowave styles. It's a handy tool for recreating the atmosphere of the 80s.

Animated 80s Synthwave Poster - Photoshop ActionAnimated 80s Synthwave Poster - Photoshop ActionAnimated 80s Synthwave Poster - Photoshop Action

Want to learn more about GIF creating and editing in Photoshop? Read these awesome tutorials:


This content originally appeared on Envato Tuts+ Tutorials and was authored by Martin Perhiniak


Print Share Comment Cite Upload Translate Updates
APA

Martin Perhiniak | Sciencx (2014-01-20T03:02:37+00:00) How to Optimize an Animated GIF: 10 Ways. Retrieved from https://www.scien.cx/2014/01/20/how-to-optimize-an-animated-gif-10-ways/

MLA
" » How to Optimize an Animated GIF: 10 Ways." Martin Perhiniak | Sciencx - Monday January 20, 2014, https://www.scien.cx/2014/01/20/how-to-optimize-an-animated-gif-10-ways/
HARVARD
Martin Perhiniak | Sciencx Monday January 20, 2014 » How to Optimize an Animated GIF: 10 Ways., viewed ,<https://www.scien.cx/2014/01/20/how-to-optimize-an-animated-gif-10-ways/>
VANCOUVER
Martin Perhiniak | Sciencx - » How to Optimize an Animated GIF: 10 Ways. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2014/01/20/how-to-optimize-an-animated-gif-10-ways/
CHICAGO
" » How to Optimize an Animated GIF: 10 Ways." Martin Perhiniak | Sciencx - Accessed . https://www.scien.cx/2014/01/20/how-to-optimize-an-animated-gif-10-ways/
IEEE
" » How to Optimize an Animated GIF: 10 Ways." Martin Perhiniak | Sciencx [Online]. Available: https://www.scien.cx/2014/01/20/how-to-optimize-an-animated-gif-10-ways/. [Accessed: ]
rf:citation
» How to Optimize an Animated GIF: 10 Ways | Martin Perhiniak | Sciencx | https://www.scien.cx/2014/01/20/how-to-optimize-an-animated-gif-10-ways/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.