HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

Many readers find Web page creation frustrating because it always seems that other sites just look better or load faster. Although this book focuses on HTML and XHTML, it's important to consider a few issues concerning image use. A much deeper discussion of image considerations can be found in Web Design: The Complete Reference, Second Edition (www.webdesignref.com).

Image Use

The first thing to consider is that the quality of the image being used certainly will affect the outcome of the page layout. Even when armed with a scanner, digital camera, or appropriate software such as Adobe Photoshop, Adobe Illustrator or Macromedia Fireworks, you might be a long way from being able to produce aesthetically pleasing Web pages. Don't fret ”you would never expect that just owning a copy of a word processor would destine you to produce a huge book; it takes skill, patience, and years of practice. Take it from me.

Although this certainly is not a book on Web design, a simple tip is to aim for a minimal design. Straight lines, basic colors, and modest use of imagery should produce a relatively clean and uncluttered design. Furthermore, the simple design probably will load very fast! When you decide to use imagery on your site, whether for pure decoration or information, don't skimp on quality. If you use clip art from some free Web site, your site will reflect this. Fortunately, there are many sites that sell professional quality clip-illustrations and photographs relatively cheaply. While this might save money, don't simply right-click your way to a nice new image free of charge. Web users are sophisticated enough to know when they're having a cheap site foisted on them.

Legal Issues with Images

Unfortunately, the expense of licensing images and the ease with which images can be copied have convinced many people that they can simply appropriate whatever images they need. This is stealing the work of others. Although there are stiff penalties for copyright infringement, it can be difficult to enforce these laws. Also, some page designers tend to bend the rules thanks to the legal concept called fair use , which allows the use of someone else's copyrighted work under certain circumstances.

There are four basic questions used to define the fair-use principle:

• Is the work in question being appropriated for a nonprofit or profit use?       The fair use defense is less likely to stand up if the "borrowed" work has been used to make money for someone other than its copyright holder.

• Is the work creative or factual?       A creative work could be a speculative essay on the impact of a recent congressional debate; a factual work would be a straightforward description of the debate without commentary . "Fair use" would cover use of the factual work more than use of the creative one.

• How much of the copyrighted work has been used?       It is possible to use someone else's images if it is changed substantially from the original. The problem is determining what constitutes enough change in the image to make it a new work. Simply using a photo-editing tool to flip an image or change its colors is not enough. There is a fine line between using portions of another person's work and outright stealing. Even if you don't plan on using uncleared images, be careful of using images from free Internet clip art libraries. These so-called "free" images may have been submitted with the belief that they are free, but some of them may have been appropriated from a commercial clip art library somewhere down the line. Be particularly careful with high-quality images of famous individuals and commercial products. Although such groups often might appreciate people using their images, the usage generally is limited to noncommercial purposes.

• What impact does the image have on the economic value of the work?       Although unauthorized use of a single Star Trek related image might not substantially affect the money earned by Paramount Pictures in a given fiscal year, Paramount's lawyers take a dim view of such use. In fact, some entertainment organizations have taken steps to make it very difficult for Web page designers to use such images.

Ultimately we could, perhaps, add a fifth question to the list: Who owns the original work, and how vigorously will the owner defend it? With such a dangerous question it is obvious to see this discussion begs many legal questions that are far beyond the scope of this book. Suffice it to say that in the long run, it's always safer to create original work, license images, or use material in the public domain. Just because many Web designers skirt the law doesn't mean you should.

Images and Download Speed

Even if it is filled with wonderful imagery, few people want to wait literally minutes for your beautifully designed page to load. Page designers should always consider download time when adding images to their pages. Never assume that everyone has the latest high-speed cable connection or that high bandwidth is right around the corner. This section presents a few tips for improving download time of pages:

• Make sure to use the correct format for the job.       Recall that GIF images are good for illustrations whereas JPEG images are good for photographs. If you break this rule of thumb, you may find that your images are unnecessarily big byte-wise and will take longer to download.

• Reduce colors if possible.       When using GIF images, reducing the number of colors in the image (the bit-depth) can substantially reduce the file size . If your company logo only has 30 colors in it, why use an 8-bit GIF image when you can use a 5-bit image that supports 32 colors? Tools such as Macromedia Fireworks or Adobe Photoshop make color reduction easy to do.

• Reduce the number of images in the page.       The number of individual images in a page can substantially affect the load speed regardless of the total number of bytes transferred. Consider that each individual request does have some overhead and that the network might not be quite as effectively utilized compared to a few larger image downloads. Remember, from the user 's point of view, time counts ”not bytes delivered ”so wherever possible try to reduce the number of individual image pieces used.

• Use the browser's cache.       Once an image has been downloaded once, it should stay in the browser's cache. If the same file is used later on, the browser should be able to reuse the one from the cache. If you can use scripting it might even be possible to download images ahead of time to the browser cache, using precaching or preloading. However, reliance on the cache only works if the complete filenames are the same. This means a single image directory probably is better than copying the files to individual image directories all over your site.

• Give a preview.       If it is going to take a while to download, give the user something to look at. Interlacing a GIF image or making a JPEG progressive results in images that load incrementally. The user might get the gist of an image long before it completely downloads. Thumbnails of images also are a useful way to let a user take a look at the general idea of an image before committing to a long download. If a long download is required, it is a good idea to warn the user as well.

• Use markup correctly.       Using alt , height , and width attributes can do a lot to improve page rendering. The alternative text will give the user something to read as an image loads. Setting the height and width values properly will allow the browser to specify the page layout, quickly allowing the text to flow in right away.

If you have to resort to large file sizes on your Web site, then the ends should justify the means. A big wait for a huge logo or heavily designed page with little content will result in frustrated users who never want to come back again. Could this be why the largest sites such as Amazon and Yahoo! use relatively simple visuals that download quickly? Almost certainly this is the case. In short, always remember when using images to make sure they add something to the overall experience of the user, whether it be to make the site more pleasing visually or provide information.