Chapter 8 -- Adding Graphics to HTML Chapter 8 Adding Graphics to HTML CONTENTS What Are GIF and JPEG Files? Tip Sheet How to Convert a Bitmap to a GIF File Tip Sheet How to Add an Image to Your HTML Document Tip Sheet How to Format Images in HTML Tip Sheet In the early days of the World Wide Web, graphics were considered to be little more than novelties-a cheap trick to spice up a Web page. But today, graphical images are an integral part of any HTML document. You'd be hard-pressed to find a popular site on the Web that didn't use images extensively. Knowing how to include graphics in HTML, and more important, knowing how to use graphics correctly, is a crucial part of putting together a Web page. Good HTML documents don't just show images, they integrate them and use them effectively. In this chapter, we'll look at the types of images used on the Web, and show you how to use HTML to include them in your Web pages. You'll also discover secrets for formatting your images for maximum visibility and effectiveness. What Are GIF and JPEG Files? The two most common image file formats in use on the World Wide Web are GIF (.GIF) and JPEG (.JPG) files. The GIF format is directly supported by every graphical Web browser, while JPEG is still gaining acceptance as a standard image format on the World Wide Web. Although both GIF and JPEG files can be used in your HTML documents, there are a few important differences between the two formats. Tip Sheet Remember that JPEG images are 24-bit color, and require the appropriate video hardware to view properly. If the user's system can only support 256 colors, the images will be automatically adjusted to 256 colors by the Web browser or external viewer through a process known as color dithering. This will always degrade the quality of the image, and may lead to results you did not anticipate. Therefore, it's best to use 24-bit JPEG images only when absolutely necessary. Images take a considerable amount of time to load in an HTML document, especially when the reader has a slow modem connection to the Internet. Try to keep your images as compact as possible. Crop the images wherever possible to show only the relevant portions, thereby reducing the image size. Color depth also plays a huge role in overall image size. Consider decreasing the number of colors to 16 or 256 if it won't adversely affect the image. Figure 8.1 : The GIF format, developed by CompuServe, is a cross-platform format, which means it can be viewed on almost any type of computer system, making it ideal for use on the World Wide Web. The one significant limitation of the GIF format is that images are limited to 256 colors. There are two different formats for GIF images: the GIF87 format and the GIF89a format. The first format is the original format, and is no longer widely used. The GIF89a format takes advantage of new enhancements, including transparency and interlacing, which are used extensively by HTML authors. The JPEG format, developed by the Joint Photographic Experts Group, is also a cross-platform format, although it is not directly supported by all Web browsers. JPEG images can use the full spectrum of 16.7 million colors. JPEG images are compressed files. JPEG compression results in some image quality loss; however, the difference is usually not noticeable to the human eye. Figure 8.2 : If you are including photographic images in your HTML document, you should store them in JPEG format because of the smaller file size and support for full color. Some Web browsers do not directly support JPEG files, and require the reader to load them with an external JPEG viewer. Many JPEG viewers are available for free on the Internet. You can find a list of them at http://www.yahoo.com/computers_and_ Internet/Software/Graphics/. Figure 8.3 : If you're placing line art, company logos, or icons in your HTML document, you should save these images in the GIF89a format. By doing so, you'll be able to take advantage of the interlacing and transparency features, which are explained in detail in the next chapter. How to Convert a Bitmap to a GIF File In order to create GIF and JPEG images, you need an image editing program that can read and write in those file formats. The Paint program that comes with Windows 95 does not support GIF or JPEG. Fortunately, there are many low-cost image editing programs that do, including some free ones. In this section, you will learn how to create a GIF file by using Paint Shop Pro, an inexpensive and widely used image editing utility. If you've got a Windows bitmap file that you'd like to use, such as your Windows wallpaper, Paint Shop Pro will help you convert it to GIF or JPEG format. Tip Sheet Be careful when choosing images to include with your HTML document. Be sure that the images you're using are either your own, are royalty-free, or have been cleared for your use by the copyright holder. Keep your images as small as possible. Use Paint Shop Pro's cropping tools to cut your image down to size if necessary. Small files load faster and help ensure compatibility with all systems. As a rule of thumb, your image should never be larger than 450 pixels wide and 400 pixels high. Figure 8.4 : Start Paint Shop Pro. If you don't already have a copy of Paint Shop Pro on your system, you'll need to download a copy. An evaluation version is available on the publisher's Web site at http://www.jasc.com. Open your .BMP bitmap file by choosing Open from the File menu or by pressing Ctrl+O. Figure 8.5 : In the Open Image dialog box, change the value in the List Files of Type box to BMP - OS/2 or Windows Bitmap. Figure 8.6 : Locate the bitmap file on your system that you want to convert, then press the OK button. Check to see how many colors your .BMP image uses. The number of colors used is displayed in the lower-left corner of the status bar. If it's 256 colors or less, you can save this image as a GIF file. If it's more than 256 colors, you'll either need to decrease the number of colors or save the image as a JPEG file. Figure 8.7 : To decrease the number of colors used in the image, select Decrease Color Depth from the Colors menu and choose 256 colors (8-bit). Figure 8.8 : In the Decrease Color Depth dialog box, make sure that the standard palette is selected. In most cases, you'll want to choose Error Diffusion as your reduction method, but feel free to experiment. Press the OK button when you're ready to go. Figure 8.9 : To save the 256-color image as a GIF file, choose Save As from the File menu or press F12. Make sure that the List Files of Type box is set to GIF - CompuServe and the File Sub-Format is set to Version 89a - Interlaced. To save this image as a JPEG file instead, set the file type to JPG - JPEG - JFIF compliant. Choose a file name and location for your image file. How to Add an Image to Your HTML Document Once you've got the image file prepared, the next step is to place it in your HTML document with markup tags. Images in HTML are included by using the <IMG> tag. This page will cover the basic elements and attributes used when including an <IMG> tag in your document. Tip Sheet If you want to link to images that are not your own, be sure to get permission from the copyright holder first. You should always use ALT to specify alternate text for an image, so that users without graphical capability will understand what the image is showing. Figure 8.10 : Locate the place in your document where you'd like to insert the image. You can place images in your HTML document by using the <IMG> tag. To insert an image into your HTML document, type <IMG>. There is no closing </IMG> tag. Figure 8.11 : Now you need to specify the URL of the image to load by placing the SRC (source) attribute within the <IMG> tag. If you store your images in the same directory as your HTML files, the URL can simply be the file name of the image. For example, to insert a GIF file named logo.gif into your HTML document, you would type <IMG SRC="logo.gif">. Figure 8.12 : To link to images that are not in the same directory as the HTML document, use relative URLs to locate them. For example, if you stored the above logo.gif file in a subdirectory called images in your HTML documents folder, you would type <IMG SRC="images/logo.gif">. Figure 8.13 : The ALT attribute allows you to create alternate text for your image that will be shown to users who have browsers that do not support graphics. Some browsers will also display the alternate text while the image is loading. To specify the alternate text, type ALT=, followed by the text in quotes. For example, adding alternate text would change the above image tag to <IMG SRC="images/logo.gif" ALT="The LawnBirds, Inc. logo in stunning 3-D.">. Figure 8.14 : How to Format Images in HTML As you've learned, it's very easy to include an image in your HTML document. However, simply including an image is only the first step. HTML provides you with several ways to format your image inside your document. You can align your image with the margins to allow text to flow around it. You can also specify the size you'd like the image to be, allowing the reader's Web browser to scale the image accordingly. Tip Sheet You can determine the height and width of an image by opening the file in Paint Shop Pro. The number of pixels in the height and width of the image are displayed in the status bar. It's always a good idea to specify the height and width of your image, even if you don't want to scale it to a different size. When you indicate a size in the <IMG> tag, many browsers will insert a rectangle as a placeholder while the image downloads. This will allow users to read the text of your document immediately, instead of having to wait for the images to download first. Figure 8.15: To specify the alignment of an image, use the ALIGN attribute inside the <IMG> tag. To align the image above the text that surrounds it, type ALIGN=BOTTOM. This sets the bottom of the image equal to the baseline of the text. Likewise, to align the image below the surrounding text, type ALIGN=TOP. You can also align the middle of the image to the text baseline by typing ALIGN=MIDDLE. Figure 8.16 : To force text to wrap around an image, type ALIGN=LEFT inside the <IMG> tag. This will align the image with the left margin of the document, and text will flow around it, beginning with the current paragraph. Figure 8.17 : To place the image in the right margin of your document, type ALIGN=RIGHT. Figure 8.18 : You can specify the height and width of your image. If you specify a different height and width than the actual image, the browser will scale the image to fit your settings. To set the height, place your cursor in the <IMG> tag and type HEIGHT=, followed by the height of the image in pixels. To specify the width of the image, type WIDTH=. Figure 8.19 : There are a number of enhancements to the <IMG> tag. Netscape and Internet Explorer provide many extensions for greater layout control.