Head First HTML and CSS, 2nd Edition

Chapter 5. Adding Images to your Pages: Meeting the Media

Smile and say “cheese.” Actually, smile and say “gif,” “jpg,” or “png”—these are going to be your choices when “developing pictures” for the Web. In this chapter you’re going to learn all about adding your first media type to your pages: images. Got some digital photos you need to get online? No problem. Got a logo you need to get on your page? Got it covered. But before we get into all that, don’t you still need to be formally introduced to the <img> element? So sorry, we weren’t being rude; we just never saw the “right opening.” To make up for it, here’s an entire chapter devoted to <img>. By the end of the chapter you’re going to know all the ins and outs of how to use the <img> element and its attributes. You’re also going to see exactly how this little element causes the browser to do extra work to retrieve and display your images.

How the browser works with images

Browsers handle <img> elements a little differently than other elements. Take an element like an <h1> or a <p>. When the browser sees these tags in a page, all it needs to do is display them. Pretty simple. But when a browser sees an <img> element, something very different happens: the browser has to retrieve the image before it can be displayed in a page.

The best way to understand this is to look at an example. Let’s take a quick look back at the elixirs page ...