by Mark R. Brown, Jerry Honeycutt, and Robert Meegan
Images can make your HTML document more compelling than text alone. Imagine an HTML document that contains some fairly dry material. The specification for the techno-widget that you invented, for example. If you only put text in this document, the document would seem quite dull. On the other hand, a few well-placed graphics can break up the text, making it seem more readable, and make the document more visually appealing.
Images can often convey your message better than text alone. Can you picture this book without any figures? It wouldn't convey its message as well. Remember the old cliché, "a picture is worth a thousand words?" Beyond that, without figures you probably would have put this book right back onto the shelf because it wouldn't look very appealing.
Up to this point, you've learned about the basic HTML required to add text to your document and how to format that text. This chapter stuffs your toolkit with another tool--inline images--that lets you convey your message better and create a more visually attractive Web page. In this chapter, you learn how to add those images to your HTML documents. You also learn several tips and tricks that you need to know when using images in HTML.
You need to carefully consider each image that you add to your HTML documents. Yes, you should carefully consider the design and contents of each image, but, in this section, you learn about other issues. For example:
Before adding images to your HTML documents, you need to understand the issues. That doesn't mean you should avoid using images--you shouldn't. If you understand the issues, however, you're better able to choose appropriate images. Just keep these points in mind as you add each image to your document:
The growth in electronic publishing has given rise to a startling new crime wave. Many people who are perfectly honest in all of their day-to-day dealings think nothing of using a clever graphic found on the Web. After all, once they download it, the image has lost all its ties to the original author. Regardless, copyright laws apply to electronic images just as much as they do to works like this book. If you use an image that has been copyrighted, the author can sue for damages.
How can you tell if a graphic has been copyrighted? It's not as easy as looking for a little copyright symbol in the image. Here are some tips to help you determine if an image is copyrighted:
NOTE: Images that are obviously commercially oriented are usually copyrighted. These include images of people, logos, cartoon characters, and other unique images. Interesting decorations such as bullets or horizontal rules probably come from a clip-art library, which grants rights to use those images only to the purchaser of the library.
Can you plead ignorance if you're busted using a copyrighted image? No. You have the total responsibility for determining whether an image is copyrighted. Because this is not always practical, the best advise is to only use images that either you're completely certain are not copyrighted, those that you have been granted the right to use, or those for which you hold the copyright.
CAUTION: Changing a copyrighted work does not revoke the copyright. The copyright holder has rights to all derived works. This means that you cannot download an image, change it in some fashion, and then freely use the new version.
As you can see, copyright law is a tricky thing. Your best bet is to assume that all images are copyrighted unless proven otherwise. If you have any questions or if you're developing a high-profile Web site, you should probably contact an attorney who specializes in copyright law.
Maybe. A simple rule of thumb is that you should avoid pornographic images. From a practical point of view, a Web site that has pornographic images on it is likely to be overwhelmed with traffic. As a result you may run afoul of your Internet service provider, who is almost certainly not going to be pleased with hundreds of megabytes of downloads from a single Web page.
There are a couple of legal aspects to this issue, as well:
CAUTION: The information you read in this section is common sense. This information doesn't replace your legal counsel, however, in cases where you have real questions about pornographic images.
You'll find dozens of graphics file formats that you can use to store images--GIF, JPEG, PCX, PNG, WMF, and so on. When creating images for use in an HTML document, however, you're better off sticking with those file formats that most browsers understand: GIF or JPEG.
Each file format has certain trade offs. While one file format downloads faster, for example, the other format maintains more image detail. This section helps you pick the right file format by describing these trade offs. First, it briefly describes each file format, and then it compares the speed, color depth, definition, and browser support of each file format.
NOTE: If you want to get right to the bottom line, use GIF. It's widely supported by most Web browsers (whereas PNG is not). It can be interlaced, which lets users view an image before it's finished downloading. It does transparency, too, so you can create great looking imagemaps with transparent backgrounds. And you can even use it to create simple animations.
NOTE: When choosing a graphics file format, the most important issue to keep in mind is download speed versus image quality. If you're going to use an image in your Web page, you obviously want to store that image in a format that downloads as quickly as possible. On the other hand, you trade image quality for faster download speeds.
The best possible choices are GIF, PNG, or JPEG. BMP files aren't compressed at all, thus it is the slowest of all file formats to download. GIF, PNG, and JPEG all provide an acceptable experience when compared to the variety of other formats available on the Web. GIF and PNG files are larger than JPEG files, but GIF and PNG files decode faster and maintain more image detail.
TIP: GIF does an extremely good job compressing images that contain only a handful of colors. Thus, with an image that uses only a few colors, GIF compresses better than JPEG.
GIF supports 256 colors. JPEG supports 16.7 million colors. Thus, if color depth is not important or you're using a limited number of colors in an image, you can be comfortable using GIF. On the other hand, if you want to maintain a photographic-quality color depth, then you might consider using JPEG.
Lossy compression schemes cause an image to lose detail when the graphics program saves it. That is how these schemes compress the file so much. Lossless compression schemes, on the other hand, don't cause an image to lose any detail at all. Table 7.1 describes each file format's compression scheme.
| Format | Scheme | Description |
| GIF | Lossless | GIF compresses without losing any detail. Thus, if you're concerned more with maintaining detail than download speed, use GIF. |
| PNG | Lossless | PNG also compresses without losing any detail. PNG is a good alternative to GIF, except that it's not directly supported by most Web browsers. |
| JPEG | Lossy | JPEG causes an image to lose detail when saved. If you're concerned more with file size than with detail, however, use JPEG. |
You really don't want readers to have to install a helper application to view the images in your HTML documents. Thus, you should stick with those file formats that are directly supported by the most popular browsers. These formats include GIF and JPEG. PNG is not yet supported by a majority of the Web browsers, so you should shy away from this format for now.
Putting an image in an HTML document is incredibly easy--simply use the <IMG> tag with its SRC attribute, which points to the URL of the graphic file to be displayed (see Figure 7.1). Add the following tag to your HTML document at the location in which you want to display the image. Then, replace filename with the URL of the image you want to display.
<IMG SRC="filename">
By default, the browser displays the image inline. Thus, the browser displays it immediately to the right of any text or any other object that immediately precedes the image. Take a look at Listing 7.1, for example. It shows the same image three different times. Each time, the image is shown inline. That is, the browser displays the image immediately to the right of any text preceding it as seen below.
<HTML>
<HEAD>
<TITLE>Using the IMG tag</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="book.gif">
This text immediately follows the image.
</P>
<P>
This text is interrupted
<IMG SRC="book.gif">
by the image.
</P>
<P>
In this case, the image appears inline after this text.
<IMG SRC="book.gif">
</P>
</BODY>
</HTML>
TIP: Consider storing all your images in a single directory off your Web site's root folder. Then, you can use relative paths in combination with the <BASE> tag (see Chapter 8, "Linking Documents Together") to access your images without specifying a full URL.
FIG. 7.1
You can insert an image anywhere in an HTML document that you like.
By default, when you insert an image inline with text, the text is aligned with the bottom of the image. Chances are good that you won't like this default alignment--it leaves a great deal of white space on the page. You can change it, though, using the <IMG> tag's ALIGN attribute. Table 7.2 describes each value you can assign to this attribute.
| Value | Description |
| TOP | Aligns the text with the top of the image |
| MIDDLE | Aligns the text with the middle of the image |
| BOTTOM | Aligns the text with the bottom of the image |
Listing 7.2 shows an HTML document that inserts three images, each of which uses one of the alignment values shown in Table 7.2. Figure 7.2 shows the resulting Web page.
<HTML>
<HEAD>
<TITLE>Using the IMG tag's ALIGN attribute</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="book.gif" ALIGN=TOP>
This text is aligned with the top of the image.
</P>
<P>
<IMG SRC="book.gif" ALIGN=MIDDLE>
This text is aligned with the middle of the image.
</P>
<P>
<IMG SRC="book.gif" ALIGN=BOTTOM>
This text is aligned with the bottom of the image.
</P>
</BODY>
</HTML>
FIG. 7.2
By default, the baseline of the text is aligned with the bottom of an inline image.
By default, the browser displays images inline. That is, it displays an image immediately to the right of the previous content. Text does not wrap around it. You can display an image on the left or right side of the Web page, however, allowing the surrounding content to flow around the image. This type of image is called a floating image.
You create a floating image by using the <IMG> tag's ALIGN attribute. This is the same attribute you use to align the surrounding text with an image. Table 7.3 describes each value you can assign to this attribute.
| Value | Description. |
| LEFT | Displays image on left side and surrounding content flows around the image |
| RIGHT | Displays image on the right side of the window and surrounding content flows around the image |
Listing 7.3 shows an HTML document that inserts two images, each of which uses one of the alignment values shown in Table 7.3. Figure 7.3 shows the resulting Web page.
<HTML>
<HEAD>
<TITLE>Using the IMG tag's ALIGN attribute</TITLE>
</HEAD>
<BODY>
<P>
<IMG SRC="book.gif" ALIGN=LEFT>
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
This text will wrap around the right-hand and bottom of the image.
</P>
<P>
<IMG SRC="book.gif" ALIGN=RIGHT>
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
This text will wrap around the left-hand and bottom of the image.
</P>
</BODY>
</HTML>
FIG. 7.3
By default, the baseline of the text is aligned with the bottom of an inline image.
Providing the browser a size hint means that you explicitly state the height and width of the image within the <IMG> tag. This has two benefits that make this a must:
You use the <IMG> tag's HEIGHT and WIDTH attributes to provide size hints to the browser. You set the HEIGHT attribute to the exact height and the WIDTH attribute to the exact width in pixels that you want to reserve for the image. Listing 7.4 shows what an HTML document that sets the height and width of an image looks like. Figure 7.4 shows what this HTML document looks like when inline images are disabled.
<HTML> <HEAD> <TITLE>Using HEIGHT and WIDTH to give size hints</TITLE> </HEAD> <BODY> <IMG SRC="book.gif" WIDTH=320 HEIGHT=240> </BODY> </HTML>
FIG. 7.4
Without size hints, all you'd see in this image is a small box with an icon in it.
If the size you specify by using the HEIGHT and WIDTH attributes isn't the same as the actual size of the image as determined in your favorite graphics editor, the browser scales the image. The following sections describe the result of scaling the image down or up.
Scaling an Image Down Scaling the image down means the actual image is larger than the space you reserved for it by using the HEIGHT and WIDTH attributes. In this case, the browser shrinks the image so that it fits in the reserved space. You can easily distort an image if you're not careful specifying its size. For example, if you decrease the image's height by 50 percent and the width by 25 percent, the image will look funny in the browser (see Figure 7.5).
FIG. 7.5
Equally scaling an image's height and width is also known as maintaining the image's
aspect ratio.
CAUTION: Specifying a height and width that's smaller than the actual image's height and width doesn't save any download time. The browser still downloads the entire image before it scales it to fit the reserved area.
Scaling an Image Up Scaling the image up means the actual image is smaller than the space you reserved for it by using the HEIGHT and WIDTH attributes. In this case, the browser enlarges the image so it fits in the reserved space. Just as when scaling an image down, you have to be concerned with maintaining an image's aspect ratio when you scale it up.
Unlike scaling an image down, however, you also have to worry with pixelation. That is, when you enlarge an image, the image's contents are expanded to fill the area. The browser makes each pixel bigger so that it fills more space. This effect is sometimes very unattractive, as shown in Figure 7.6.
FIG. 7.6
You can sometimes use pixelation to create special effects.
So, you've dumped a bunch of images into your HTML document. What about those users who aren't viewing images? You can provide alternative text to them that, at least, tells them about the image. You do that with the <IMG> tag's ALT attribute, like this:
<IMG SRC="filename" ALT="Description">
If the user's browser isn't displaying images, he or she sees the alternative text in the image's place. For the user whose browser is displaying images, he or she sees the alternative text until the browser is ready to display the image. Better yet, if you combine alternative text with size hints, users see a box that's correctly sized with the alternative text within its borders.
Listing 7.5 is an HTML document that uses alternative text to provide a description of the image. Figure 7.7 shows you what this document looks like in a browser that's not displaying inline images.
<HTML> <HEAD> <TITLE>Using the ALT attribute</TITLE> </HEAD> <BODY> <IMG SRC="book.gif" WIDTH=320 HEIGHT=240 ALT="A picture of my latest book's cover"> </BODY> </HTML>
FIG. 7.7
Internet Explorer displays the image's alternative text in a pop-up window when
the mouse pointer lingers over the image for more than a few seconds.
By default, the user's browser displays a border around each inline image that you're using as an anchor. You have a lot of control over that border and the white space around the image.
You set the <IMG> tag's BORDER attribute to the width of the border in pixels. If you want the border to be 10 pixels in width, set this attribute to 10. Listing 7.6 shows an HTML document with three images, each of which has a different border width. Figure 7.8 shows the result in the browser.
<HTML> <HEAD> <TITLE>Using the BORDER attribute</TITLE> </HEAD> <BODY> <A HREF=""><IMG SRC="book.gif" BORDER=0></A> <BR> <A HREF=""><IMG SRC="book.gif" BORDER=5></A> <BR> <A HREF=""><IMG SRC="book.gif" BORDER=10></A> </BODY> </HTML>
FIG. 7.8
If you don't want the browser to draw a border around an image, set the BORDER
attribute to 0.
You might not like how the text surrounding an image crowds the image. If that is the case, use the VSPACE and HSPACE attributes to add vertical and horizontal space around the image, respectively. You set each of these attributes to the amount of space, in pixels, you want to allow between the surrounding content and the image. Listing 7.7 shows an example of an image that adds additional space around the image to separate it from the text. Figure 7.9 shows you the result.
<HTML> <HEAD> <TITLE>Using the BORDER attribute</TITLE> </HEAD> <BODY> <IMG SRC="book.gif" VSPACE=20 HSPACE=20 ALIGN=LEFT> This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. This text will wrap around the image. </BODY> </HTML>
Chapter 8, "Linking Documents Together," describes how to use an image as a link to another resource. It's easy. You enclose an image within the <A> tag as shown here:
<A HREF="http://www.mysite.com"><IMG SRC="image.gif"></A>
FIG. 7.9
Adding white space around an image keeps it from looking too cramped.
© Copyright, Macmillan Computer Publishing. All rights reserved.