HTML Images (HTML Tutorial part 16)

Images are a staple of any web designer, so it is very important that you understand how to use them properly. Use the <img /> tag to place an image on your web page.

HTML Code:

<img src="sunset.gif" />

Image:

HTML - Image src

Above we have defined the src attribute. Src stands for source, the source of the image or more appropriately, where the picture file is located. As with links described in a previous lesson, you may use any standard URL to properly point the src attribute to a local or external source.
There are two ways to define the source of an image. First you may use a standard URL. (src=http://www.Tizag.com/pics/htmlT/sunset.gif) As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src="../sunset.gif") The location of this picture file is in relation to your location of your .html file.

URL Types:

Local Src	Location Description
src="sunset.gif"	picture file resides in same directory as .html file
src="../sunset.gif"	picture file resides in previous directory as .html file
src="../pics/sunset.gif"	picture file resides in the pic directory in a previous directory as .html file

A URL cannot contain drive letters, since a src URL is a relational source interpretation based on the location of your .html file and the location of the picture file. Therefore something like src="C:\\www\web\pics\" will not work. Pictures must be uploaded along with your .html file to your web server.
Each method has its pros and cons, for instance using the URL of pictures on other sites poses a problem if the web master(s) of the other site happen to change the physical location of the picture file. Copying the file directly to your web server solves this problem, however, as you continue to upload picture files to your system, you may eventually run short on hard drive space. Use your best judgement to meet your needs.

HTML - Alternative Attribute

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.

HTML Code:

<img src="http://example.com/brokenlink/sunset.gif" alt="Beautiful Sunset" />

Alternative Text:

HTML - Image Height and Width

To define the height and width of the image, rather than letting the browser compute the size, use the height and width attributes.

HTML Code:

<img src="sunset.gif" height="50" width="100">

Height and Width:

Above we have defined the src, height and width attributes. By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image's dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.

Vertically and Horizontally Align Images

Use the align and valign attributes to place images within your body, tables, or sections.

1. align (Horizontal)
• right
• left
• center
2. valign (Vertical)
• top
• bottom
• center

Below is an example of how to align an image to the right of a paragraph.

HTML Code:

<p>This is paragraph 1, yes it is...</p>

<p>

<img src="sunset.gif" align="right">

The image will appear along the...isn't it?

</p>

<p>This is the third paragraph that appears...</p>

Image Wrap Arond:

This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this image alignment works.
The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that, so it's rather a waste, isn't it?
This is the third paragraph that appears below the paragraph with the image!

Images as Links

This will be a quick review of the links - image lesson. Images are very useful for links and can be created with the HTML below.

HTML Code:

<a href="http://www.tizag.com/">

<img src="sunset.gif">
</a>

Image Links:

Now your image will take you to our home page when you click it. Change it to your home page URL.

Thumbnails

Thumbnails are small size (Kilobytes) pictures that link to the larger, high quality picture. To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. Now make this low-quality picture into an image link and have it point to the the high-quality picture.

HTML Code:

<a href="sunset.gif">
<img src="thmb_sunset.gif">
</a>

Thumbnails:

HTML Gifs vs. Jpegs

Gifs are best used for banners, clip art, and buttons. The main reason for this is that gifs can have a transparent background which is priceless when it comes to web design. On the down side, gifs are usually larger files, not as compressed as a jpeg, which calls for slow load times and large transfer rates. Gifs are also limited to the 256 color scheme.
Jpegs however, have an unlimited color wheel, and have a high compression rate downsizing your load times and saving hard drive space. Jpegs don't allow for transparent backgrounds, but their size/quality ratio is outstanding. Its best to use Jpegs for photo galleries, or artwork to allow the viewer to catch that extra bit of detail. Avoid Jpegs for graphical design, stick to using them for thumbnails and backgrounds.