

HTML 15: How Images Work
Now 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. By the end of the next few lessons, you'll know all the ins and outs of using 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 on 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.html page from the Head First Lounge, which has four <img> elements:
<html>
<head>
<title>Head First Lounge Elixirs</title>
</head>
<body>
<h1>Our Elixirs</h1>
<h2>Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg">
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
<h2>Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg">
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<h2>Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg">
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>
<h2>Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg">
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
<p>
<a href="../lounge.html">Back to the Lounge</a> </p>
</body>
</html>
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:
1. First the browser retrieves the file "elixir.html" from the server.
2. Next the browser reads the "elixir.html" file, displays it, and sees it has four images to retrieve. So, it needs to get each one from the Web server, starting with "green.jpg".
3. Having just retrieved "green.jpg", the browser displays it and then moves on to the next image: "lightblue.jpg".
4. Now the browser has retrieved "lightblue.jpg", so it displays that image and then moves on to the next image, "blue.jpg". This process continues for each image in the page.
How Images Work
Images are just images, right? Well, actually there are a zillion formats for images out there in the world, all with their own strengths and weaknesses. But luckily, only two of those formats are commonly used on the web: JPEG and GIF. The only tricky part is deciding which to use when.
What's the Difference Between JPEG and GIF?
![]() |
![]() |
Use JPEG for Photos and Complex Graphics |
Use GIF for Images with Solid Colors, Logos, and Geometric Shapes |
Works best for continuous tone images like photographs. "Continuous tone" means that the colors and lights/darks keep changing as you go across the image. |
Works best for images with a few solid colors, and images with lines, like logos, clip art, and small text in images. |
Can represent images with up to 16 million different colors. |
Can represent images with up to 256 different colors. |
Is a "lossy" format because to reduce file size, it throws away some information about the image. |
GIF also compresses the file to reduce its size, but doesn't throw anything away. So, it is a "lossless" format. |
Does not support transparency. |
Allows one background color to be set to "transparent" so that anything underneath the image will show through. |
Decisions, Decisions: JPEG or GIF?
Take a look at the images below and guess which file format is most appropriate for each. Read the answers below.
Image |
JPEG |
GIF |
---|---|---|
☑ |
☐ |
|
☐ |
☑ |
|
☑ |
☐ |
|
☐ |
☑ |
|
☑ |
☐ |
|
☐ |
☐ |
|
☐ |
☐ |
|
☐ |
☐ |
|
☐ |
☐ |
|
☐ |
☐ |
Image |
JPEG |
GIF |
---|---|---|
|
X |
|
|
|
X |
|
X |
|
|
|
X |
|
X |
|
|
X |
|
|
|
X |
|
|
X |
|
X |
|
|
X |
|
Assignment
On a sheet of notepaper, write your name at the top. Down the left, write the numbers 1 through 10. For each, write whether the image would be best formatted as a JPEG or a GIF. Then for each, explain why.
No. |
Image |
JPEG or GIF? |
Explain Why |
---|---|---|---|
1 |
![]() |
||
2 |
![]() |
||
3 |
![]() |
||
4 |
![]() |
||
5 |
![]() |
||
6 |
|||
7 |
|||
8 |
|||
9 |
|||
10 |
Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman