Images, what's a webpage without them?! Images can be picky when they are being displayed on the internet threw a web browser. For instance they need to be set in RGB mode and not print graphics mode (CMYK). As a quick and general rule about graphics on web sites simply remember that you should only ever use two file formats .gif and .jpg  For more information and tips on images on the internet goto the Jazzd Personal Web Space Tips page. This page will explain the differences and pros and cons on using a .gif over a .jpg  

Also if you are not interested in creating your own images for your site, you can easily go to the Web Space Resources page and find links to sites that have all kinds of images and buttons for you to create your own site with. At that page you can also download image editing programs to create and/or edit your own images.

There are a few ways to display images, with the most basic way to simply use the <img> tag. Other ways to display images is to make them backgrounds in a table, a table cell or the background of the whole page. (learn how to do that at the tables page

(view the source of this page for more indepth source code commentary on images and image tags)

<img src="URL" height="" width="" alt="">

Now let's break down this image tag and describe what each attribute does. The first attribute in an image tag is almost always src="URL" src means source and it tells the browser where to find the image that you want to display. URL is replaced with a relative file path or an absolute file path, with the location of the file.

• absolute URL paths, are src or href that provide the full URL (http://www.dejazzd.com/images/file.gif), absolute paths make it possible to display images or link to files outside of your own site and web server.
• relative URL paths, are src or href that describe the location of a file that is in relation to the current file that you are in. It is a form of shorthand almost. It's also known as slash dot syntax. Where contents of folders is seperated by slashes ( / ) and to move back and out of folders you use two dots ( .. ). Here's an example: src="../images/header.gif" this source means that there is a folder named images on the same level as the current folder (so you have to go back a folder), it also states that there is a file named header.gif in this images folder.

width="#" attribute tells the browser how wide the image is, using this attribute is helpful to speeding up the display of the image. height="#" works the same as width and tells the browser how tall the image is. These two attributes do not need to be the exact dimensions of your image, but for your information, HTML does not do a good job of resizing images, it's best to put in the correct dimensions and resize the image in a graphics program.

align places the image in alignment with another object. align values can be left, right, top, middle, bottom, baseline, text top, absolute bottom, absolute middle, and absolute top

alt is the alternate text that you provide for the image for browsers that did not display the image correctly or for people with disabilites that maybe using a program to speak the whole page to them.

border is mainly used for image links, default for a linked image is set to 1 so to not have an outline of your link color around the image you need to make border="0"

The way you make an image a link is by placing the <img> tag inside the <a href> tag's opening and closing tag. Like this:

<a href="URL"><img src="URL" width="125" height="60" alt="Alternate Text" border="0"></a>

You may also add text or anything else you want inbetween the <a href> opening and closing tags. Anything that appears in between the link tags will be clickable and a link.

See how easy it is to make your own
photo gallery with captions and links to larger photos