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 from the Head First Lounge, which has four <img> elements:

Behind the Scenes

Now let’s take a look behind the scenes and step through how the browser retrieves and displays this page when it is requested from http://lounge.headfirstlabs.com: