How To Make A Gif Smaller File Size

In this tutorial, we'll accept a close wait at all the bachelor options to convert a video to a GIF blitheness, and how to optimize its file size.

What Is a GIF File?

Earlier nosotros showtime, allow'due south 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 similar those in line art, logos, or blazon. Being an 8-chip-depth image format, it would take disappeared from the web after the introduction of the JPEG and PNG file formats. But GIF is withal a favored spider web file format thanks to its frame animation feature.

Past the fashion, if you work with blithe GIFs often, yous may want to check out an automated solution: the Gift Export Photoshop Action available on GraphicRiver.

How to Optimize an Animated GIF: 10 Ways

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

ane. How to Trim the Animation

Get-go of all, you lot'll need to open the video file with Photoshop. Well-nigh of the time, you won't need the whole sequence for the GIF animation, and so you tin trim the video past going to Window > Timeline. Plough on the Loop pick and endeavour to detect a skillful 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 can either reduce the GIF image file size by going to Image > Image Size or by hit Alt-Control-I. Your video layer will have to be turned into a Smart Object if you reduce the GIF size, just you don't have to worry nearly this—information technology won't touch our workflow at all.

How to Reduce GIF Size Tutorial Resizing the image size

three. How to Save the GIF File for the Spider web

Another option to reduce GIF size in Photoshop is the "Relieve for Web" office. Yous can find it past going to File > Export > Save for Web or by pressing Alt-Shift-Command-South.

My favorite thing about this workflow is that we don't accept to do any conversion on the Timeline panel to be able to save a frame blitheness, as the Save for Web dialog box will exercise the work for us in one case you select the GIF file format every bit your output.

Notice that the blitheness options will appear in the bottom correct corner of the dialog box. If you decide to farther reduce the GIF size in Photoshop, you can still practise it here.

How 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 tertiary frame from the Timeline panel. And so y'all should select all the remaining frames and increment their duration to recoup for the loss of frames. If yous don't do this compensation, your blitheness will be played faster than the original. Once you lot're ready, you lot can relieve 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 most relevant pick 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, information technology'due south good to stick with 64 colors or less to compress the GIF file in Photoshop. Simply depending on the original video, you lot might need to increase the number of colors to get a meliorate result.

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 color table past giving priority to colors for which the human being middle has greater sensitivity.
Selective to create a color table similar to the Perceptual color tabular array, but favoring wide 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 nigh commonly in the image. For case, an paradigm with only shades of green and blue produces a color table fabricated primarily of greens and blues. Most images concentrate colors in detail areas of the spectrum.
Restrictive uses the standard, 216‑color, spider web‑safe color tabular array common to the eight‑bit (256‑colour) panels of Windows and Mac operating systems. This option ensures that no browser dither is applied to colors when the epitome 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 algorithm

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

Since GIF files incorporate a limited number of colors, we may want to imitate the missing colors with available ones using dithering. From the Dither card, we choose ane of the algorithms for such imitation. The Improvidence method lets usa adapt the amount of dither. With thePattern and Noise algorithms, there's aught to adjust.

The more dithering in an prototype, the larger the file size. Dithering adds different-colored pixels in shut proximity to each other to simulate secondary colors or smooth gradations in color. Some images must contain dithering to look expert, but it's all-time to apply the to the lowest degree corporeality of dithering possible to keep the smallest file size.

Compress GIF Photoshop Tutorial choosing the dither function

eight. How to Utilize the Web Snap, Lossy, Transparency, and Interlaced Functions

Spider web Snap is used to help prevent dithering in a browser. It's done by snapping some of the colors to web-safety colors. The more web-rubber colors present in a GIF, the less browser dithering volition result. A value of 0% won't change any colors, while a value of 100% volition change all the colors in the prototype to web-safe.
Lossy compression discards visual information, which can compress the GIF file size.
If the epitome contains Transparency, select Transparency to preserve transparent pixels; deselect Transparency to fill up 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

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 past using the 2-Upwardly view.

Optimize GIF Photoshop Tutorial comparing the original and optimized gifs

10. How to Employ 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 in one case this is applied, Photoshop will endeavour to fit the size with the best possible prototype quality.

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

Which Way of Optimizing a GIF File Do Y'all Prefer to Use?

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

GIF Consign Photoshop Action (ATN)

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

Blithe VHS Instagram Stories Template v.ii (PSD)

If yous want to create glitched and VHS-looking animated Instagram stories or animated GIF files from your static pictures, cheque out this Photoshop template, which is extremely like shooting fish in a barrel to use and suitable for whatever photograph.

Animated VHS Instagram Stories Template v2

Blithe Zombie Crud Art Photoshop Activeness (ATN, PAT, PDF)

This awesome Photoshop action will assistance you to add together the trendy blithe zombie/grime consequence to your photos. In the main annal, you'll find i activeness file, one pattern file, and a link to a video tutorial.

Animated 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 fabled glowing look in a few elementary clicks.

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

This activity is ane of my favorites likewise. Information technology gives you the possibility to create astonishing 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 Action

Want to acquire more nigh GIF creating and editing in Photoshop? Read these crawly tutorials: