What Is The Size Of An Animated Gif Image

In this tutorial, nosotros'll accept 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, allow's have 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 viii-bit-depth image format, it would take disappeared from the spider web afterwards the introduction of the JPEG and PNG file formats. But GIF is however a favored web file format thank you to its frame animation characteristic.

By the way, if you lot piece of work with blithe GIFs ofttimes, 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 want to learn these techniques via video, check out our lesson on the Envato Tuts+ YouTube aqueduct:

1. How to Trim the Animation

Get-go of all, you lot'll need to open up the video file with Photoshop. About 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 pick and attempt to find 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

Yous can either reduce the GIF prototype file size past going to Image > Image Size or by hitting Alt-Control-I. Your video layer volition have to be turned into a Smart Object if you reduce the GIF size, but you don't have 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 choice to reduce GIF size in Photoshop is the "Save for Web" function. Yous can find it past 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 console to be able to salvage a frame animation, every bit the Relieve for Web dialog box will do the work for us once you select the GIF file format equally your output.

Notice that the blitheness options will appear in the lesser right corner of the dialog box. If you decide to farther reduce the GIF size in Photoshop, you lot can nevertheless do information technology hither.

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 2nd or 3rd 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. One time y'all're ready, you can salve the new optimized GIF, which should be much smaller than the original.

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

v. How to Alter the Number of Colors That Are Blithe

The most relevant pick 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 viii-flake-depth limitation. Generally speaking, it's expert to stick with 64 colors or less to compress the GIF file in Photoshop. Simply depending on the original video, you might need to increase the number of colors to get a improve issue.

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

six. How to Choose the Colour Reduction Algorithm

Hither are the options for choosing color reduction:

Perceptual to create a custom color table by giving priority to colors for which the human being middle has greater sensitivity.
Selective to create a color table like to the Perceptual color table, simply favoring wide areas of color and the preservation of spider web colors. This colour table usually produces images with the greatest colour integrity. (Selective is the default choice.)
Adaptive to create a custom color table by sampling colors from the spectrum actualization most unremarkably in the prototype. For case, an image with only shades of green and bluish produces a color table made primarily of greens and dejection. Most images concentrate colors in particular areas of the spectrum.
Restrictive uses the standard, 216‑color, web‑safe color table common to the eight‑chip (256‑colour) 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‑flake colour. If your epitome has fewer than 216 colors, unused colors are removed from the table.

How to Compress GIF Tutorial choosing the color reduction algorithm

seven. How to Utilise Dithering to Reduce the GIF File Size in Photoshop

Since GIF files contain a limited number of colors, nosotros may want to imitate the missing colors with bachelor ones using dithering. From the Dither menu, we choose one of the algorithms for such false. The Improvidence method lets the states adapt the corporeality of dither. With theDesign and Noise algorithms, in that location's nothing to adapt.

The more dithering in an image, the larger the file size. Dithering adds dissimilar-colored pixels in close proximity to each other to simulate secondary colors or smoothen gradations in colour. Some images must contain dithering to look good, but it'south all-time to utilize the to the lowest degree amount of dithering possible to continue 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 foreclose dithering in a browser. It'southward done by snapping some of the colors to web-safe colors. The more spider web-condom colors nowadays in a GIF, the less browser dithering will consequence. A value of 0% won't modify whatever colors, while a value of 100% volition change all the colors in the image to web-safe.
Lossy compression discards visual data, which tin compress the GIF file size.
If the image contains Transparency, select Transparency to preserve transparent pixels; deselect Transparency to make full 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

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

In one case you've made a lot of custom changes, you lot can check the difference in file size and quality by using the ii-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, take a look at your final optimized GIF with the Preview choice in a browser, and don't forget to salve your settings equally presets. You can besides specify a file size limit with this additional option from the Optimize carte du jour, and once this is practical, 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 size

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

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

GIF Export Photoshop Action (ATN)

GIF Export Photoshop Activeness lets y'all take multiple images, automatically upload them in Photoshop, and export them every bit a GIF.

Animated VHS Instagram Stories Template five.ii (PSD)

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

Animated VHS Instagram Stories Template v2

Blithe Zombie Grime Fine art Photoshop Action (ATN, PAT, PDF)

This awesome Photoshop action will assistance you to add together the trendy animated zombie/grime upshot to your photos. In the main archive, y'all'll detect one action file, i 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 yous're looking for something more than bright and magic-looking, GIF Animated Sparkles Photoshop Action is the all-time choice for y'all. Information technology gives your photos that fabled glowing look in a few simple clicks.

Animated eighty'south Synthwave Poster: Photoshop Action (ATN, ABR, PAT)

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