Those "Grainy" GIF's - How to Fix


( the secret - create a custom palette !! )


If you have spent much time at all with graphical web design, then you have encountered the "grainy GIF" problem.  You begin with a beautiful, clear, flowing JPEG, which you open in Photoshop :






You plan to put it on your website - but wait a minute - the page you want to place it on has a background pattern, and that white border certainly wont look very good.  So you decide to convert it to a GIF.  No problem, you simply select Image/Mode/Indexed . . . and choose the Windows System Palette :



 -  the result is  . . .  "The Grainy GIF Problem" !!!


home.gif (grainy)



Yecchh !!  Well, there's no need to bother with adding the transparency - your website deserves better than this !!


And so it shall.  But let's examine what just happened.  You see, the Windows System palette was designed to do a "best effort" assimilation of all images.  But your image has very subtle shades of gold.  The system palette has only one gold color, so it inserts other pixels to shade it slightly.  A blow-up will show you what the system palette does to try to simulate these flowing shades:




Image converted to Indexed color with the Windows System Palette





The Fix


It is true that a GIF palette can have a maximum of 256 colors, but you can use any palette you wish !!!  Why not create a palette that has every color that appears in the original JPG file ??  After all, this image is basically all white, and shades of gold.  Surely the number of colors is less than 256 - OK, but how can we create such a palette ??  Photoshop has no way to take an image, sample all of it's colors, and create a custom palette derived form that image's colors. 


*** but Ulead's GIF Animator does !!


Open the JPG image in GIF Animator 5.0

click the "Optimize" tab - then you will the image's own colors listed in the Global Palette on the lower right:



at this point you should probably select less colors to optimize the GIF and see if the quality remains - I selected 64 colors in the Preset drop-down instead of 256 and it still looked excellent (since this image has few colors):



click the tiny diskette icon to save the palette as a "pal" file, for example:  "home.pal"

go back to Photoshop with the original JPG open

click Image/Mode/Indexed . . . and select "Custom" in the top drop-down

click "Load" and select your new palette - home.pal -

the image will now be a clear, beautiful GIF, without the grainy effect - iy also supports Transparency, so we can get rid of that ugly white border !!!


home.gif (clear)


***For years, I though that only a JPG could look this good ***



Lastly, let's compare the blowup to see the pixels themselves - you will see that the custom GIF palette now supports the subtle changes in shading that the Windows System Palette did not: