The best way to Optimize an Animated GIF: 10 Methods

0
1


On this tutorial, we’ll have a detailed take a look at all of the obtainable choices to transform a video to a GIF animation and optimize its file dimension.

What Is a GIF File?

Earlier than we begin, let’s look extra intently on the query, “What’s a GIF file?” GIF is the usual format for compressing photographs with giant areas of strong colours and crisp particulars like these in line artwork, logos, or kind.

Being an 8-bit-depth picture format, it could have disappeared from the net after the introduction of the JPEG and PNG file codecs. However GIF continues to be a well-liked internet file format because of its body animation characteristic.

There are numerous methods to cut back a GIF dimension, from optimizing GIF information utilizing on-line instruments to studying compress GIFs in Photoshop. This fast information will make you an skilled in GIF optimization.

The best way to Optimize an Animated GIF: 10 Methods


If you wish to study these methods through video, take a look at our lesson on the Envato Tuts+ YouTube channel:


1. The best way to Trim the Animation

To start with, you will must open the video file with Photoshop. More often than not, you will not want the entire sequence for the GIF animation, so you may trim the video by going to Window > Timeline. Activate the Loop choice and attempt to discover 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. The best way to Cut back the GIF Picture File Dimension

Studying make a GIF smaller is fairly simple. You possibly can cut back the GIF dimension both by going to Picture > Picture Dimension or by hitting Alt-Management-I. Your video layer should be changed into a Sensible Object should you cut back the GIF dimension, however you do not have to fret about this—it will not have an effect on our workflow in any respect.

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. The best way to Save the GIF File for the Net

Another choice to cut back GIF dimension in Photoshop is the “Save for Net” perform. You will discover it by going to File > Export > Save for Net or by urgent Alt-Shift-Management-S.

My favourite factor about this workflow is that we do not have to do any conversion on the Timeline panel to have the ability to save a body animation, because the Save for Net dialog field will do the work for us as soon as you choose the GIF file format as your output.

Discover that the animation choices will seem within the backside proper nook of the dialog field. When you determine to additional cut back the GIF dimension in Photoshop, you may nonetheless do it right 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. The best way to Cut back the Variety of Frames

When you’re questioning make a GIF smaller, you can too cut back the GIF dimension should you reopen the exported GIF again into Photoshop and cut back GIF frames. Delete each second or third body from the Timeline panel. Then it’s best to choose all of the remaining frames and enhance their length to compensate for the lack of frames. When you do not do that compensation, your animation shall be performed sooner than the unique. When you’re prepared, it can save you the brand new optimized GIF, which ought to be a lot smaller than the unique.

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. The best way to Change the Variety of Colours That Are Animated 

Probably the most related choice for optimizing GIFs is the variety of colours used within the Colour Desk. The utmost quantity of colours is 256, which comes from the 8-bit-depth limitation. Usually talking, it is good to stay with 64 colours or much less to compress the GIF file in Photoshop. However relying on the unique video, you may want to extend the variety of colours to get a greater consequence.

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. The best way to Select the Colour Discount Algorithm

Listed here are the choices for selecting coloration discount:

  • Perceptual to create a customized coloration desk by giving precedence to colours for which the human eye has better sensitivity.
  • Selective to create a coloration desk much like the Perceptual coloration desk, however favoring broad areas of coloration and the preservation of internet colours. This coloration desk normally produces photographs with the best coloration integrity. (Selective is the default selection.)
  • Adaptive to create a customized coloration desk by sampling colours from the spectrum showing mostly within the picture. For instance, a picture with solely shades of inexperienced and blue produces a coloration desk made primarily of greens and blues. Most photographs focus colours specifically areas of the spectrum.
  • Restrictive makes use of the usual, 216‑coloration, internet‑protected coloration desk frequent to the 8‑bit (256‑coloration) panels of Home windows and Mac working programs. This selection ensures that no browser dither is utilized to colours when the picture is displayed utilizing 8‑bit coloration. In case your picture has fewer than 216 colours, unused colours are faraway from the desk.
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. The best way to Use Dithering to Cut back the GIF File Dimension in Photoshop

Since GIF information comprise a restricted variety of colours, we might need to imitate the lacking colours with obtainable ones utilizing dithering. From the Dither menu, we select one of many algorithms for such imitation. The Diffusion methodology lets us alter the quantity of dither. With the Sample and Noise algorithms, there’s nothing to regulate.

The extra dithering in a picture, the bigger the file dimension. Dithering provides different-colored pixels in shut proximity to one another to simulate secondary colours or clean gradations in coloration. Some photographs should comprise dithering to look good, but it surely’s greatest to make use of the least quantity of dithering attainable to maintain the smallest file dimension.

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

8. The best way to Use the Net Snap, Lossy, Transparency, and Interlaced Capabilities 

  • Net Snap is used to assist forestall dithering in a browser. It is performed by snapping among the colours to web-safe colours. The extra web-safe colours current in a GIF, the much less browser dithering will consequence. A price of 0% will not change any colours, whereas a worth of 100% will change all the colours within the picture to web-safe.
  • Lossy compression discards visible data, which may compress GIF information. 
  • If the picture comprises Transparency, choose Transparency to protect clear pixels; deselect Transparency to fill absolutely and partially clear pixels with the matte coloration.
  • Interlaced GIF information are loaded in a browser in just 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. The best way to Examine the Authentic and Optimized Model of the GIF File

As soon as you have made a number of customized adjustments, you may examine the distinction in file dimension and high quality by utilizing 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. The best way to Use Preview, Save Preset, and Optimize to File Dimension

When you’re joyful together with your GIF settings, check out your remaining optimized GIF with the Preview choice in a browser, and remember to avoid wasting your settings as presets. You can even specify a file dimension restrict with this extra choice from the Optimize menu, and as soon as that is utilized, Photoshop will attempt to match the scale with the very best picture high 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

5 Wonderful GIF Add-Ons From Envato Components

Now ten easy methods of optimizing GIFs. When you’re on the lookout for GIF-related Photoshop merchandise, then take a look at these superior actions and templates:

1. Speedway GIF Animated Photoshop Motion (ATN, ASL)

The Speedway motion permits you to create the impact that the thing in entrance of the image is shifting at a extremely quick tempo. All the results are layered and may be simply edited.

Speedway Gif Animated Photoshop ActionSpeedway Gif Animated Photoshop ActionSpeedway Gif Animated Photoshop Action

2. Animated 3D Images Stereoscopic Motion (PSD)

If you wish to create retro-looking GIF information out of your static photos, take a look at this Photoshop template. It’s extremely simple to make use of! It comes with three classic coloration presets and a assist file.

Animated 3D Photography Stereoscopic ActionAnimated 3D Photography Stereoscopic ActionAnimated 3D Photography Stereoscopic Action

3. Animated Zombie Grime Artwork Photoshop Motion (ATN, PAT, PDF)

This superior Photoshop motion will provide help to so as to add the stylish animated zombie/grime impact to your images. In the principle archive, you will discover one motion file, one sample file, and a hyperlink to a video tutorial.

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

4. GIF Animated Sparkles Photoshop Motion (ATN, ABR, PAT, PNG, PSD)

When you’re on the lookout for one thing extra vivid and magic-looking, GIF Animated Sparkles Photoshop Motion is the only option for you. It provides your images that fabulous glowing look in just a few easy clicks.

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

5. Animated 80’s Synthwave Poster: Photoshop Motion (ATN, ABR, PAT)

This motion is one in all my favorites as effectively. It provides you the chance to create superb animated posters in Adobe Photoshop, in synthwave/retrowave kinds. It is a useful software for recreating the environment of the 80s.

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

Extra Envato Tuts+ Tutorials

I hope this text was useful to you. Wish to study extra about GIF creating and enhancing in Photoshop? Learn these superior tutorials:

LEAVE A REPLY

Please enter your comment!
Please enter your name here