Learning Web Design, 6th Edition

Chapter 7. Adding Images

7

Adding Images

In this Chapter

Adding images with the img element

Image accessibility

Adding SVG images

Providing multiple formats with the picture element

The web’s explosion into mass popularity was due in part to the fact that there were images on the pages. Before images, the internet was a text-only tundra.

Images appear on web pages in two ways: embedded in the content or as background images. If the image is part of the editorial content, such as a product shot, gallery image, ad, logo, illustration, and so on, then it should be placed in the flow of the HTML document. If the image is purely decorative, such as a stunning photograph in the background of the header or a patterned border around an element, then it should be added as a background image with Cascading Style Sheets. Not only does it make sense to put images that affect presentation in a style sheet, but it makes the document cleaner, more accessible, and much easier to update later.

I’ll talk about CSS background images at length in Chapter 13, Colors and Backgrounds. This chapter focuses on embedding image content into the flow of the document, and it is divided into three parts. First, we’ll look at the tried-and-true img element for adding basic images to a page the way we’ve been doing it since 1992. It has worked just fine for over 30 years, and as a beginner, you’ll find it meets most of your needs as well.

The second part of this chapter introduces some of the methods ...