How to Cheat in Photoshop

» Forum Index » Reader's Tutorials » Topic: Optimising GIFs in Photoshop and ImageReady

Posted on 20/12/08 11:44:14 PM

maiden
Golden Gif Gagster
Posts: 471

Reply

Optimising GIFs in Photoshop and ImageReady

There are a few ways to gain the best optimisation using Photoshop or Image Ready the Tutorial here can be used for most GIF animation programs the main ways to reduce filesize are:

Frames :: The more Frames in your animation the bigger the filesize often animation can be created with just 2 frames see below :

For more complicated animations it will require further study on how to reduce the number of unnecessary frames - often this will mean just going through frame by frame seeing where action is doubled up or can be done away with. When we watch a movie there are lots of frames per second to create a smooth life-like flow but if we cast our minds back to childhood flickbook animations we used to make then we can see the art of optimised frames and yet the animation was good enough to fool the eye into seeing motion - this is known as POV (Pesistance of Vision) where the brain fills in the missing frames of action.

Once you are satisfied with the number of frames in your animation (this may require some going backwards and forward from Save To Web so it's best always to save the animation in it's fullest form as a .psd - native Photoshop file - so that you can always undo any mistakes) take your animation to File>Save To Web and Devices or use the shortcut Alt+Shift+Ctrl+S (Option+Shift+Cmd+S (Mac))

Once in Save to Web view the menu on the right:

Firstly:

Select GIF (of course)

Color Reduction Algorithm
This is the method by which the colors are distributed in your animation and how they are applied with a reduced color palette as GIFs have only a maximum color palette of 256 colors - usually this is enough to give a fairly good photorealistic approximation but will make for larger filesizes.

To simplify things there are really only 2 Alogrithms to look at when Optimising for Web - Selective or Perceptual sometimes but not very often Adaptive - You can find which one saves you the most but in my experience 99% of the time it will be Selective

Colors
Reducing the number of colors will shave of quite a few bytes of data in the final filesize but of course you won't want to reduce it too much else your image will look very poor - depending on your image and how much banding* there is you may be able to get away with more severe palette reductions. (*Banding=The amount of gradients between colours). Don't worry too much you can usually see just how few colors you can get away with.

Dither Algorithm
This is the way in which banded colors are dealt with with the reduced color palette so instead of actually creating all the color tones between 2 banded colors it dithers the pixels together to fool the eye into seeing a smooth gradient in the same way as halftone monochrome uses dither to band gray information by dithering pixels of white and black in various quantities.

In my experience Diffusion is the best method if you're serious about saving on filesize as the other 2 options Pattern and Noise are better looking but cost heavy on filesize.

If there isn't a deal of color banding (simple cartoons etc.) in your image then you can opt to choose not to dither at all No Dither - check to see if it looks ok or not.

Dither Amount
Often reducing the Dither Amount will save some bytes of data but will cause some loss of banding causing colours to look 'stepped' or obvious banding in appearance - however there is a little work-thru trick that can save some bytes which I will go on to explain a little later.

Lossy
Lossy reduces the quality of your image by various degrees it does so by looking at blocks of similar colors and turning them into blocks of single color depending on the amount of lossy you dial in.

This requires a quick explanation about the way GIFs work - The way a GIF saves on filesize is by reading blocks of colors in horizonal lines the more colors the more data - so in an animation if there is a lot of moving elements then that's a lot of pixel data the GIF file must save, for example if you have a GIF with snow or rain animation or the background moves then the filesize will be big by it's very nature of having to store so much pixel information - however, if your backdrop is a single color and static then the filesize will generally be a lot smaller.

Anyhow, adding in between 10-20 Lossy will make your animation look a little noisy however will save you a good deal on filesize - so a sacrifice worth making.

[Back to the work-thru trick * Dialing in some Lossy can often make up for a reduction in Dither Amount - so for example a Dither Amount of 50% will cause some obvious banding/stepping in colors but adding in some Lossy will inadvertedly dither this obvious banding thereby saving you a good amount of bytes for a little sacrfice in Dither and Quality.

Transparency
Often checking the Transparency box will save on filesize but try it checked and unchecked to see and with various combination of Dither Amount and Lossy as this sometime affects the reduction.

Transparency Dither Algorithm
Just like the Dither Algorithm any moving objects moving over the background of your animation will need some dithering so that the transparent edges of those objects blend with the background to create a smooth animation especially if those objects have a feathered edge - to simplify this I always choose Diffusion Transparency Dither as the other 2 options increase the filesize in the same way as the Dither Algorithm.

You can choose No Transparency Dither if it makes no difference to the look or the filesize of your animation.

Interlaced
In all honesty I'm not 100% sure what this does something about creating a hi and a low region for video but I haven't studied this - Often this can be left unchecked as it will nearly always increase the filesize and won't really make any real difference to the final animation except having a bigger filesize of course.

Matte
This refers to the color that can be selected to form your transparent edge - if you intend to create a gif with a transparent background for the internet and you know what color of the background for the webpage that you're going to have your animation play on then chosing that color can make the edges look smoother instead of jagged - however if that animation is played on a different colored background it will look odd. I generally select "None" as my animation usually has a background.

Web Snap
Totally useless - an old artifact left over from when Internet Browsers had very reduced color range - this option really isn't worth using unless you like horrible retro graphics and even if you do - just customise the Color Palette rather than use this!

Image Size
The greatest factor for reducing filesize - the smaller the animation's Document Size the fewer pixels the gif has to calculate for - but of course we all want to see your work of art rather than a tiny box with something flickering on it. Bearing in mind the optimisation you will have already implemented reducing too harshly the Document Size will make it look bad - However you can reduce the Document Size first then optimise to the new size and you never know you might even be able to push up the quality with less optimisation!

Finally a note about Optimize to Filesize... within the Optimize Menu Flyout (just above where the Lossy box is)
This option will allow you to dial in your ideal filesize for your animation and then will automatically optimise your animation to fit that filesize - I don't use it as it takes away your control over the final look, but at a pinch it could help you out if you're struggling with the menu.

As for ImageReady all of the above can be found in the Optimization Menu within ImageReady.

Other GIF animation programs may give you more dither algorithm options - but the fun of optimisation is playing around to see which combination gets you the best optimisation to quality ratio.

So don't sacrfice the bytes if it means the movie 'bites'