Information Architecture for the Web: Coding

Images are an important element of an effective web page.

Read Chapter 5: Images by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.

It's a good idea to get used to using a good graphics package to edit visuals for the web. Tools such as Macromedia Fireworks or Adobe Photoshop are a good choice. If you don't have graphics software consider the trial version of Adobe Macromedia Fireworks.

Use the following PDF documents for help learning the basics of imaging.

Using Macromedia Fireworks for the Mac - PDF document
Using Macromedia Fireworks for Windows - PDF document

If you don't want to download new software, consider what's already in your computer. If you have Windows, you can use Microsoft Paint. Go to the Start button, choose Accessories and Paint.

Try It!

Go to GIMP and download this open source image manipulation software. It's free and easy to use! If you need help. Try these directions (PDF).

Imaging Tips

Here are a few tips to increase the quality of your web images.

File Management. BE SURE to save all your images in the same folder as your HTML documents. Or, create a separate images folder. Either way, don't move them once you've written your code. When you upload your HTML documents, you need to upload your image files too!

Don't Squish. Never try to squish or expand a visual. If you try to squish a very large photo, it will take a long time to load. If you try to expand a small image, it will pixelate and look strange. Instead, use software tools for all resizing.

Thumbnails. Create two versions of a photograph. One small (called a thumbnail) and one larger. Use the small version of the web page and link to the larger version for those wishing to see the larger image.

Pixels. Pictures are measured in pixels. One inch is about 100 pixels. If your viewing area is about 600 pixels wide, you can get two 300 pixel wide photos across the page or three 200 pixel wide photos.

Resolution. You don't need high resolution photos for the web. The web only displays 72dpi (dots per inch). Some photos are 300 dpi or higher. These should be modifed to 72dpi.

Background Images. Be careful if you use a background image. They can be VERY distracting.

File Extensions

The two most common file types for the web are GIF and JPG.

GIF files are a lossless compression type that support a maximum of 256 colors. As such they work best on illustrations and clipart rather than photographs. The GIF89a format also supports transparency, animation, and interlacing. Transparent graphics are useful if you wish to put the graphic on a colored background. Read more at wikipedia.

JPEG or JPG foles are a lossy compression type that supports millions of colors. This file type is common for photographs. Read more at wikipedia.

PNG is a lossless compression type that supports millions of colors. It offers the main features of gif images (but does not support animation), but is not viewable on older browsers. Many people are now using the open-source PNG files. For example, Fireworks generates PNG files that work on most browsers, but they are large files, so check the file size before using. You may want to resave or export as JPG files. Read more at wikipedia.

In general, stick to files with the GIF or JPG file extensions. Other files work in some browsers but not in others.

STAY AWAY from Microsoft file extensions such as WMF or BMP they won't appear on all computer systems.

You CAN NOT just add the file extension. You must SAVE AS or EXPORT in a graphics package that allows you to select a particular file type. Other file types (tiff, bmp) might work on your computer, but may not be compatible with all web browsers.

If you find a file extension, but you're not sure what type of file is generated, test it at FILExt.

If you want to learn more about file types, go to wikipedia file formats.

Uploading. Be sure to upload the HTML document along with each of the graphics. If your graphics don't appear on your page, it's probably because you didn't upload them. Or, your page can't find the graphics because you didn't put them in the same folder.

Image Sources

When selecting images for your web projects, be sure to consider copyright. Use some of the following resources to help you find visuals, but be sure to read the copyright rules before using them in your projects!

Teacher Tap: Visual Resources - Photos and Clip Art
Teacher Tap: Images for Projects

Image Tag

The <img> tag is used to insert an image. The src attribute provides the name of the image.

You can use the align attribute to place the image on the right or the left side of the space.

If you know the image size (width and height), include this information because it will help the image load faster.

Use the border attribute to provide a line around your image.

The alt attribute provides a description that is used as a text alternative. This is important in making your web page accessible to the visually impaired.

You can also add a link to an image. Links are useful to view a larger version of the image or navigation to another page. Buttons are simply linked images.

The key to inserting images is preplanning. Start by placing the .gif or .jpg file in the same folder/directory as your HTML document.

Example

LITEhouse logo Notice how the text is on the side of the graphic and how it wraps from one line to the next, to the next, to the next...

You can still use deprecated tags such as vspace or hspace for adding space around your image as long as you're not validating with STRICT. However it's really a good idea to start putting everything in tables and/or using CSS. Use hspace means horizontal space (left and right) and vspace means vertical space (top and bottom) around your image.

You can use the align attribute to flow the text around the image. However, it's recommended that you set this alignment in your styles rather than in the text. Since "center" is now deprecated, it's suggested that you create a style for centering:

img.displayed {
display: block;
margin-left: auto;
margin-right: auto; }

Float, Border, and Padding

Other things you can set with styles include float, border, and padding.

img
{
float: right;
border: 1px;
padding: 5px;
}

Try It!

Create a graphic and save it in the save folder as your HTML document. Use the tags above to insert the image.

Read Creating Small, Fast Loading, Graphics for Web Pages by Walt Howe. This article provides guidelines for using gif, jpeg, and png files on the web.

Background Images

You can also add an image to the background on your page. However background images can be very distracting, so use caution.

Your Document

Your document should now look something like this:
View the Pets project.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Annette Lamb's Personal Page</title>
<meta name="author" content="Annette Lamb" />
<meta name="keywords" content="pet, dog, puppy, cat, kitten, fish" />
<meta name="description" content="Choosing a pet." />
<meta name="copyright" content="© 2007 Annette Lamb" />

</head>

<body>
<a name="start" id="start"></a>

<h1>Choosing A Pet</h1>
<p>Before you choose a pet, it's a good idea to explore the possibilities. Are you ready for the responsibility of a pet? Read the book <b>Pets for Kids</b>.</p>

<p><img src="pets.jpg" alt="puppies" width="148" height="150" align="right" />The most popular pets are:</p>

<ul>
<li><a href="#cats">Choosing Cats and Kittens </a></li>
<li><a href="#dogs">Choosing Dogs and Puppies </a></li>
<li><a href="#fish">Choosing Fish </a></li>
</ul>

<p><h2 name="cats" id="cats">Choosing Cats and Kittens</h2></p>
<p>When choosing a cat or kitten... </p>

<p><h2 name="dogs" id="dogs">Choosing Dogs and Puppies</h2></p>
<p>When choosing a dog or puppy..</p>

<p><h2 name="fish" id="fish">Choosing Fish</h2></p>
<p>When choosing a cat or fish..</p>

<a href="#start"> Return to Top of Choosing a Pet Section </a> <br/>

</body>

</html>

Learn More

WikiGFX

Coding: XHTML: Images