Vol. 1, No. 4
IMAGE PRODUCTION

Welcome to the fourth issue of "Handcrafted," the Better Builders newsletter, assembled with tender loving care by your friends at Tripod and Webmonkey. This time around we'll be looking at Web images: How to make them, and how to keep them looking sharp and loading fast.

If you need a primer on basic HTML before we dive right in, kindly take a look at the "Handcrafted" Archives.

All set? Then let's start prettifying that Web site of yours with some pictures. There's a lot of ground to cover, so we're splitting this lesson into two parts. Today, we'll be focusing on how to actually create an image and make sure it's ready for the Web. Next time out, we'll be covering how to get your images exactly where you want them on your page; and we'll go into fancy-pants territory with GIF animation and the like.

The Internet was all about plain text until the Web came along and, being the show-off that it is, started adding images to everything. Now just about every Web page out there has at least a few pictures to liven things up. Some sites are entirely graphics-based. Learning how to make images and optimize them for the Web is an important skill for any homepage builder to master. Lucky for you, it's really not all that tricky once you've been through the process a couple of times.

Before you start worrying about color palettes and file formats, you need to create an image. Let's say you want a nice picture of a stapler to liven up your "Ode to Staplers" page. The best thing to do is make it yourself. That way, you won't have to worry about infringing on someone else's copyright. Besides, then you can call yourself a "graphic designer."

To hand-make a graphic, you'll need some kind of image-production software: Basically any program that allows you to draw, paint, or otherwise adjust and manipulate images. The granddaddy of graphic design software is Photoshop. If you'd just as soon not shell out hundreds of bucks, you may want to opt for a shareware program like GraphicConverter for the Mac, or even Paint, the program that comes with Windows. Fire up one of those puppies and draw a stapler — how hard could it be?

Well, if you happen to be artistically challenged, it can get really hard. Another option is to take a photograph of a stapler. You could use a digital camera and download the picture directly to your computer, or you could use a regular camera and scan in the resulting photo. (Some film developers will even make your pictures available on a Web site or CD-ROM.) You could even put your stapler right on the scanner and scan it in — copy stores like Kinko's offer scanners that you can rent by the minute.

You can also swipe an image from the Web and alter it to fit your needs. Please be sure that you're not stealing anyone's work. What if your stapler site becomes hugely popular and the artist behind your stolen picture happens to stroll on over and sees her pilfered image? That's right — Lawsuit City. So stick to the copyright-cleared image sites, like Barry's Clip Art Server, or The Elated Web Toolbox.

Downloading an image from a Web site is easy. On a Mac, just put your pointer on the picture you want and hold down the mouse button, then choose "Save This Image As ..." or "Save Picture As ..." (depending on what browser you're using) from the pop-up menu. In Windows, hit the right mouse button to get a pop-up menu. The file will then be saved to your hard drive.

So now you have your picture of a stapler in your hot little hands, created by drawing, photographing, or scanning. Now it's time to mess around with the stapler in your image-editing program. Most programs allow you to change the picture's size, to crop it, and to adjust its colors. Play around with the picture until you dig the way it looks.

It's perfect, right? You have a giant stapler consuming half of your page, using millions of color to bring that glorious and handy tool to life. But wait, just because it looks great on your computer doesn't mean it's going to look great on the Web. What's more, even if it does look great on the Web, your visitors may not want to bother waiting around for ten minutes while it loads.

Here are three things you should keep in mind when optimizing your images for the Web:

1. It's important to keep the image's file size small.
2. You should only use "Web-safe" colors.
3. Your images need to be saved as GIFs or JPEGs.

1. Small File Sizes

The more colors your image has, the better it'll look; yet the larger the file will be and the longer it will take for people to download it. Designing for the Web is all about finding the balance between an image that looks good and an image that won't take forever to load. This means you'll have to do some compromising but, with a little effort, you can find a happy medium. The trick is to use your image editor to reduce the number of colors in your picture. If your stapler photo is currently made up of thousands of colors, first take it down to 256 colors (also called 8-bit color) and see how it looks. Now reduce it even further, perhaps down to 16 colors. If that turns your stapler into a bizarre abstract painting, just Undo and try another color setting. The goal is to have your picture made up of as few colors as possible, without looking hideous.

Here's how this process would work if you were using Photoshop: Open up your image, select Mode under the Image menu, then choose Indexed Color from the Mode submenu. This brings up the Indexed Color window where you can choose the number of colors. By selecting Web from the Palette pull-down menu, the image will be displayed using only Web-safe colors.

Now, change the number of colors with the Color Depth menu. The fewer bits per pixel you choose, the fewer colors will be used. Play around with it and see what works. You'll notice the picture gets considerably more grainy as you remove colors, but sometimes that cheap, ugly esthetic can be endearing — at least that's what Web designers keep saying.

Once you've reduced the colors, save that puppy and you'll have a lean, mean graphic for your site.

2. Web-Safe Colors

You may be using a Windows machine that's displaying thousands of colors, but someone visiting your site may well be on a Mac displaying only 256 colors. Thus, your stapler picture will look unnervingly different. You see, the standard color palettes used by the Macintosh and Windows aren't exactly the same. To be sure that your picture looks the same on the widest possible range of platforms, you should stick to the Web-safe color palette of 216 colors. Learn more about this palette and download it for your image program

Most of the newer graphics programs can automatically alter your picture to this palette.

3. GIF vs. JPEG

These are two main image formats that are used on the Web. They both compress your picture to make it download faster, but they use different types of compression. The JPEG format is better for compressing photographs and larger images, while the GIF format is better for simpler things like text and cartoons. JPEG compression generally results in smaller file sizes. However, with GIFs you can select a color to be transparent, allowing the background of your page to show through. Get the full scoop on transparency; and learn more about GIFs and JPEGs.

Once the number of colors in your image has been reduced and the file's been saved as a GIF or JPEG, your stapler picture should be ready for its debut. It'll look slick, it'll spice up your page, and it'll load quickly.

Tune in next time, when we'll explain exactly how to get these optimized images onto your site, and how to get them to play nice with the other stuff on your page.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

Just so you can see the difference that image optimization can make, try creating several versions of the same picture. For example, take the original stapler picture with tons of colors, a copy that's been reduced to 256 colors, and one that's been cut down to 16 colors. Save them all as JPEGs, and upload them to your site so you can get an idea of what the user's experience is like. Pay attention to how long it takes each picture to appear when viewing it on the Web, and also note how each looks. Are the colors of your un-optimized image worth the wait? Is the 16-color image too much of a compromise? Try viewing each image on different browsers and computers, if possible, to get a good understanding of the variation between platforms.

You won't need to be this uptight for every image you make. With enough practice, you'll be able to predict how something will look displayed with different color palettes or on different computers. Better yet, you'll design your images from the ground up so they'll look nice, no matter what. For example, you could use the 216-color palette from the get-go when drawing a picture, so even when you reduce the colors later on, the image will remain pretty much the same.

If you'd prefer somebody else to do this optimization work for you, there are several Web sites out there that can help. GIF Wizard is one such example. Alternately, you could use a program like Fireworks or ImageReady.

Handcrafted Archive