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