How To Lower The Size Of A Gif

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'southward 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 well-baked details like those in line art, logos, or type. Being an viii-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 spider web file format thank you to its frame blitheness feature.

Past the way, if you lot work with animated GIFs often, y'all may desire to cheque out an automated solution: the Gift Export Photoshop Action available on GraphicRiver.

How to Optimize an Animated GIF: x Ways

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

1. How to Trim the Blitheness

First of all, you'll demand to open the video file with Photoshop. Most of the time, you won't need the whole sequence for the GIF blitheness, then yous can trim the video by going to Window > Timeline. Turn on the Loop option and try to find a practiced place to trim your video.

Reduce GIF Size Photoshop Tutorial Trimming the video in adobe photoshop

2. How to Reduce the GIF Image File Size

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

How to Reduce GIF Size Tutorial Resizing the image size

three. How to Save the GIF File for the Web

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

My favorite thing well-nigh this workflow is that we don't have to practice whatever conversion on the Timeline panel to exist able to save a frame animation, as the Salvage for Web dialog box will do the work for us once you lot select the GIF file format as your output.

Notice that the animation options will appear in the lesser right corner of the dialog box. If y'all decide to further reduce the GIF size in Photoshop, you can yet do information technology here.

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

four. How to Reduce the Number of Frames

You can also reduce the GIF size if you reopen the exported GIF dorsum into Photoshop and delete every 2d or third frame from the Timeline console. And then yous should select all the remaining frames and increase their duration to compensate for the loss of frames. If yous don't do this compensation, your blitheness will be played faster than the original. In one case you're ready, yous can salvage the new optimized GIF, which should be much smaller than the original.

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

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

The nearly relevant option for optimizing GIF size is the number of colors used in the Color Table. The maximum corporeality of colors is 256, which comes from the 8-flake-depth limitation. Generally speaking, it's adept to stick with 64 colors or less to compress the GIF file in Photoshop. Merely depending on the original video, you might need to increase the number of colors to get a meliorate consequence.

How 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 colour tabular array by giving priority to colors for which the human being eye has greater sensitivity.
Selective to create a color table similar to the Perceptual colour 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 selection.)
Adaptive to create a custom colour table by sampling colors from the spectrum actualization about commonly in the prototype. For example, an prototype with merely shades of green and blueish produces a color table made primarily of greens and blues. About images concentrate colors in item areas of the spectrum.
Restrictive uses the standard, 216‑color, spider web‑rubber colour table common to the viii‑bit (256‑color) panels of Windows and Mac operating systems. This option ensures that no browser dither is practical to colors when the image is displayed using 8‑bit color. If your paradigm has fewer than 216 colors, unused colors are removed from the table.

How 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 express number of colors, we may want to imitate the missing colors with available ones using dithering. From the Dither menu, we choose 1 of the algorithms for such imitation. The Diffusion method lets us adapt the corporeality of dither. With theBlueprint and Noise algorithms, there's null to conform.

The more than dithering in an epitome, the larger the file size. Dithering adds different-colored pixels in shut proximity to each other to simulate secondary colors or polish gradations in color. Some images must contain dithering to wait skillful, but information technology'south best to use the to the lowest degree amount of dithering possible to keep the smallest file size.

Compress 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'southward done past 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 whatsoever colors, while a value of 100% will change all the colors in the paradigm 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 colour.
Interlaced GIF files are loaded in a browser in a few passes (similar progressive JPEGs).

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 lot've made a lot of custom changes, yous can cheque the departure in file size and quality by using the 2-Up view.

Optimize GIF Photoshop Tutorial comparing the original and optimized gifs

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

If yous're happy with your settings, accept a look at your final optimized GIF with the Preview choice in a browser, and don't forget to salvage your settings every bit presets. You tin likewise specify a file size limit with this boosted option from the Optimize menu, and one time this is applied, Photoshop will attempt to fit the size with the best possible image quality.

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

Which Way of Optimizing a GIF File Practise Yous Adopt to Use?

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

GIF Export Photoshop Action (ATN)

GIF Consign Photoshop Activeness lets you lot take multiple images, automatically upload them in Photoshop, and consign them as a GIF.

Animated VHS Instagram Stories Template 5.2 (PSD)

If y'all 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 photograph.

Animated VHS Instagram Stories Template v2

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

This awesome Photoshop action will help you lot to add the trendy animated zombie/crud event to your photos. In the chief archive, you'll observe ane action file, one pattern file, and a link to a video tutorial.

GIF Blithe Sparkles Photoshop Activeness (ATN, ABR, PAT, PNG, PSD)

If you're looking for something more bright and magic-looking, GIF Animated Sparkles Photoshop Action is the best option for you. Information technology gives your photos that fabled glowing wait in a few unproblematic clicks.

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

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

Animated 80s Synthwave Poster - Photoshop Action

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