How to Optimize an Animated GIF: 10 Ways

On this tutorial, we’ll have an in depth have a look at all of the obtainable choices to transform a video to a GIF animation, and methods to optimize its file measurement.

What Is a GIF File?

Earlier than we begin, let’s take a more in-depth have a look at the query, “What’s a GIF file?” GIF is the usual format for compressing photographs with massive areas of stable colours and crisp particulars like these in line artwork, logos, or kind. Being an 8-bit-depth picture format, it will have disappeared from the net after the introduction of the JPEG and PNG file codecs. However GIF remains to be a popular internet file format due to its body animation function. 

By the way in which, when you work with animated GIFs typically, it’s possible you’ll need to try an automatic resolution: the Gift Export Photoshop Action obtainable on GraphicRiver.

Gift Export Photoshop ActionGift Export Photoshop ActionGift Export Photoshop Action

Learn how to Optimize an Animated GIF: 10 Methods


If you wish to be taught these strategies by way of video, try our lesson on the Envato Tuts+ YouTube channel:


1. Learn how to Trim the Animation

To begin with, you may have to open the video file with Photoshop. More often than not, you will not want the entire sequence for the GIF animation, so you’ll be able to trim the video by going to Window > Timeline. Activate the Loop possibility 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. Learn how to Scale back the GIF Picture File Measurement

You’ll be able to both cut back the GIF picture file measurement by going to Picture > Picture Measurement or by hitting Alt-Management-I. Your video layer must be become a Sensible Object when you cut back the GIF measurement, 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. Learn how to Save the GIF File for the Net

Another choice to scale back GIF measurement in Photoshop is the “Save for Net” operate. You could find 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. For those who resolve to additional cut back the GIF measurement in Photoshop, you’ll be able to 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. Learn how to Scale back the Variety of Frames

You can too cut back the GIF measurement when you reopen the exported GIF again into Photoshop and delete each second or third body from the Timeline panel. Then it’s best to choose all of the remaining frames and improve their period to compensate for the lack of frames. For those who do not do that compensation, your animation shall be performed quicker than the unique. When you’re prepared, it can save you the brand new optimized GIF, which must 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. Learn how to Change the Variety of Colours That Are Animated 

Essentially the most related possibility for optimizing GIF measurement is the variety of colours used within the Shade Desk. The utmost quantity of colours is 256, which comes from the 8-bit-depth limitation. Typically 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 would possibly want to extend the variety of colours to get a greater outcome.

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. Learn how to Select the Shade Discount Algorithm

Listed below are the choices for selecting colour discount:

  • Perceptual to create a customized colour desk by giving precedence to colours for which the human eye has higher sensitivity.
  • Selective to create a colour desk much like the Perceptual colour desk, however favoring broad areas of colour and the preservation of internet colours. This colour desk often produces photographs with the best colour integrity. (Selective is the default alternative.)
  • Adaptive to create a customized colour 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 colour desk made primarily of greens and blues. Most photographs focus colours particularly areas of the spectrum.
  • Restrictive makes use of the usual, 216‑colour, internet‑secure colour desk frequent to the 8‑bit (256‑colour) 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 colour. 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. Learn how to Use Dithering to Scale back the GIF File Measurement in Photoshop

Since GIF recordsdata 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 regulate 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 measurement. Dithering provides different-colored pixels in shut proximity to one another to simulate secondary colours or easy gradations in colour. Some photographs should comprise dithering to look good, however it’s finest to make use of the least quantity of dithering potential to maintain the smallest file measurement.

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

8. Learn how to Use the Net Snap, Lossy, Transparency, and Interlaced Capabilities 

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

As soon as you’ve got made plenty of customized modifications, you’ll be able to examine the distinction in file measurement 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. Learn how to Use Preview, Save Preset, and Optimize to File Measurement

For those who’re completely happy together with your settings, check out your remaining optimized GIF with the Preview possibility in a browser, and remember to save lots of your settings as presets. You can too specify a file measurement restrict with this extra possibility from the Optimize menu, and as soon as that is utilized, Photoshop will attempt to match the dimensions with the absolute 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

Which Manner of Optimizing a GIF File Do You Choose to Use?

Now you realize ten easy methods to optimize your GIF recordsdata. I hope this text was useful to you. For those who’re searching for GIF-related Photoshop merchandise, then try these superior actions and templates:

GIF Export Photoshop Action (ATN)

GIF Export Photoshop Motion helps you to take a number of photographs, mechanically add them in Photoshop, and export them as a GIF.

Gif Export Photoshop ActionGif Export Photoshop ActionGif Export Photoshop Action

Animated VHS Instagram Stories Template v.2 (PSD)

If you wish to create glitched and VHS-looking animated Instagram tales or animated GIF recordsdata out of your static footage, try this Photoshop template, which is extraordinarily straightforward to make use of and appropriate for any picture.

Animated VHS Instagram Stories Template v2Animated VHS Instagram Stories Template v2Animated VHS Instagram Stories Template v2

Animated Zombie Grime Art Photoshop Action (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 may 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

GIF Animated Sparkles Photoshop Action (ATN, ABR, PAT, PNG, PSD)

For those who’re searching for one thing extra vibrant and magic-looking, GIF Animated Sparkles Photoshop Motion is the only option for you. It offers your images that fabulous glowing look in a couple of easy clicks.

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

Animated 80’s Synthwave Poster: Photoshop Action (ATN, ABR, PAT)

This motion is certainly one of my favorites as effectively. It offers you the likelihood to create wonderful animated posters in Adobe Photoshop, in synthwave/retrowave kinds. It is a helpful instrument for recreating the environment of the 80s.

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

Need to be taught extra about GIF creating and modifying in Photoshop? Learn these superior tutorials:

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0