Learning Web Design, 4th Edition

Chapter 7. Adding Images

IN THIS CHAPTER

• First, a Word on Image Formats

• The img Element

A web page with all text and no pictures isn’t much fun. The Web’s explosion into mass popularity was due in part to the fact that there were images on the page. Before images, the Internet was a text-only tundra.

Images appear on web pages in two ways: embedded in the inline content or as background images. Background images are added using Cascading Style Sheets and are talked about at length in Chapter 13. With the emergence of standards-driven design and its mission to keep all matters of presentation out of the document structure, there has been a shift away from using inline images for purely decorative purposes. See the sidebar Images Move to the Background on the following page for more information on this trend.

In this chapter, we’ll focus on embedding image content into the document using the img element. Use the img element when the image is the content, such as product shots, gallery images, ads, illustrations, and so on...I think you get the idea.

First, a Word on Image Formats

We’ll get to the img element and markup examples in a moment, but first it’s important to know that you can’t put just any image on a web page. In order to be displayed inline, images must be in the GIF, JPEG, or PNG file format. Chapter 21, explains these formats and the image types they handle best. In addition to being in an appropriate format, image files need to be named with the proper suffixes—.gif, .jpg ...