Chapter 7: From Dull to Cool by Adding Graphics
123
Although GIF supports up to 256 colors, not all these colors are the same on both the Mac and PC. This can be a nightmare. A picture that looks great on your PC can look awful on a Mac, and vice versa. To avoid this pitfall, you might want to explore the so-called InternetSafe Color Palette, a subset of 216 colors that are identical on both computers.
on the web
You can see all 216 safe colors on the same Web page by looking online at http://www.intuitive.com/coolsites/colors.html.
Other useful characteristics of GIF images are the capability to designate any one color as a transparent color—I examine that more closely later in the section “Transparent Colors”—and to create interlaced graphics. If you visit a Web page and watch the images load line by line, going from out of focus into the final, crisp rendition, you’re seeing an interlaced image. Although interlacing adds about five to ten percent to the size of the file, if your images are large, interlacing is a nice way to let the user quickly get a rough idea of what he or she is downloading. The majority of images on the Web employ GIF format, particularly buttons and banners, because of their smaller file size. The JPEG format is used to most closely duplicate the exact colors of an original image. For example, a friend of mine has a Web site where he highlights some of his many excellent nature photographs. For photographic reproduction, it’s imperative that he use the JPEG format for all his images. Otherwise, the nuances of color would be lost.
For your Web pages, however, your images will mostly be in the GIF format. Fortunately, a variety of freeware and shareware programs—all available on the Web—can translate com mon graphics formats into GIF format. For the Mac, I recommend GraphicConverter; for Windows systems, you can use Paint Shop Pro. If you have the latest version of your graphics editor or image-manipulation program, it probably has the capability to save directly into GIF format, too. Check with the vendor or your local computer store to make sure. A great start ing point for finding graphics software packages on the Web is Yahoo! Specifically, go to http://www.yahoo.com/Computers/Software/Graphics/ and have a look at what is offered there. If you want to find the specific shareware packages previously mentioned, here are their official Web addresses: • GraphicConverter: http://www.lemkesoft.de/ • Paint Shop Pro: http://www.jasc.com/psp.html
Including Images in Web Pages Including images in a Web document is easy—you use the <img> (image) format tag. Just like the <a> anchor tag, the <img> tag has a single critical attribute, src=”graphicname”, and like the <hr> horizontal rule, it requires no paired close tag. To include the graphic banner.gif, use this HTML: