Images

There is a saying that "a picture is worth a thousand words". Well with an average of just over five letters per word and a space between each a thousand words will take up about 6k.

The web supports three different image formats:

Which of these three image formats you should use for the individual images for your site depends on what sort of image that it is. If you need 256 colours (or fewer) and the ability to have transparent areas so that the image doesn't look rectangular (eg. for buttons, icons, etc) or if you require animated images then gif is the obvious choice. If you want more than 256 colours (eg. for photos etc) then jpeg is probably your best choice. png provides even more colour levels than jpeg because it supports partial transparency levels as well, not all poular browsers currently support the format properly though.

Images on the web are not stored in your web page itself. Instead they are uploaded to somewhere on your site and you link them into your web page where you want the image to appear. Your web site will be better organised if you put the images into a separate folder from your web pages themselves. You can call this folder (if you decide to have one) whatever you like. I use img as the name of the folder that contains my images because it chearly identifies what the folder contains without using more characters in the name than necessary. Your image files themselves should also use short but readily identifiable names. File names should be alphanumeric (in particular avoid spaces in the file names).

Use your graphics software on your computer to convert a photo of yourself into a format suitable for the web and upload it to your site using your FTP software. We will now add that photo into our web page.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Images</title>
</head><body>
<h1>Steve's Page</h1>
<p><img src="img/steve.jpg" width="66" height="92"
alt="Photo of Steve" title="This is a tooltip." />
</p>
<p>This web page was written by Steve.</p>
</body></html>

Here's what the Images page looks like in your web browser.

The img tag is what links the image into the page so it goes in the spot in our code where we want the image to appear. This particular tag does not need to surround any content and so a matching closing tag is not required. Instead we indicate that the tag is self contained by placing a slash immediately before the end of the tag.

The tag also contains several attributes. XHTML attributes are always defined with the attrribute name followed by an equals sign and then the attribute value enclosed within quotes. (Unlike HTML where the quotes are sometimes optional and where everything apart from the name is optional for certain attributes).

The src attribute identifies where the image is to be loaded from. For my page it is a file called steve.jpg that can be found in the img folder. The folder name is always separated from the file name by a slash like this.

The width and height attributes should always match the actual width and height of the image. The rerason why we include them in the tag like this is that it allows the browser to reserve the necessary space on the page and display the rest of the page in its correct position while still waiting for the image to load. Images are one of the larger file types used on most web pages and are therefore the slowest loading (particularly those of over 6k).

Because images are so slow loading some people have images turned off in their browser. Other people use talking browsers that can't display images. For this reason we use the alt attribute to supply some alternate text that will appear in place of the image where the image is not able to be displayed.

Each of the attributes I have mentioned so far is required for your image tag to be considered to be valid. The one optional attribute that I decided to introduce you to at this point is the title attribute. This is used to make some descriptive text appear when the mouse is moved over the part of the web page that is contained within the tag. The text that appears is commonly known as a "tooltip". The title attribute is not restricted to images but can be used to attach a tooltip to any of the tags within your web page. The reason why I introduce this attribute at this point is that if you do not define a title attribute for your image then Internet Explorer will incorrectly display the alt text as a tooltip. For consistency across all web browsers you should include a title attribute on all images. If you do not actually require a tooltip then the value of the title attribute can be empty (by placing the two quotes immediately next to one another without any intervening spaces or text).

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate