NHS Designs - Web Design - HTML

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.

step one
Click for a larger image.

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

step one
Click for a larger image.

3. Having just retrieved "green.jpg", the browser displays it and then moves on to the next image: "lightblue.jpg".

step one
Click for a larger image.

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.

step one
Click for a larger image.

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
	☑	☐
	☐	☑
	☑	☐
	☐	☑
	☑	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐

Answers:

Image	JPEG	GIF
This is a photograph with continuous tone and many shades of green and orange.	X
This image has only two colors (purple and white) which are in mostly solid areas.		X
This is not a photograph, but it is highly detailed and contains many colors.	X
This image contains only a few colors in solid blocks or swashes.		X
This is not a photograph, but it contains a good deal of continuous tone in many shades of gray.	X
This is a photograph with continuous tone.	X
This is a graphic image with solid blocks of color.		X
This is a graphic image with mostly solid blocks of color.		X
This is a photograph with continuous tone.	X
This is a 3D computer image with continuous tone.	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

Image	JPEG	GIF
	☑	☐
	☐	☑
	☑	☐
	☐	☑
	☑	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐

Image	JPEG	GIF
	☑	☐
	☐	☑
	☑	☐
	☐	☑
	☑	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐

Image	JPEG	GIF
	☑	☐
	☐	☑
	☑	☐
	☐	☑
	☑	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐
	☐	☐