Cover by Jennifer Niederst Robbins

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Chapter 7. Adding Images

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 ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required