March 18, 1997 Limit Yourself: Making Photos Safe and Fast

OK, so Gif Girl talks a big game about reducing color palettes to make your graphics browser friendly and fast. But where, you might say, is the beauty in limiting your colors to the measly 216 handed down by the Netscape and IE demigods? In particular, photographic images seem destined to remain as huge dithered JPGs (the file format usually preferred for photographs). But Gif Girl sayeth: If you can limit the number of colors used in a photo, there's a good possibility that you can index it to the safe palette, and keep your images both small (file size) and safe (no nasty dithers).

"But how, Gif Girl?" you ask. Ever tried to index a picture of granny to the safe palette? She probably looked like she had leprosy. Usually, there are just too many colors in a photo to limit it to 216. But Gif Girl is going to show you one way to knock your photos down to size. It's called "posterizing" the images, and it can save granny from succumbing to the dithers. It takes quite a bit of experimentation, so be prepared to sweat a bit for your art! And save backups like crazy because you'll want to go back to your original and try it again if your results aren't satisfactory. If you need help with loading in the Safe Palette or Indexing your images, check out Gif Girl's column from February which explains this in detail.

In Photoshop, it's as easy as pie. You've got your photographic image, and you've got it down to the size you want (then reduce it 75 percent more... c'mon, you know it can always be smaller!). Now, you can muck around with the color range of the photo even before you limit its palette by "colorizing" it. Gif Girl colorized her fancy schmancy logo above — contrary to what you might have thought, Gif Girl does not have flaming red skin. She used the color controls available in Photoshop 4.0 under Image> > Adjust > > Hue/Saturation to colorize the image to a bright red. This stylizes the image. Later on, when we "posterize" the image, the tonality (or the shading) will get a little wacky. But since we're not trying to stick to a realistic look and color range, the shift in tonality won't be a problem. In other words, Gif Girl will look a fabulous new shade of red, instead of vaguely off-flesh tone.

Next, we posterize. Under Adjust > > Posterize and I click "Preview" so I can see the effects on my image. I try to go for as few levels as possible, and usually end up with around 3-4 levels. Then, watch your photo go funky! The effect is electric and visually striking. Sometimes it's appropriate for the tone of the piece, and sometimes it's not. That's where your artistic judgement comes in. But if you take a look at the file sizes, you'll see that it's often worth the effort:

Posterized Image
Indexed to Safe Palette:
4k

Non-Posterized Image
Indexed to Safe Palette:
6k

JPG

14k!

Keep in mind that if the image is very large, it will probably be better to keep it as a JPG, because in the end, JPGs do a better job of compressing photographic images. But with the teeny ones, it's a toss-up which file type will give you a smaller file size.

This colorize, posterize trick is not a technique that's going to work in every situation, but it's one of the cards that Gif Girl keeps up her sleeve. And there's more where that came from...

NEXT TIME:
Small and Safe Techniques:
Gif Girl will follow up in the coming weeks with some specific graphics techniques for using limited palettes... they are your friends!

Gif Girl, when she isn't out saving the world from dithered graphics and illegible Web pages, helps keep Tripod's pages running fast and furious.

Send your comments, ideas, suggestions, and of course, your solutions for saving the world from bad Web page design, to Gif Girl. She'd love to hear from you.