|
|
by Dick Oliver
You don't have to be an artist to put high-impact graphics and creative type on your Web site. You don't need to spend hundreds or thousands of dollars on software, either. In this chapter, I show you the latest techniques to make the static elements on your pages look great and display quickly. I assume you are already familiar with HTML, though I do explain the syntax for implementing several advanced HTML tricks.
The best place to begin gathering inspiration and raw materials for your new improved Web pages is the World Wide Web itself. When you see a fun or impressive graphic site, imagine what it would look like without the graphics, and think about how its creators made the images and coded any fancy text formatting.
Figure 16.1, the Entertainment Radio Network Web site, is the kind of site many Web wizards-to-be lust after: lots of highly polished graphics, an animated masthead that pieces itself together, and a professional announcer's voice that automatically welcomes you to the site if you have a sound card.
Figure 16.2, the Modern Ferrets home page, is pretty nifty, too-but far less polished and more than a little hokey. At least, that might be what you think when you see these two pages next to one another in a book. But the experience when you log on to these sites with a typical 28.8 Kbps modem is another story; 60 seconds after you log on to the Modern Ferrets home page, you will have read intriguing descriptions of the magazine, seen several photos of cute ferrets, and probably moved on to enjoy an illustrated ferret fairy tale or tips on keeping your furry friend well-groomed. But after 60 loooooong seconds at the "impressive" site, you will still be drumming your fingers waiting for the oh-so-prettily-rendered word Talk to slowly pour onto the screen and wondering what the name of the site might be as you watch all those puzzle tiles at the top of the screen move around.
The professional Web development team members who got paid big bucks for designing the Entertainment Radio Network site in Figure 16.1 knew that part of their job was to target people who would have the bandwidth to handle long audio downloads. A snazzy but slow site was the perfect choice for them.
The two young self-publishers who put together the Modern Ferrets home page in Figure 16.2 knew they didn't have to spend big money or long hours to build their home page. They also knew that most of their readers were probably low-budget modem users, so the speed of the site was important. The result may not be cutting-edge multimedia, but it does illustrate some important points that apply to all good graphic sites:
As you explore the far reaches of contemporary Web publishing, keep in mind the principles that make the Modern Ferrets site serve its purpose well: simplicity, speed, and reusability. These principles become even more important as you invest more time and energy into creating a modern Web site.
To create effective Web sites, you need to know the needs of your intended audience and carefully balance coolness with quickness. In this chapter, I show you how to get the flavor of a high-end site without using large amounts of bandwidth and development time.
One of the best ways to save time in creating graphics files is to avoid creating them altogether. With the entire World Wide Web at your fingertips, you have access to thousands of images and animations. Any graphic you see on any site is instantly reusable, as soon as the copyright holder grants (or sells) you the right to copy it. Because almost all Web pages include the e-mail address of their creators, asking permission to download and adopt a piece of artwork is usually quick and easy.
The familiar Web search engines and directories such as Yahoo! (http://www.yahoo.com/), Lycos (http://lycos.cs.cmu.edu), and InfoSeek (http://www.infoseek.com/) can become a gold mine of graphics images by leading you to sites related to your own theme. They can also help you discover the oodles of sites specifically dedicated to providing free and cheap access to reusable media collections.
A Lycos search for "background textures" turns up, among many other sites, Gini Schmitz's Texture and Background Wonderland, located at http://netletter.com/cameo/hotlist/hotlist.htm and pictured in Figure 16.3. This hotlist is one of my favorites, with links to consistently high-quality sites for finding great background tiles and graphic accents for Web pages. (Gini Schmitz is also the artist who created many of the graphics on the CD-ROM that comes with this book. These graphics are discussed later in this chapter.)
On the CD-ROM that comes with this book, you'll find live links to many other graphics and multimedia hotlists and hot sites. Links to all the major search engines are on there, too; just in case you don't already have them all on your own bookmark list.
Grabbing a graphic from a Web page is as simple as clicking it with the right mouse button and then picking Save this image as in Netscape Navigator or Save Picture as in Microsoft Internet Explorer (refer to Figure 16.3).
With Microsoft Internet Explorer, extracting a background image from a page is just as easy. Right-click the image and pick Save Background As. The procedure for grabbing a background image isn't quite so obvious in Netscape Navigator and most other Web browsers:
If you're looking for something so specific that you can guess part of the file name or title, you can use the Internet indexing systems called Archie and Veronica to find graphics files that may not be accessible through the World Wide Web.
Even some experienced Webmasters have never used Archie and Veronica, so I'll explain the basics of using them to find graphics. I'll also let you in on the secret codes that enable you to limit your search to only graphics files.
| Note |
In the old days, you had to have special programs to access Archie and Veronica, but nowadays you can access them easily through the same browser program you use for the World Wide Web. Some advanced users still prefer the old-style search programs, but I'll explain how to do it without them. |
Archie is a comprehensive, freely accessible, and automatically searchable index of every file accessible through public File Transfer Protocol (FTP). The bad news is that Archie only knows the names of the files and the names of the disk directories they're stored in. The files don't have any text description attached, so a picture of five elephants juggling on bicycles might be called ejob5.jpg. You could search Archie for the text elephant, juggle, and bicycle all day and not find the picture.
The good news is that people are generally nice, and they often give files descriptive names. There very well might be a picture file named elephants-juggling.gif stored right next to ejob5.jpg. The even better news is that many images have such specific content that you can easily guess what somebody would name the image file. If you were looking for an image of The Three Stooges TV show, an Archie search for the word stooges would be a pretty good bet. Archie also indexes directory names, so you may discover a whole directory full of files related to your search topic.
To search Archie, start by pointing your browser to the list of all Archie servers at
http://pubweb.nexor.co.uk/public/Archie/servers.htmlChoose the Archie server nearest you or one located in a time zone where it is night and few local people will be using it.
To run a search, click the What would you like to search for? box and type the letters you want to search for. For the search type, you'll almost always want Case Insensitive Substring Match unless you know the exact name of the file you're looking for. Click the Submit button, and in a few seconds (sometimes longer at busy times), you will have a list of clickable links to every publicly archived file in the world containing the letters you searched for in its name.
The image files that Archie finds are almost always hiding in a long list of other types of files with similar names. Of course, you can tell Archie to look for images containing the letters gif or JPG if you want to increase the chances of hitting a graphics file. But wouldn't it be nice if you could just say, "Just find me image files, nothing else"? And while you're making out a wish list, it would also be handy if the files had short descriptions attached to them so you could search the descriptions for keywords, too.
Veronica is another master searchable index of public files. Like Archie, all Veronica needs from you is a few letters or words to search for, and away she goes to fetch every file she can find that matches your query. Most of the files Archie has access to are also accessible through Veronica.
Often, however, Veronica has access to longer descriptions of the files than Archie does. And more importantly, Veronica knows what type of file she's looking at and tells you by displaying the appropriate icon on the search result menu. Veronica searches often turn up thousands of matching files, only 200 or so of which are shown unless you request to see more. Even with handy icons to guide you, weeding through 200 files or more for the desired images is no fun.
| Tip |
You may notice that the search list Veronica comes up with is titled Gopher menu. The file system that Veronica indexes is called Gopher or sometimes GopherSpace. Gopher itself has been largely superseded by the World Wide Web, so you probably won't have much reason to access Gopher menus directly unless you're doing a Veronica search. |
To save time, you can tell Veronica to find just graphics files and ignore everything else by entering -tIg (that's hyphen, small t, capital I, small g) as one of the words to search for. This code will command Veronica to show you only graphics.
The following example of a Veronica search should give you an idea of how the process works. First, pick a Veronica server from the list at
http://www.scs.unr.edu/Veronica.htmlThe Veronica search form (see Figure 16.6) is pretty basic. Just type the keywords and hit the Enter key. Along with the words to search for (which can be entered in any order), you can also give special commands to Veronica. For more information on the command language, choose the How to Compose Veronica Queries link from the Veronica server list page. As mentioned previously, if you enter -tIg as if it were one of your search words, Veronica will return only graphics images and ignore all other file types. You may also include menus and Web pages with the command -tIgh1 (a hyphen followed by the letters tIgh and the number 1) instead of just -tIg.
Figure 16.6 : Veronica offers an express lane down the yellow brick road.
Figure 16.6 shows a Veronica query for images whose names or descriptions include the letters wizard. Veronica responds by building the Gopher menu shown in Figure 16.7, which leads to several images along the lines of Figure 16.8.
In this section, I explain some tricks that savvy Webmasters like you can use to maximize the impact and speed of the graphics on your pages. These techniques are illustrated with Paint Shop Pro, a shareware Windows graphics editor that comes on the CD-ROM with this book. If you haven't already installed Paint Shop Pro, you might want to do it before reading the rest of this chapter so you can play with the techniques as you go along.
| Note |
The Paint Shop Pro software on the CD-ROM is a fully functional shareware evaluation copy. If you agree with me that it's essential for working with Web page images, please be prompt about sending the $69 registration fee to the program's creators at JASC Software. (The address is in the online help in the software.) I'm confident that you're not going to find any other graphics software even close to the power and usability of Paint Shop Pro for anywhere near $69. (I have all the leading super-expensive commercial graphics programs from Photoshop on down, and Paint Shop Pro is the best by far for day-to-day work with Web graphics.) |
There are so many ways to produce images with Paint Shop Pro, I can't even begin to explain them all. In this chapter and the next, I do offer a quick overview of some not-so-obvious techniques that are particularly well-suited for Web page graphics, but they barely scratch the surface of what you can do. You'll have to explore the rest on your own.
Make sure you check out the Deformation browser and Filter browser on the Image menu. These browsers give you access to a wide range of cool effects such as embossing, warping, and smearing, which are demonstrated by some of the images in this chapter. You should also make good use of the text tool, which can use any TrueType or Postscript font on your system to make fancy graphic headings for your Web pages.
By setting a color in your gif image to be transparent, you can make nonrectangular graphics look good over any background color or background image tile. To make a color in a gif file transparent, follow these steps in Paint Shop Pro:
| Tip |
For a masked preview of which part of the image will be transparent, select Colors | Edit Palette and change the transparent palette color to some outrageous fluorescent green or another highly visible hue. Or you may want to set it to the dominant color of the background you plan to place the image over to get an idea of how the image will look on the page. |
Background tiling started as another unofficial extension to HTML, but it has quickly gained near-universal support. This powerful feature enables you to specify an image file to be used as a wallpaper tile behind all text and images in a document. It is implemented as an attribute in the <BODY> tag like in the following:
<BODY BACKGROUND="blues.gif"> (document text goes here) </BODY>As Figure 16.10 shows, background tiling can be combined with transparent images to add flair to your pages. Be warned, however, that some browsers don't always handle backgrounds and transparent images correctly. Background tiling also can significantly increase the time it takes for a page to download and display if you're not careful to keep your background image files reasonably small.
Figure 16.10: A good background can add color and interest to transparent graphics.
A faster way to wield some control over the background in Netscape is to use the body color extensions. These extensions enable you to specify a color for the background, text, and hotlinks. No extra images must be loaded or processed, so images still download and display at maximum speed.
You can specify colors by name or number. You can specify the basic colors by using the English words blue, green, purple, and so forth. To make the background blue, the text white, and the links yellow, for example, you would use the following:
<BODY BGCOLOR="blue" TEXT="white" LINK="yellow">You can also specify a color for links that have already been visited with ALINK= and a color for links to blink when they're activated with VLINK=.
| Tip |
If you set VLINK and BGCOLOR to the same color on a home page or hotlist, every link the visitor has already been to seems to disappear! |
You can mix your own custom colors in the format #rrggbb, where rr, gg, and bb are a two-digit hexadecimal values for the red, green, and blue components of the color. If you're not familiar with hexadecimal numbers, don't sweat it: just remember that FF is the maximum, 00 is the minimum, and 88 is in the middle. To make the background white, the text black, and the links blue, you would say
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF">Use custom colors with caution, however, because they can make many computers display distracting dithered patterns behind text. You should generally stick to the basic named colors that almost every computer will show without any dithering: black, white, red, green, blue, yellow, magenta, and cyan. Aqua, fuchsia, lime, maroon, navy, olive, gray, silver, and teal are also valid color names, but they are not as reliable as the pure colors.
| Note |
You can change the text colors at any point during the document with the FONT COLOR= attribute. For example, to make the word CAUTION appear red, you could say <FONT COLOR="red">CAUTION:</FONT> this page is HOT! You'll find out much more about the <FONT> tag in Chapter 18, "Creative Uses of Text, Fonts, and Type." |
Two forces are always at odds when you post graphics and multimedia on the Net. Your eyes and ears want everything to be as detailed and accurate as possible, but your clock and wallet want files to be as small as possible. Intricate, colorful graphics mean big file sizes, which can take a long time to transfer even over a fast connection. Add smooth animation and high-quality sound, and file sizes get truly astronomical. As a result, quality usually has to take a back seat to file size, especially now that most people on the Net are using inexpensive modems and not high-speed university trunk lines.
So how do you find the right balance? And how do you maximize the quality of your presentation while minimizing file size? To make these choices, you need to understand what your options are and how color depth and resolution work together to create a subjective sense of quality. The next few paragraphs contain a concise summary of what you need to know about color and resolution. Quality and size issues for sound, animation, and interactive media are also discussed.
The vertical and horizontal resolutions are the height and width of the image, measured in pixels (the individual dots that make up a digital image). Color depth is the number of bits of information used to describe each pixel. Each bit can have two values, so two bits can have four unique values (252), four bits can have 16 unique values (2525252), and so on. For most images you put on the Net, a color lookup table or palette is included in the image file to specify which color corresponds to each value.
If you use enough bits per pixel, however, you can describe the color in terms of its red, green, and blue color components, and you don't need a color lookup table. Most often, these true color images use 24 bits per pixel, which provide more colors than the human eye can distinguish. Some graphics cards use only 15, 16, or 18 bits to display true color images, but the graphics files themselves usually include all 24 bits of color information even if you can't see them all on your graphics card.
All these factors together determine the overall size of the image file. Table 16.1 shows all the common color depths, resolutions, and the resulting theoretical size of the image, including the color lookup table. Before you dive into the long list of numbers in Table 16.1, take a look at Figures 16.11 through 16.16. Figures 16.11 through 16.13 show an image at one size, but with increasing color depth (here the images are of course approximated in gray-the differences would be even more pronounced in full color). Figures 16.14 through 16.16 show a black-and-white image at increasing horizontal and vertical resolution.
Figure 16.11: An image using two colors.
Figure 16.12: The same image using 16 colors.
Figure 16.13: The same image using 256 colors.
Figure 16.14: A two-color image at a resolution of 160 x 120 pixels.
Figure 16.15: A two-color image at a resolution of 320 X 240 pixels.
Figure 16.16: A two-color image at a resolution of 640
X 480 pixels.
| Resolution | |||||
| 1605120 pixels | |||||
| 3205200 pixels | |||||
| 6405480 pixels | |||||
| 8005600 pixels | |||||
| 10245768 pixels | |||||
To estimate how long it will typically take for your images to download, you can assume that a standard 28.8 Kbps modem with a good connection to a Net site can pull about two kilobytes (that is, 2 K) per second on average.
Remember, though, that many people are still accessing the Net through 14.4 Kbps or slower modems. As a general rule, any Web page that includes more than 50 K worth of graphics should only be accessed from another, less graphics-intensive page. Links to the graphics-intensive page should warn the readers so they can turn off their Web browsers' automatic graphics downloading if they are using a slow dial-up modem connection.
As Table 16.1 suggests, one of the most effective ways to reduce the download time for an image is to reduce the number of colors. In Paint Shop Pro, you can do this by selecting Colors | Reduce Color Depth. (Most other graphics programs have a similar option.) The software will automatically find the best palette of 16 or 256 colors for approximating the full range of colors in the image.
When you reduce the number of colors in an image, you will see a dialog box with several choices (see Figure 16.17). For Web page images, you will almost always want to choose an Optimized or Weighted palette and Nearest Color instead of Error Diffusion or any form of dithering.
| Tip |
Dithering (called error diffusion in Paint Shop Pro) means using random dots or patterns to intermix palette colors. This process can make images look better in some cases, but you should usually avoid it for Web page graphics. It substantially increases the information complexity of an image, and that almost always results in much larger file sizes and slower downloads. So, listen to your Great Uncle Oliver and "don't dither!" |
Most images will actually take much less space on your hard drive than Table 16.1 indicates because they are stored in a compressed format. How much an image can be compressed depends on the image. A truly random sea of static image wouldn't compress at all, and a solid color image would compress to well under a kilobyte no matter what its resolution. Generally the gif images most often found on the Net achieve somewhere around 4:1 compression (meaning that a file would typically take up a quarter as much space as is listed in Table 16.1).
JPEG compression, however, can squeeze images even smaller. They'll usually start showing noticeable degradation at compression ratios greater than 4:1, but true color photographic images will sometimes tolerate JPEG compression as tight as 10:1 without too much uglification. You can control the JPEG compression ratio in many graphics programs, including Paint Shop Pro. Figure 16.18 shows the JPEG Save As Options dialog box. You can control the compression ratio for saving JPEG files by adjusting the compression level setting between 1 percent (low quality, small file size) and 99 percent (high quality, large file size).
Figures 16.19 through 16.22 compare the results of saving a graphics file at various JPEG compression quality settings (keep in mind that the differences are more obvious in color), and Table 16.2 indicates how these settings affect the file size. If you were surfing the Net, would you rather wait nearly half a minute to see this image in its full glory, or watch it pop onto your screen at 75 percent quality in less than six seconds? That's the kind of difference that makes JPEG a hard format to beat for storing true color graphics on the Net. Unfortunately, images that are larger than this 3205200 example usually don't compress quite as efficiently.
Figure 16.19: A scanned photo saved as a JPEG file at 95 percent compression quality.
Figure 16.20: A scanned photo saved as a JPEG file at 75 percent compression quality.
Figure 16.21: A scanned photo saved as a JPEG file at 50 percent compression quality.
Figure 16.22: A scanned photo saved as a JPEG file at
25 percent compression quality.
| Actual File Format | Transfe Time | |||
| Uncompressed TGA | 95 seconds | |||
| Compressed gif | 26 seconds | |||
| "Near perfect" JPEG | 27 seconds | |||
| 95 percent JPEG (see Figure 16.19) | 16 seconds | |||
| 75 percent JPEG (see Figure 16.20) | 6 seconds | |||
| 50 percent JPEG (see Figure 16.21) | 4 seconds | |||
| 25 percent JPEG (see Figure 16.22) | 2 seconds |
After you've compressed your files as tightly as possible, what more can you do to make them download and display faster? A lot! There are three ways to make a rough draft of an image appear well before the entire image is finished downloading. This can have a dramatic psychological effect, making the images seem to come up almost instantly even though they may take quite a while to completely finish downloading.
The most popular way to get an illusion of speed is to use a special kind of gif file called an interlaced gif. In a noninterlaced image file, the top line of pixels is stored first, and then the next line down is stored, and then the next line after that, and so on. In an interlaced file, only every other line is saved and then the missing lines are filled in at the end of the file. Most Web browsers will display interlaced gifs as they are being read, so a rough draft of the image appears quickly. The details are filled in as the download finishes.
Most graphics programs that can handle gif files enable you to choose whether to save them interlaced or noninterlaced. In Paint Shop Pro, for example, you can choose the Version 89a-Interlaced File sub-format on the Save As dialog box just before you save a gif file (see Figure 16.23).
The JPEG format has its own corollary to interlaced gif, called progressive JPEG. The mathematics are a bit more complex than interlacing, but the effect is essentially the same: a blurry version of the picture appears first and is replaced by a more precise rendition as the image finishes downloading.
Unfortunately, at this writing, the progressive JPEG standard is quite new and is only supported by the latest versions of Netscape Navigator and Microsoft Internet Explorer. As older browsers become less commonplace, progressive JPEGs will undoubtedly become quite popular.
| Note |
Browsers that don't support progressive JPEG will not display the file as if it were just a regular JPEG; they will display nothing at all or a message saying the file isn't recognizable. So don't put progressive JPEGs on your pages unless you're sure that all your intended audience will be using a browser that supports them! (Interlaced gifs, on the other hand, will appear correctly even in older browsers that don't support two-stage display.) |
The third way for graphics to appear faster than they really are is to use the LOWSRC, WIDTH, and HEIGHT attributes, which are HTML extensions to the <IMG> tag. These attributes are currently only supported by Netscape Navigator, but other browsers will just ignore these tags. So you can use them safely even if some visitors to your site may not be using Netscape.
The LOWSRC attribute specifies an image to be loaded and displayed before the image specified in the SRC attribute. The idea is to load a quick two-color gif or lossy JPEG image first, and then immediately replace it with a more colorful or detailed version of the same image. Basically, LOWSRC enables you to simulate the effect of an interlaced gif or progressive JPEG by using two separate images.
The two images don't have to look similar. By using two completely different images, you can create a clever little two-frame animation or overlay effect. Keep in mind, however, that the LOWSRC image is not displayed at all if Netscape can find the SRC image in its memory or disk cache from a recent download. So if viewers return to your page more than once in a session, they usually won't see your nifty LOWSRC animation effect.
The WIDTH and HEIGHT attributes specify the size (in pixels) to make an image. Normally, these attributes are the actual width and height of the image and are used by Netscape to lay out the page quickly and display any text that follows an image without having to load the image first. But they can also be used to resize an image to fit a larger (or smaller) space. For example, if big.gif was a 2005200 pixel image, you could make a 1005100 pixel version called small.gif and use the following HTML command on your Web page:
<IMG SRC="big.gif" LOWSRC="small.gif" WIDTH=200 HEIGHT=200>The smaller version would load first, and Netscape would automatically enlarge it to 2005200 pixels. Then the full-size version would overlay it as soon as it loaded.
By using transparency, interlaced gifs, and LOWSRC all at once, you can make the image display in several separate stages, with each stage appearing more detailed. Even the slowest modem users get something to look at quickly and an interesting progression of layers to keep them entertained while the final image loads.
Figures 16.24 through 16.28 show the four stages that appear when you load the sample document designed earlier in this chapter. (To see this for yourself, open the /examples/look/bfb.htm file on the CD-ROM with Netscape Navigator.) Figure 16.28 is the final appearance of this page.
Figure 16.25: Next, the more detailed second pass loads.
Figure 16.27: Finally, the LOWSRC image is gradually replaced by the SRC image as it downloads.
.
| Tip |
If you're going to the trouble of making graphics appear fast to slow modem users, don't forget that many people will not see the graphics on your Web pages at all. Even those using graphics-capable browsers often surf with graphics downloading turned off to reduce download times over a slow modem connection. HTML gives you a way to send a special message to readers who don't see your graphics. Each image can be given an ALT= attribute that will display the text you specify whenever the image itself can't be shown. Here's an example: <IMG SRC="triangle.gif" ALT="WARNING:"> This page is radioactive on some monitors. If the image file triangle.gif couldn't be displayed, most browsers would display the word WARNING: instead. |
This LOWSRC business can be a cheap and easy way to do super-simple animation without the need for you or your viewing audience to mess with extra plug-ins, helper applications, or Java applets. Chapter 19, "Animating Graphical Images," shows you some much better-and almost as cheap-ways to get animation without the fuss.
Meanwhile, Chapter 17, "Working with JPEG and gif Images," explains in detail how to create and enhance Web graphics with Paint Shop Pro. Chapter 18, "Creative Uses of Text, Fonts, and Type," explores some sneaky ways to get creative with the words on your Web pages.
