Optimizing GIFs (Animated and Static)

I went searching around on the web today for a decent software tool that would optimize GIFs. One of the things I was looking for was a tool that would also compress the animated images. It was frustrating work and I didn't find anything. It seems that while there's a zillion and one great tools out there to optimize JPEG images, the lowly GIFs have been all but forgotten.

Why optimize the GIFs?

For the simple reason that, on the Internet, at the present moment in time, speed = money. Most surfers are on really slow connections. The only way to make your images load faster (short of selling each of your surfers a high speed connection) is to SHRINK the sizes of the images you're using. Say you have a great animated banner that's a whopping 40kb in size. If you can get that down to 20kb - 30kb, you've made quite a saving and MORE surfers will get to see that image. There's also the bandwidth savings too. Basically for all the same reasons you'd want to compress a JPEG picture.

Understanding GIFs

Before you can optimize a GIF, it's probably best to have a quick recap on how optimizing a GIF actually works. GIFs are images on the web. Unlike their JPEG sidekicks, GIFs do not have millions of colors inside of them. GIFs actually have a maximum of 256 colors per image. When you optimize a GIF, you're really just reducing the number of colors the image has in it. Less colors = smaller image & faster loading. A GIF with 128 colors will be smaller than a GIF with 256 colors. A GIF of 12 colors will be smaller in file size than a GIF of 40 colors and so on.

The best tool for the job

Currently, by far the best thing I've ever seen to optimize GIFs is a free online tool. While I'd have preferred to have something on my hard disk that did the job, there just isn't anything I can find which does the job as well as the tool we're going to look at today. The good news is that it's devastatingly effective, works with animated GIFs, is instantly useable, and best of all... it's FREE! First step then: add a bookmark to GifWorks - http://www.gifworks.com/

Gifworks Tutorial:

1) Go to the GifWorks site in your browser.

It might help to press F11 on the keyboard to go to full screen mode. F11 pressed again returns you to normal view.

2) The next step, as with any piece of 'real' software, is to open the file you want to work with. For this tutorial, deicide on an animated GIF from your hard disk to work with. Maybe one that you think could do with a diet - that's larger than you'd like it to be. Try to pick an ANIMATED GIF as they're often the worst offenders as far as size goes, and something that not many software tools are capable of compressing effectively.

3) Just below where it says 'GIFWorks Welcome' - click on 'File'.

4) Choose 'File Open'.

5) Using 'Method 2' click on 'Browse'. You should now see a familiar display where you can find the GIF that you want to optimize. It's the same sort of thing that you'll have done a million times before. Navigate to the correct folder and then double click on the image you want to work with.

6) Click 'Upload Image'. This stores the GIF in a temporary location so that GifWorks can work on it. Don't worry - it's not in a public place and it's temporary. You should now see GifWorks is showing the banner, graphic - or whatever GIF you have picked. Cool - now it's time to mess with this GIF's settings!

7) Look for the 'Optimize' option on the menu bar. This should be a couple of words over from the 'File' option you clicked earlier. Click 'Options' and then pick 'Reduce Colors' from the menu that drops down. This is where we'll start to reduce this GIF's colors to shrink it's file size down.

You'll now see a window which seems to be full of the same GIF image repeated. The system hasn't crashed, and you've not spend too long looking at porn on the web! This is what is meant to happen. If you look down the images, you'll see that under each one there's some text. You'll have the following information about each image:

File Size
Number Of Colors
Reduction in %

This is the beauty of the GifWorks tool. It gives you a preview display of how each image looks with the colors reduced to that level. The further DOWN the page we look, the fewer colors have been used, and the smaller the image is. Right down at the bottom of the page is our original image.

Now it's time to start making some tough decisions.

After all if that image can be reduced by 20% or more - then it's seriously worth thinking about. Your site is gonna become a lean, mean, fighting machine! But where do we stop? Let's go one step further. Scroll down the page and click on 'Click Here To Reduce Further'.

On this page, the images should be starting to get to 24% - 40% reduction of their original size. These images would load a lot faster than the original. But of course as the number of colors is reduced, the images will also start to look 'worse'. It's down to playing the exact same game that you play when you're optimizing JPEG images. It's a trade-off between SPEED and QUALITY. The ideal situation is to reduce the image in such a way that there's little or no apparent degradation of the image visually, but you still reduce the image by a significant amount of kb.

Saving the image

Saving the image is very easy. You might have noticed that there was NO save feature in the 'File' menu we used right at the start of this tutorial. But don't forget that this ISN'T a piece of software - it's your browser! To save an image, all you do is right click on it and go to 'Save As'. Then you can save it off to where you want to on your hard disk. The original image is never altered by GifWorks (unless you choose to overwrite it at this stage).

Some final thoughts

SOME of the GIFs you come across in your work as an adult webmaster will have been compressed effectively - and optimizing them will be a waste of your time. Then there's other times when recip buttons, ad graphics, or other GIF graphics could benefit greatly from a quick run through this tool. Just remember that not all surfers are on fast modems, and not all designers optimize their GIF graphics properly for you. It pays to know how to tweak these babies yourself.

Hope this helps a few folks and have a very good Tuesday!

TOM ^"^

ICQ 12616560
Email tom@tomsnewbiebooster.com

Enter TOM'S NEWBIE BOOSTER

">

---