ACRL College & Research Libraries News

Association of College & Research Libraries

Top 10 rules for creating graphics for the Web

By Susan Jurist

The ins and outs of designing great Web images

No matter how many words a picture may save you, putting pictures on a Web page does more than save typing; it creates a look and an attitude that says who you are and what you will be delivering. In essence, putting im- ages on a Web page is creating an advertise- ment that says “look at me, I’m worth looking at.”

Watch shoppers in a supermarket. Despite the lower-priced generic items, how many shop- pers actually buy the simply packaged non- brands? Not that many, when you see how many more advertised, creatively packaged items are on the shelf and paid for at the cash register.

Now you are probably thinking that a li- brary is not the same as a box of laundry deter- gent, and you are right, but the current genera- tion uses the Web to decide everything from what movie to see to what school to go to. Students will look at a university’s Web page to decide if it would be an exciting place to spend the next four years. As librarians, we want those same students to look at the infor- mation we are making available, but first we have to get them to see that there is informa- tion. They will stop at an arresting Web page— they won’t read yards of plain text.

You can have a great looking Web page whether or not you have a computer artist on staff, although those of you with some art background will have an easier time than those without it.

Some of the most elegant and effi- cient Web pages have minimal graphics. One of my favorite Web designs is one I did for GPO Gate (figure 1)— it’s simple yet looks good. The real impact comes from the font, Hiroshige, as much as it does from the design of the Capitol.

Creating sharp graphics for the Web—sharp in the sense of grabs your attention, as well as the traditional sharp vs. fuzzy distinction—can be done. It takes time and patience—if you have talent, that will help—and following the top 10 rules comes first.

Rule 0 (computers always start counting with 0)

• Design for the average user.The average user is looking at a 14" monitor and is using the Netscape browser. Unless you have a special audience in mind, don’t design for the highest, or lowest, common denominator. Go average and you should be safe for most users.

The average user is using either a PC or a Mac. While Macs are less than 10% of the installed personal computer user base, Mac users are proportionally more likely to use the Net. If you use only one system, and most of us do, always remember the other exists and the other is different.

Rule 1

• Smaller is better. Period.The “why” should be obvious but, given some of the existing Web designs, it must not be. The first reason is that smaller loads faster. Even if you are sitting at a very fast PC connected by ethemet to a T3 line, waiting for a large graphic to load is not fun. If some of your intended audience are sitting at home in front of not- very-fast machines connected by a 14.4 modem, they are going to be more than bored, they are not going to wait to see what you have to show them.

Figure 1. The logo for UC’s GPO Gate.

Susan Jurist is visual arts librarian at the University of California, San Diego; e-mail: sjurist@ucsd.edu

Smaller is also better because the average user is sitting in front of that 14” screen. Yes, some of us doing the designing are using 17" or 20" screens, but we are the minority. You don’t want to design a graphic that takes up so much screen real estate that essential information is off the screen, or design one that can’t be fully seen without scrolling.

Figure 2. The Univ. of California-San Diego’s homepage.

Figure 2 is the homepage for the University of Califomia-San Diego Web site. A professional designer worked on the look and feel, but two of us then worked for one full week to take the designer’s ideas and fit them on one screen. It wasn’t easy, but it was worth the effort.

Smaller for a digital image does not mean just two-dimensional size, also involved are file format, bit-depth, and type of image. We will talk about those issues below.

Rule 2

• You are now designing for a computer screen, not the printed page.Printed 8.5 x 11" pages are usually designed for a “portrait” view in which the height is greater than the width. Computer screens on the other hand are “landscape”—the width is greater than the height. So stop thinking vertically and start thinking horizontally. The first screen someone comes to on a Web page is the most essential. If that doesn’t grab them, they won’t scroll down to see what else you are offering.

Rule 3

• You have to stop thinking in terms of inches (or cm for the metrically oriented).From now on, you have to start thinking in pixels, the dots of light that make up an image on a screen. The average screen has a resolution of 640 x 480 pixels, and that should be your new frame of reference. But you don’t have the whole screen as your canvas. Both the browser and the operating system take up screen real estate too. With Netscape, assuming you have the square buttons for home, etc., and the location bar, the overhead is 124 pixels in height and 21 pixels in width. That means the maximum any image should be is 619 x 356. But since the Netscape browser defaults to an opening size of approximately 600 pixels, my rule of thumb (the one I use now, don’t look at my earlier efforts) is to create images no larger than 600 x 400. For banners across the top of the page, my goal is 500 x 100 or less.

Rules 4 and 5

• You have two format choices for graphics files—GIF and JPEG—and choosing which to use isn’t that difficult if you consider the following:

File Type	in-line	bit depth	image type - 1	transparent
GIF	yes	2-8	flat areas of color	yes
JPEG	yes, but	24	photographic	no

In-line images are those that appear on the screen with html-generated text. All browsers can display GIF in-line images, and most, but not all, can display JPEG in-line images. JPEG in-line images will crash some browsers, and that should be taken into consideration.

Bit-depth refers literally to how many bits each pixel has to describe a color; 2-bit images are black and white, an 8-bit image can describe up to 256 colors (or shades of gray), and 24-bit images can display millions of colors.

In the real (analog) world, the eye (and color film) can see millions of colors. If you have a color photograph or a color painting, you would want millions of colors for your file as well.

But our friend the average user has a moni- tor that can show only 8-bit color. When an 8- bit monitor displays a 24-bit image (or when you change a 24-bit image to 8-bit), the soft- ware “dithers” the 256 allowable colors to ap- proximate the colors it can’t show you. The dithering is a pattern, or random pattern, that combines two or more colors to simulate a third and can be quite distracting. Figure 3 is a two- to-one blowup of a gradient. The image on the left is the original gradient, and a dithered version of the same gradient is on the right.

The image on the left looks smooth, but the one on the right has obvious noise that would be distracting if this was, for example, the sky in a photograph.

All Net browser software will dither a 24-bit image for an 8-bit system, but they won’t do as good a job as graphics software like Adobe PhotoShop. In the past, I used only 8-bit GIF images on my Web pages so I could control the dithering and palette trans- formation. Now as more people are getting higher-end systems, I use JPEG for images with a large color range that are the primary focus of a Web page.

The overall characteristics of your image should also affect your choice of file types. The GIF compression algorithm works best with flat areas of color. A GIF file of an image with a lot of dithering will be larger than a GIF file of flat colors. A JPEG compression of a photographicquality image would be much smaller. For example, a GIF file shown in figure 3 is 26K while the corresponding JPEG file is only 17K, but a GIF file of the same size, filled with flat color, is 17K as well. Remember that for loading times, smaller really is better.

JPEG, on the other hand, is not the best for images with flat areas of color or high contrast. The JPEG compression algorithm tends to leave “artifacts” (small areas of off-color pixels) that become obvious in high-contrast, linear pictures.

The final, and often deciding reason to use GIF in-line images is if you need the effect of transparency where the background or background colors show through (used most often on decorative text, like in the GPO Gate Ban- ner). The JPEG format does not support trans- parency.

Figure 3. A blowup of a gradient.

Rule 6

• Color is not color is not color.You’ve created this gorgeous color scheme for your Web pages on your PC. The color is subtle but still high concept, the combinations make your heart sing. You tell everyone you know the URL. One of your friends is on a Mac and tells you it’s the gaudiest thing she’s ever seen. An- other friend, who also has a PC, says the colors all clash. Are they wrong? No. Every system displays colors differ- ently. Not only are Mac sys- tem colors (the default 256 color palette) different from the PC system colors, but most of the browsers have de- fault palettes that are differ- ent from both (and from each other). You cannot guarantee that the colors you see are the colors someone else sees. Even when using defined “safe” colors—colors that are supposed to be the same on both platforms—you can get into trouble.

The best thing to do is to put some Web pages up and then look at them on both a Mac and a PC. If you have access to different browsers, you might want to check them too, but it isn’t worth getting an America Online account just to see how something looks on it.

Rule 7

• An image is an image, but it may not save any words at all.There are times to use images and icons and there are times not to use them. Although there are literally thousands of free icons available for the taking on the Web, that doesn’t mean you should. Almost every iconic button in use on the Web has words next to it explaining what it is. Which is not to say you should never use decorative buttons, arrows, bullets, etc., but use them with care and ask yourself first if this image is worth waiting for. Sometimes it is and sometimes it isn’t— it’s definitely a judgment call, and one that often separates the good pages from the bad.

And remember, if you are going to use images as buttons, this is a good time to consider the user who is on a Lynx browser with a VT100 connection and can’t see the pictures at all. Can that user still navigate your page without them?

Rule 8

• There is one thing you can do to make your image appear to take less time to load than it really does(because we both know you are going to ignore my guidelines and make images that are too big anyway) and that is in the html statement for in-line graphics. If you know the size in pixels of your image and you add that information, the text will be able to load more quickly because the browser will know how much space it has to leave for each picture. For example:

<img width=300 height=75 src=“chaco.gif”>

Rule 9

• You will need good graphics software.This last rule is so important I almost put it first. Any image that you create online, copy from a Photo-CD, or scan in on a consumer-level scanner ($20,000 or less) will benefit from simple modification with good software. And good does not mean the paint software that comes with Windows. My favor- ite application, and one I cannot recommend highly enough, is Adobe Photoshop, but there are other software packages with similar functionality that you can choose from. Basically you want software that will let you modify and correct digital images as well as create images from scratch. You should be able to type text in it and be able to save files in either JPEG or GIF formats. Some software now have built-in programs for creating transparent images and creating interlaced GIFs (the images that come up in several passes, gradually getting sharper), though there is shareware available which will do those conversions as well.

Whatever package you choose, take the time to learn and use it. There is nothing that will replace experience, and there is no shortcut you can take to get there. A person without art background but with a good understanding of the software can make better graphics than someone who knows art but doesn’t know the digital brush from the digital pencil. Good luck.

Further reading

I’ve seen one book that explains Web graphics well: Designing Web Graphics: How to Prepare Images and Media for the Web, by Lynda Weinman (New Riders, 1996). ■