.

Web Design, Part 4

Site Graphics

5 April 2000
Dan Knight

Unless you know your visitors have browsers that support Flash, PNG, QuickTime, and other recent innovations, stick to JPEG and GIF images on your site. Knowing the audience of Low End Mac includes a lot of people surfing on 3.0 and earlier browsers, you won't find any other graphic formats here.

A good server and log analysis program can tell you more about your site than you'd learn from an online survey, since it counts every visitor. Failing that, some banner exchanges (including MyBannerSwap.com) can track that information for you. According to their data, the following browsers were used when visiting my home page and displaying their banner:

• Netscape 4.x, 49.8%
• Internet Explorer 4.x, 21.6%
• Netscape 3.x, 4.0%
• Internet Explorer 3.x, 0.7%
• Internet Explorer 2.x, 0.7%
• Netscape 2.x, 0.6%
• Other browsers, 2.4%

I'm completely surprised to see IE 5.x didn't register at all, since it's been on PCs for over a year and on Macs for the past week or so. Maybe those visitors are all included with the IE 4.x visitors.

The other important thing to know is what computers your visitors are using, since IE 4.x for the Mac doesn't support PNG images, while the Windows version does.

• Macintosh, 43.1%
• Windows 98, 13.6%
• Windows NT, 10.5%
• Windows 95, 10.2%
• Other, 22.5%

These are just indicators, since they don't evaluate the entire site, but it lets me know that maybe half the visitors to Low End Mac are using browsers with no PNG support. That's one reason you won't find PNGs here. I need to serve the needs of my readership. (Based on older stats, I know the mix on my site is about 55% Mac, 40% Windows, 5% other.)

GIF

The graphics you'll see most often on the Web are GIFs (for Graphic Interchange Format). These images can be any size and can display up to 256 different colors. The format supports animation, so almost every animated banner ad you see will be a GIF.

GIFs can be pretty compact, supporting as few as 2 colors (black and white), as many as 256, and any value in between. You might be surprised at how few colors can make up a stunning graphic. I've seen one photograph of a rose using 64 colors that I would have sworn had to be a 16-bit image.

The key to GIFs is knowing when to use them and how many colors to use. GIFs work best for graphics: banners, logos, and other things with large areas of strong color. They sometimes work for photographs, but JPEGs (below) usually do a better job there.

Creating a GIF

The current Low End Mac logo started out as a Photoshop image with multiple layers. The bottom layer is white. The next layer contains the words Low End Mac in black using the Bodega Sans Black typeface with antialiasing turned on. Because I didn't like the amount of space between the words, I duplicated this layer three times. On one layer, I removed everything except the word Low. On the next, I only left End. On the third, Mac was the only part retained. Then, using the nudge tool, I moved Low to the right one or two pixels, Mac to the left by the same amount, and then flattened the three layers into one, since I don't expect to ever change that positioning.

On top of these two layers comes the logo layer, which is simply the letters LEM in my current theme color. (I have several logo layers, each with a different theme color, making it easy to alternate the look over time.) The letters are again Bodega Sans Black with antialiasing enabled, but in a much larger size and in color.

As with the second layer, I create two duplicates of the logo layer, leaving only one letter on each, nudge them closer together, and then flatten them. The end result is three active layers: a white background layer, one with Low End Mac in black, and one with LEM in color. Now I go in and clean up the edges of the letters LEM to make them as single-colored as possible.

The next step is to export the artwork as a GIF image. At this point, the image has 33 colors, so I first export it as a 32-color GIF (top logo). It's very attractive and uses 2,036 bytes. Next, I export it as a 16-color GIF (above left), which looks pretty sharp, too. It's also smaller at just 1,850 bytes.

The third image (above right) goes one step further, using only 8 colors and occupying only 1,689 bytes of space. And finally, I drop to 4 colors (left), which is an even more compact 1,474 bytes.

Then I look at the images. It's hard to distinguish the first three. The fourth, with only 4 bits, isn't too bad, but does show some stair steps on the angled part of the letter M. So I rule that one out, choosing the 8 color image as offering the best compromise of sharpness and file size. It's only 225 bytes larger than the jagged 4 color image, but also 347 bytes smaller than the 32 color image.

One key is not to depend on the Photoshop preview for GIFs. Save the image, then open it up next to the original.

Your results will vary based on the number of colors in your image. Color gradients need a lot more colors to look good. With most images using one on a white background, 8 colors will be perfect. Going to two colors usually means at least a 16 color palette, and often 32. Three or more colors will often look best in 64 color mode. Those are starting points. I suggest you always try going one step above and below that, then visually compare the output.

The key is an image that's both pleasing to the eye and loads quickly -- a small percentage of surfers are still using 14.4 modems.

JPEGs

Most photographs you see on the web are JPEGs, which are not limited to a 256-color palette like GIFs. The key with JPEGs is balancing sharpness, artifacts, and file size. In fact, JPEG is the native format of most of today's digital cameras.

I brought my Canon PowerShot A50 on vacation in late January, the week at Disneyworld where we were glad to have our Michigan winter gear -- it was cold! The pictures below were originally shot on the A50, cropped and reduced in Photoshop, and exported as JPEGs using GraphicConverter.

I have not done anything to color balance, although I have slightly sharpened the image using the poorly named "unsharp mask" filter.

JPEG at 85%	JPEG at 50%
256 color GIF	JPEG at 15%

I include the 15% image mostly to show the danger of going overboard in compressing JPEGs. The image in only 4,668 bytes, but it looks like something off a heavily used videotape. The 50% image isn't bad, and it's just 8,372 bytes. Compared with the 15,151-byte 85% image, it loses some sharpness, but it's not bad. The 85% image is quite good, but significantly larger than the 50% image.

Overall, I've generally found 60-75% settings produce the best compromise of image quality and file size, but this will vary from image to image. If you're going to be placing family photos on the web, find that sweet spot where quality and image size complement each other -- otherwise the images will take far too long to load. (The original Photoshop image is 148K, and a 100% setting on JPEG results in a 48K image.)

The 256 color GIF image is shown primarily because this image does quite well with a limited color palette, probably on par with a 60-70% JPEG. On the other hand, it also demonstrates why JPEG is generally used for photos instead of GIF: this image is 22,506 bytes in size!

Conclusion

The key to site graphics is knowing what formats your visitors can see, knowing when to use each format, and then choosing the settings that will provide the best balance of file size and image quality.

<this article available in a printer-friendly version>

Recent articles on Online Tech Journal

• Web design, part 5: Web content to go, 5/8. How to adapt web pages for the handheld computer (Palm, WinCE) user.
• Web design, part 4: Site graphics
• Setting up a cable or DSL router
• Web design, Cascading Style Sheets
• G4 insignificantly superior to G3
• Web design: Site organization
• Web design: Using include files
• Home, small network backup solutions
• Installing OS 8.1
• PDS, the processor direct slot
• Monitor Dot Pitch
• Screen Size and Resolution
• Why internal FireWire on G4?
• The Truth About USB Speed
• Hard Drives
• How Fast Is Fast?

<back to Online Tech Journal>

.

Macintosh
Lisa/Macintosh XL
Compact
Mac II
Mac LC
PowerBook (68k)
Performa
500 Series
Centris/Quadra
Power Mac
PowerBook (PPC)
Maclones
Earliest Maclones
DayStar Genesis
Motorola StarMax
Power Computing
Umax SuperMac

Email Lists
Compact Macs
Vintage Macs
Quadlist (68040)
PowerBooks
1st PowerMacs
PCI PowerMacs
SuperMacs
Mac Webmasters
more lists

Support LEM
MacMall
Outpost.com
Software Outlet
Amazon.com
Mac Book Source
MobShop.com
DVD Express
CoolVCD.com
MusicForce
AuctionMac
Sponsor Us

.