What's The Size Of A Animated Gif Image

In this tutorial, nosotros'll have a shut 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 nosotros beginning, permit'due south take a closer look at the question, "What is a GIF file?" GIF is the standard format for compressing images with big areas of solid colors and crisp details like those in line art, logos, or type. Being an 8-fleck-depth image format, information technology would have disappeared from the web afterward the introduction of the JPEG and PNG file formats. But GIF is even so a favored spider web file format thanks to its frame animation feature.

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

How to Optimize an Animated GIF: x Means

If y'all want to learn these techniques via video, check out our lesson on the Envato Tuts+ YouTube aqueduct:

ane. 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 demand the whole sequence for the GIF animation, so you can trim the video by going to Window > Timeline. Turn on the Loop selection and attempt to notice a good 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 paradigm file size by going to Image > Image Size or past hitting Alt-Command-I. Your video layer will take to be turned into a Smart Object if you reduce the GIF size, but you lot don't take to worry near 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

Some other selection to reduce GIF size in Photoshop is the "Save for Spider web" role. You tin can discover it by going to File > Export > Save for Web or by pressing Alt-Shift-Command-Southward.

My favorite thing about this workflow is that we don't have to do any conversion on the Timeline panel to be able to relieve a frame animation, equally the Relieve for Web dialog box volition practise the piece of work for us once you select the GIF file format as your output.

Notice that the blitheness options will appear in the bottom correct corner of the dialog box. If you determine to farther reduce the GIF size in Photoshop, yous tin can withal do it hither.

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

4. How to Reduce the Number of Frames

Y'all tin likewise reduce the GIF size if yous reopen the exported GIF back into Photoshop and delete every second or tertiary frame from the Timeline console. Then you should select all the remaining frames and increment their elapsing to recoup for the loss of frames. If you don't exercise this compensation, your animation volition be played faster than the original. In one case yous're ready, you tin save the new optimized GIF, which should be much smaller than the original.

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

five. How to Modify the Number of Colors That Are Animated

The most relevant option for optimizing GIF size is the number of colors used in the Colour Table. The maximum amount of colors is 256, which comes from the eight-chip-depth limitation. By and large speaking, it'south good to stick with 64 colors or less to compress the GIF file in Photoshop. But depending on the original video, y'all might need to increase the number of colors to go a improve issue.

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 eye has greater sensitivity.
Selective to create a color table similar to the Perceptual color table, only favoring wide areas of color and the preservation of web colors. This colour tabular array commonly produces images with the greatest color integrity. (Selective is the default pick.)
Adaptive to create a custom colour table by sampling colors from the spectrum appearing nearly ordinarily in the epitome. For example, an image with only shades of green and blue produces a color tabular array made primarily of greens and blues. Most images concentrate colors in item areas of the spectrum.
Restrictive uses the standard, 216‑colour, spider web‑safe color tabular array mutual to the eight‑fleck (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‑chip 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 Use Dithering to Reduce the GIF File Size in Photoshop

Since GIF files incorporate a limited number of colors, nosotros may want to imitate the missing colors with available ones using dithering. From the Dither menu, we cull one of the algorithms for such faux. The Improvidence method lets united states adjust the amount of dither. With theDesign and Noise algorithms, there's nothing to suit.

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 shine gradations in colour. Some images must contain dithering to look proficient, but it's all-time to use the least amount of dithering possible to keep the smallest file size.

Compress GIF Photoshop Tutorial choosing the dither function

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

Web Snap is used to help prevent dithering in a browser. It'southward washed by snapping some of the colors to web-safe colors. The more web-rubber colors present in a GIF, the less browser dithering will consequence. A value of 0% won't modify whatsoever colors, while a value of 100% will modify all the colors in the image to spider web-rubber.
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 up fully and partially transparent pixels with the matte colour.
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

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

Once you lot've made a lot of custom changes, you tin can cheque the deviation in file size and quality past using the ii-Up view.

Optimize GIF Photoshop Tutorial comparing the original and optimized gifs

10. How to Utilise Preview, Salve Preset, and Optimize to File Size

If you're happy with your settings, have a look at your final optimized GIF with the Preview choice in a browser, and don't forget to save your settings as presets. You can as well specify a file size limit with this additional pick from the Optimize bill of fare, and once this is applied, Photoshop will try to fit the size with the all-time possible prototype quality.

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

Which Mode of Optimizing a GIF File Do You Prefer to Employ?

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

GIF Export Photoshop Action (ATN)

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

Blithe VHS Instagram Stories Template v.ii (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 whatever photo.

Animated VHS Instagram Stories Template v2

Blithe Zombie Grime Art Photoshop Activity (ATN, PAT, PDF)

This awesome Photoshop action will assistance yous to add the trendy blithe zombie/grime effect to your photos. In the principal archive, you'll find one action file, one blueprint 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 yous. It gives your photos that fabulous glowing look in a few simple clicks.

Animated fourscore's Synthwave Poster: Photoshop Activeness (ATN, ABR, PAT)

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