Creating Graphics for the Web

Software

Either Macromedia Fireworks or Adobe ImageReady (or Photoshop, which has the same "save for Web" capability) will help you create good quality Web graphics at low file sizes. Fireworks and ImageReady are Web-specific software, enabling you to either create or import graphics then optimize them for the Web. The programs allow you to compare various versions of GIF or JPG formats. You can see what your graphic looks like as a 32-color GIF compared to a 16-color GIF, or as a low quality (but small) JPG versus a high quality (but large) JPG. You can import graphics from Photoshop, Illustrator, or Freehand, and scrunch them way down in file size.

The Web-Safe Palette

These days most monitors have good color capabilities and are set by default to "true color" or "millions of colors." Web designers are shifting away from the limited Web-safe palette. When deciding whether to stick to a Web-safe palette, consider your audience and what kind of computers they are likely to have. Consider compromising: use Web-safe colors when they work, but step outside the palette when the Web-safe colors just aren't cutting it. View your non-Web-safe colors at a 256 setting to see what happens to them. Areas of HTML-defined color (such as a table cell background) will revert to the nearest Web-safe color, while GIFs and JPGs will dither. If you want old-fashioned, foolproof colors, however, read on....

The palette of 216 colors that are "browser-safe" on both PCs and Macs was determined by math, not a human being who's ever successfully bought curtains to match the bed spread. If you look at a Web palette, you'll wonder why there are so few neutral colors or quieter colors in the pale end of the spectrum. Why we have half a dozen neon greens but no subtle, pale green is not a question to be answered by mortal designers.

For a glance at the 216, see Lynda Weinman's graph of Websafe colors with hexadecimal and RGB values. These days graphics programs have Websafe palettes built in. (Is anyone reading this old enough to remember the days when you had to import a CLUT into your Photoshop? Extra point: Does anyone know what a CLUT is?)

You can use colors outside the Web-safe palette, but these colors will dither on some people's screens. When dithering occurs, lots of tiny dots appear throughout the image. Some computers have only an 8-bit (256 colors) capability, or the computer's colors are set at a low number regardless of the hardware. On these computers, a Web browser tries to simulate an unavailable color by making a mosaic—combining colors it does have to create an illusion of the missing color. Sometimes the grainy effect is not bad-looking; other times it looks terrible. The best way to avoid dithering is to stick with a Web safe palette. But here's a trick for expanding that palette:

Checkerboards. In your graphics program, set your pencil to 1 pixel and zoom in to make a checkerboard with two colors. For instance, to create a very pale blue, make a checkerboard using the lightest blue in the Web-safe palette, and white. You can use this checkered GIF as a background image, or, in your graphic program you can fill an object with the pattern (using Photoshop's "define pattern" feature for instance). At 100% view, the image will appear to be a smooth, pale blue (see below).

But be careful laying type or other images on top of a checkerboard—it can make type appear jagged. You can get around this by placing a subtle white halo around the type in your graphics program, which will obscure the checkerboard at the edges of the letters. On a 256 display the halo will dither a bit, but it won't be as noticeable as the entire color area dithering, which would happen if you used a non-Websafe color instead of the checkerboard.

#CCCFF #CCCCFF checkered with white

When to Dither

There are times when you may want to use dithering, such as in gradients or in some photographs. Using dithering can offset the banding that occurs when an 8-bit monitor tries to render the range of colors in a gradient. When saving a GIF in ImageReady or Fireworks, you can choose from three different styles of dithering: diffusion, noise, or pattern, which you can preview before saving to see how they look. Which one you use is a matter of preference and what looks best for the particular image; however, if you are saving a photograph as a GIF, diffusion dithering usually looks best. Keep in mind that even high-color monitors sometimes make gradients look terrible, so keep your gradients narrow rather than covering, say, a whole page with a gradient.

GIF Colors: Adaptive, Selective, Web

"Adaptive" and "Selective" are the best settings for preserving the colors in your graphic when you convert it to a GIF. The "Web" setting uses strictly the 216 Web-safe colors, so it has a very limited palette for anti-aliasing, the result being that it adds unrelated and seemingly arbitrary colors to your graphic. Use the Web setting only if you absolutely want to avoid dithering (beyond the dithering you'll get when you change the graphic to the "Web" palette to begin with). "Perceptive" is very similar to "Selective," but apparently gives priority to colors that the human eye perceives more easily.

GIF or JPG?

Generally, if your image is rather flat, with areas of solid color, or very few colors overall, make it a GIF. If it's a photograph, make it a JPG. The JPG format compresses files very well but distorts images, especially at edges of color areas—the distortions are more noticeable when an image has clearly defined color areas. The GIF format preserves areas of flat color, but is limited to 256 colors (JPGs can have million of colors), which is usually not enough to render a photograph well.

But this rule is by no means steadfast. Grayscale photos and small photos (under 100 x 100 pixels) often work better as GIFs. It's best to compare how your image looks as a JPG or a GIF at various quality levels to find the best solution. The one circumstance in which you will always want to make your graphic a GIF is if it's going to be a background image that will tile.

Gif's are generally smaller than jpeg's. Unless you have a picture that has subtle color shifts, always try to save your images as a Gif. Try to use as few colors as possible when designing, and stick to the 216 web safe colors.

Background Images

Background images that tile should always be GIFs. Because of the way processors read GIFs, they will tile a GIF effortlessly; however, they will labor over tiling a JPG, causing very slow download times. The only time you'd use a JPG as a background image is if it is large enough so that it won't tile. An image large enough not to tile would be about 1400 to 1600 pixels wide and about 900 to 1100 pixels high, assuming the content doesn't require one to scroll down the page. Of course, a graphic this big can't have many colors in it or it will be huge in k size. (There is CSS code that tells browsers not to tile a background image, but it's not supported widely enough yet to be practical.)

The most common use of a tiling background image is a stripe going down the left side of a page. To make a stripe, create a GIF that is one pixel high and at least 1400 pixels wide. Make a portion of the left in one color, such as blue, and the rest of the image another color, such as white or pale yellow.

Interlaced GIFs and Progressive JPGs

An interlaced GIF will download in stages, so you'll see a rough version of the image, then a clearer version, then eventually the final GIF at 72 dpi. A non-interlaced GIF will download all at once, at 72 dpi, pouring onto the page as if you were pulling down a window shade. Progressive JPGs are similar to interlaced GIFs. Interlaced and progressive graphics take just as long to download as regular graphics.

Some people prefer interlaced or progressive images because they can see what the image is before it downloads completely, and then can decide whether to wait for the whole graphic to download. But it's really a matter of personal preference. Often a low resolution version of an image isn't clear enough for you to tell what it is anyway, and the viewer is simply greeted with a lousy-looking image before the 72 dpi image downloads.

Transparent GIFs

The GIF format allows you to choose which color or colors you wish to make transparent, allowing the Web page background to show through where those colors were. But there are two challenges with transparent GIFs: fuzzy halos, and transparencies occurring where they shouldn't.

Say you've made a logo that is a circle of night sky with a crescent moon in it (see examples below). The logo will be placed on a green background. So you take your logo and check the "transparent" option when saving it as a GIF. Then, on the Web page, it has a fuzzy halo around it, and the crescent moon, which is supposed to be white, is instead green because the background is showing through it. What to do?

With Fireworks or ImageReady, solving the problem of the green moon is easy. Place the logo on a transparent background, but fill the moon with white, so that when you save it as a GIF the program knows to make the background, but not the white moon, transparent. If you've already begun making a graphic with a white background, simply throw away the background layer (assuming the graphic is on a separate layer from the background).

Now, let's solve the halo effect. If you know you are going to put the logo on a green background, make that green the mat for the transparent GIF. (The default mat in ImageReady or Fireworks is white.) This will make the image anti-alias to the green, meaning that the program will create transitional colors between the logo color and the green background. In our example of the night sky logo, the blue logo was transitioning to white, so the logo had shades of light blue and white around it, which showed up as a halo against the green background.

The only truly transparent GIFs are rectangular or square, requiring no anti-aliasing into a background color.

Managing Your File Sizes

Low file size is your graphic's most important feature. The most important factors in making "skinny" graphics are the number of colors in GIFs, the compression/quality setting in JPGs, and the dimensions of the image. When you are first learning how to make Web graphics, stick with a small palette—limit yourself to two or three colors.

So how big should your files be? That depends on how many other graphics are on the page. Try to keep the entire Web page under 60k, or even lower if you can. Generally, small graphics such as navigational buttons ("navs") should be 1 or 2K. Try to keep other images under 10k. If the graphic is going to be the only one on the page and there isn't a lot of text, it can go up to 25 or even 35k, but most people don't want to wait for a graphic much bigger than that to download—Web users have less patience with graphics than they do with text.

Too many graphics, even small ones, clog up the connection—there are only so many files that can come through a connection at once. Avoid extraneous graphics, and don't make text into a graphic when plain text will do just fine.

If you want to use a spacer GIF, always use a 1x1 pixel, transparent GIF, and size it in the code (and always use the same one so it only has to download once).

Be frugal with the dimensions of your images. Remember that the average screen size is 15 inches. Even if download time wasn't a factor, few people would want their whole screen covered up with graphics when they are looking for information.

anti-alias

One of the most important techniques in making graphics and text easy to read and pleasing to the eye on-screen is anti-aliasing. Anti-aliasing is a cheaty way of getting round the low 72dpi resolution of the computer monitor and making objects appear as smooth as if they'd just stepped out of a 1200dpi printer (nearly).

Always anti-alias text except when the text is very small. This is to taste but I reckon on switching off anti-aliasing in Photoshop below about 12 points. If you're doing a lot with text this size, you really oughtn't be putting it in a graphic but formatting ASCII instead.

Using Images

If you decide to use pre-made images, you first need to make sure that it is legal to do so. If you want to scan an image from a book or magazine, then that image is covered by the publication's copyright and you must follow the appropriate laws for using those images. If you want to use clip art from a CD-ROM or other form of computer media, then it is necessary to check the licensing information that accompanies that media. If the image is already on the Internet, then you should contact the site's owner via e-mail to see if you can use the image on your site.

Creating Killer Web Sites: http://www.killersites.com/