HTML and CSS Reference
This small image is
Progressive JPEG. When a JPEG file is created it can be configured as progressive. A
progressive JPEG is similar to an interlaced GIF in that the image progressively displays
and seems to fade in as it downloads. Consider using this for complex images since the
general shapes will initially appear and then sharpen as the file is progressively scanned
and displayed by the browser.
PNG, pronounced “ping,” stands for portable network graphic. Browsers have only
recently begun to support this type of image. It combines the best of GIF and JPEG
images and will be a replacement for the GIF in the future. PNG graphics can support
millions of colors. They can support variable transparency levels and use lossless com-
pression. PNG images also support interlacing. PNG is the native file format of some
graphics applications, such as Adobe Fireworks.
Now that you've been introduced to the types of graphic files displayed on Web pages,
we'll discuss how to place graphics on your Web pages.
The <img /> , pronounced image, element is used to place graphics on a Web page.
These graphics can be photographs, banners, company logos, navigation buttons—you
are limited only by your creativity and imagination.
The image tag is used alone, not in a pair of opening and closing tags. The image file
should be either in the same folder as your Web site or in a subfolder of your site. For
example, to place an image called logo.gif on your Web page, you would use the fol-
lowing XHTML code:
<img src="logo.gif" height="200" width="500" alt="My Company Name" />
The src attribute is used to specify the file name of the image. A number of optional
attributes can be applied to images. It is a good idea to include the height , width , and
alt attributes. The height attribute and width attribute can cause the Web page to
load more efficiently and quickly. The alt attribute provides a text replacement, typi-
cally a text description, of the image. Table 4.2 lists attributes and their values.
Commonly used attributes are shown in bold.