ACRL News Issue (B) of College & Research Libraries 41 8 /C&RL News Top 10 ru les for creating graphics for the Web By Susan Ju rist The ins and outs o f designing great Web images N o 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 o f 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­ c ie n t W eb p ag es have m inimal 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 o f 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 a lw a y s start counting w ith 0) • Design fo r th e average u ser. The aver­ age user is looking at a 14" monitor and is us­ ing 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 in­ stalled personal computer user base, Mac us­ ers 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 • Sm aller is b etter. Period. The “why” should be obvious but, given some of the ex­ isting Web designs, it must not be. The first reason is that smaller loads faster. Even if you are sitting at a very fast PC conn ected by Figure 1. T he logo fo r UC’s GPO Gate. Su san Ju r is t is v isu al arts lib r a r ia n a t th e University o f C a lifo rn ia , S a n D iego; e-m a il: sjurist@ ucsd.edu mailto:sjurist@ucsd.edu July/August 1 9 9 6 /4 1 9 ethemet to a T3 line, waiting for a large graphic to load is not fun. If some o f your intended audience are sitting at home in front o f not- very-fast machines connected by a 14.4 mo­ dem, they are going to be more than bored, they are not going to wait to see what you have to show them. Smaller is also better because the average user is sitting in front o f that 14” screen. Yes, some o f 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 informa­ tion is off the screen, or design one that can’t be fully seen without scrolling. Figure 2 is the homepage for the University of Califon ia-San Diego Web site. A professional designer worked on the look and feel, but two o f 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 tw o-d im en sional size, also involved are file format, bit-depth, and type of image. We will talk about those issues below. Rule 2 • Y o u a re n o w d esign in g f o r a c o p u ter scre e n , n o t th e p rin ted page. Printed 8.5 x 11" pages are usually designed for a “por­ trait” 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 think­ ing horizontally. The first screen som eone comes to on a Web page is the most essential. m If that doesn’t grab them, they won’t scroll down to see what else you are offering. Rule 3 • Y ou h ave to sto p th in k in g in term s o f in ch e s ( o r c m f o r th e m e trica lly o r i ­ e n ted ). From now on, you have to start think­ ing in pixels, the dots o f light that make up an image on a screen. The average screen has a resolution o f 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 sys­ tem 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 de­ faults to an opening size of approxi­ mately 600 pixels, my rule o f 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 o f the page, my goal is 500 x 100 or less. Rules 4 a n d 5 • Y o u h a v e tw o f o r m a t c h o i c e s f o r grap h ics files— GIF and JPEG— and choosing which to use isn’t that difficult if you consider the following: bit d ep th im age typ e - 1 tra n s p a re n t 2 - 8 flat areas of yes color 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 de­ scribe up to 256 colors (or shades o f gray), and 24-bit images can display millions o f colors. In the real (analog) world, the eye (and color film) can see millions o f colors. If you have a F ig u re 2. T h e Univ. o f C alifornia-San D iego’s h o m ep ag e. File Type in-line GIF yes JPEG yes, but 4 2 0 /C&RL News 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 o f 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 -b it system , but they w on’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 o f your image should also affect your choice of file types. The GIF compression algorithm works best with flat areas o f color. A GIF file o f an image with a lot of dithering will be larger than a GIF file o f flat colors. A JPEG compression of a photographic­ quality image would be much smaller. For ex ­ ample, a GIF file shown in figure 3 is 26K while the corresponding JPEG file is only 17K, but a GIF file o f 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 o f off-color pixels) that become obvious in high-contrast, linear pic­ tures. The final, and often deciding reason to use GIF in-line images is if you need the effect of transparency where the background or back­ ground colors show through (used most often Figure 3. A blow up o f a gradient. on decorative text, like in the GPO Gate Ban­ ner). The JPEG format does not support trans­ parency. Rule 6 • C olor is n o t co lo r is n o t co lo r. 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 som eon e else sees. Even w hen 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 brows­ ers, 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 im age, but it m ay n o t save an y w ords at all. There are times to use images and icons and there are times not to use them. Although there are literally thousands o f free icons available for the taking on the Web, that doesn’t mean you should. Almost ev­ ery 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 wait­ ing for. Sometimes it is and sometimes it isn’t— it’s definitely a judgment call, and one that of­ ten separates the good pages from the bad. And remember, if you are going to use im­ ages as buttons, this is a good time to consider the user who is on a Lynx brow ser with a July/August 1 9 9 6/421 VT100 conn ection and ca n ’t see the pictures at all. Can that user still navigate your page without them? Rule 8 • T here is on e thing you ca n do to m ake y o u r im age ap p e a r to take less tim e to load th an 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 o f 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: Rule 9 • Y o u w ill n e e d g o o d g ra p h ic s so ft­ w are. 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 con­ sumer-level scanner ($20,000 or less) will ben­ efit from simple modification with good soft­ ware. And good does n ot 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 func­ tionality 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 graph­ ics well: Designing Web Graphics: How to Pre­ p a r e Im ages a n d M edia f o r the Web, by Lynda Weinman (New Riders, 1996). ■ Letters M ore ku do s for Ralph Russell To the Editor: No one was more delighted than I to hear that Ralph Russell has been named the 1996 ACRL Academic/Research Librarian of the Year (April 1996). I was disappointed, however, that C&RL News did not include in its article on Dr. Russell the main reason I think he de­ serves recognition. In my seven-year association with him, Dr. Russell has been a trailblazer in what I think is one o f the most important issues facing li­ braries today. He has always treated the sup­ port staff in his employ with the respect and dignity they deserve. In short, he treats them as the professionals they are. Thanks largely to Dr. Russell, support staff are fully involved in self-governance, library governance, and standing committees. I myself served as the chair o f a committee, elected by both staff and faculty within the committee. Dr. Russell also endeavors whenever pos­ sible to involve support staff in conferences and meetings outside o f our library, giving us a chance to meet and develop professional relationships with library employees from all over the United States. The relationships be­ tween library faculty and staff at Georgia State are collegial, not adversarial. Dr. Russell’s li­ brary is a wonderful place to work, and I am proud to know him.— Wendy S. Wilmoth, Mobile, A labam a (formerly assistant b e a d o f access services, Georgia State University) Ed. note: C&RL News welcomes y ou r signed, typed comments on recent content in ou r pages or on matters o f g en eral interest to the a c a ­ dem ic o r research library profession. Letters m ay b e edited f o r space constraints. Send y ou r letters to: The Editor, C&RL News, 5 0 E. Hu­ ron St., Chicago, IL 60611-2795: f a x : (312) 280-2520; e-mail: medavis@ ala.org. ■ mailto:medavis@ala.org