12.2. Image Basics
Before jumping into the finer points of the <img> tag, let's back up and consider general graphics usage issues.
12.2.1. Inline Graphic Uses
Graphic files can be used in a number of ways on the Web. Images may be used as background tiles (added with the background attribute in the <body> tag as noted in Chapter 9, "Structural HTML Tags"). You can also create a link to a graphic file that displays either in the browser window or in a helper application if it is in a format that cannot be displayed by the browser.
This chapter focuses on inline images, graphics that are displayed in the browser window as part of the flow of the contents of the document. Inline images are placed on the page with the <img> tag. The overwhelming majority of graphics on the Web are used as inline images, including banners, buttons, logos, and so on. Graphics can serve a variety of functions:
- As a simple graphic
-
A graphic can be used on a web page much as it is used in print -- as a static image that adds decoration or information, such as a company logo or an illustration.
- As a link
-
A graphic can also be used to link to another document as an alternative to text links. Linked graphics are discussed later in this chapter.
- As an imagemap
-
An imagemap is a single graphic with multiple "hotspots" that link to other documents. There is nothing special about the graphic itself; it is an ordinary inline image. Special coding and map files link pointer coordinates with their respective URLs. The usemap or ismap attribute within the <img> tag indicates to the browser that the graphic is used as a client-side or server-side imagemap, respectively. (A full explanation of how imagemaps work and how to create them appears in Chapter 11, "Creating Links".)
- As spacing devices
-
Because web pages are difficult for designers to control with HTML alone, some designers resort to using transparent graphics to invisibly control the alignment of text or the behavior of tables. Although it is one solution for arranging elements on the page, it is considered poor HTML form.
WARNING
Netscape's solution for holding extra space on a web page is its proprietary <spacer> tag. Spacers can be used to hold a specified amount of horizontal or vertical space or a "block" of space with width and height measurements. The <spacer> tag and its attributes are listed earlier in this chapter. Because this is a proprietary tag that is useful to only a minority of web users, the use of the <spacer> tag is generally avoided.
12.2.2. Acceptable Graphics Formats
A graphic needs to be in either GIF or JPEG format to be displayed as an inline image by the vast majority of browsers. Furthermore, the files need to be named with the proper suffixes -- .gif for GIF files, .jpeg or .jpg for JPEG -- in order to be recognized by the browser.
There is a third format, PNG (pronounced "ping"), which was designed specifically with web distribution in mind; however, only Version 4 and higher browsers support PNG files (suffix .png) as inline graphics, and they don't support all of PNG's most attractive features. Until PNG gains better support, stick with either GIF or JPEG.
These graphics file formats, as well as other requirements for putting graphics online, are discussed in detail in the chapters of Part III, "Graphics".
 |  |  |
| 12. Adding Images and Other Page Elements |  | 12.3. The <img> Tag and Its Attributes |
Copyright © 2002 O'Reilly & Associates. All rights reserved.