Tips for Creating Website Graphics - Using Attributes when Adding Images to a Web Page - Part 2 of 2

Although a few Web pages contain only text, by far most Web pages contain images, even if they are only in the background. Some Web page images move and shake and twirl around, but most don’t (thank goodness). Most Web page images are designed to add something to the page, like symmetry or explanation, even motivation to buy.

Although adding images to a Web page is fairly simple, I offer a few tips for those who are still learning. (In this article, I will discuss adding images with HTML tags and not style sheets.) 

To add a photo of Fluffy to a Web page, type: <img src=“Fluffy.jpg”>

In this tag, img stands for “image” and src means “source.” In the example above, the photo of Fluffy resides in the same folder as the Web page or HTML file. When the image is in another folder, or a folder within a folder, the information after src needs to include the image path, like this: <img src=“images/catphotos/Fluffy.jpg”>

On an elementary level, that’s all there is to it. But paying attention to the extras in an image tag can make a difference in how your Web page loads, looks and functions.

When a Web page is opened with a browser, the text loads first while the images continue to download. Generally, your images will load faster if you specify the width and height of each image in the image tag, using the width and height attributes. When you specify the image dimensions, the browser doesn’t have to take the time to figure out the image size. Image size is generally expressed in pixels, like this: <img src=“Fluffy.jpg” width=“250” height=“120”>

If you want Fluffy to look long and lean, you can indicate measurements that are different than the actual image dimensions. For instance, you could tell the browser to display the Fluffy image as 275 x 100, instead of its actual size of 250 x 120. These altered dimensions would distort the image to make Fluffy look longer and shorter. Generally, you won’t do this, but it is an option.

As you may have noticed, textbooks never crowd the text right up against an image. Instead, they create a nice buffer around the image, holding the text away a few pixels. Adding space around your images not only makes your Web page look nice for viewers, but it also shows that you know how to use white space.

To create a buffer around your image, add hspace and vspace attributes to the image tag. These attributes indicate (in pixels) how much blank space you want to leave horizontally (hspace) and/or vertically (vspace) around the image. You can use one attribute without the other if desired. To leave a blank space of 10 pixels all the way around the image of Fluffy, we would add these attributes to the image tag:

<img src=“Fluffy.jpg” width=“250” height=“120” hspace=”10” vspace=”10”> 

Whenever you add an image to a Web page, you can use the Alternative (Alt) attribute to briefly explain the image. For instance, if you created an image for your Web page heading (so that you could use a fancy font), then you can use Alt to spell out the text. If the image you add is a photo of the Elbe River as it flows into the North Sea, you can use the Alt attribute to explain that.

Alternative text is helpful for those who surf the Internet with images turned off (which some do for quicker page loading), but alternative text is a must for the visually impaired viewers who use Web readers or other accessibility devices to read Web pages. Although they cannot see the image, their readers tell them what is written in the Alt attribute.

In our Fluffy image tag, we could add this Alt attribute:  <img src=“Fluffy.jpg” width=“250” height=“120” Alt=“Photo of Fluffy on the porch”>

Many HTML editors, including Adobe Dreamweaver, ask for the Alt text any time you add an image to a Web page.

Please Note: The graphics that you use to create borders, background designs and transparent spacers should either have no Alt tags or else empty Alt tags, like this: Alt=“”.  Adding a text description to these designs and “housekeeping” images produces unnecessary clutter for users of screen readers.

Using Alt attributes in your image tags is part of Section 508 Compliance.

Below, see the photo of Fluffy on the porch.

Happy Web page building!

To learn which image format is right for you, including definitions of the more common image file formats - GIF, JPG and PNG - please see part 1 of this series called Tips for Creating Website Graphics - Which Image Format is Right for You?