How to add an image to a Web page?

My friends, an image is included in a Web page by means of the IMG (image) tag. In its simplest form, an image tag looks like this:

<IMG SRC="images/fluffy.gif">

The SRC (source) attribute specifies the name of the image file to be displayed. Like the HREF in an A (anchor) tag, the SRC statement must specify the appropriate path to the image file. This path can be absolute or relative. An absolute path specifies the complete URL of the image file, for example:

<IMG SRC="http://WebDevelopersJournal.com/images/fluffy.gif">

A relative path specifies only the path from the page on which the IMG tag is found to the image file, for example:

<IMG SRC="images/fluffy.gif">

In this example, the image file is found in a directory called "images." For convenience, many site builders put all their images in one directory, often called "images," though you may call it whatever you please. The path in this example will only work if the "images" directory is under the directory where the referring page is found. If the referring page and the image file are in two directories at the same level, the tag would be so:

<IMG SRC="../images/fluffy.gif">

This tells the browser to go up one level, then look for the directory called "images."

If the image can't be found, or can't be displayed for any reason, you will see a little icon that's supposed to look like a "broken image" (in Netscape), or a little square with an X in it (in MS Explorer). If this is the case, it may be that the path specified in your IMG tag is incorrect. Try including the absolute path, and see if that works. Normally, relative paths are used whenever possible, as this reduces load time.

For clarity, I use ALL CAPS for the names of tags and attributes, but it doesn't matter whether you use upper or lower case. Be careful about case in filenames, however. Quite a lot of Web pages are designed on Windows systems, but served by Unix machines. Windows and Unix treat case differently, so always make sure that the filename specified in a tag is exactly the same as the actual name of the file on the server.

Web Image File Formats

At the moment, Web browsers can only display two types of graphic files: GIF and JPG (these are sometimes called JPEG, and have a .jpg or .jpeg file extension). These are both compressed file formats, designed to load fairly quickly in the bandwidth-deprived world of the Web. Both formats have drawbacks, and a newer file format called PNG is in the offing. It's worth reading this recent article about the PNG format, but it probably won't come into widespread use for a while yet, so we beginners will stick with GIFs and JPGs for now.

To create a GIF or JPG, simply save your graphic in the desired format. All the newer graphics software supports both. Which format to use? For technical reasons which we won't get into, JPG tends to look better for photographs, while GIF works better for other graphics. However, only GIF allows you to create transparent and interlaced graphics (details later).

Keep in mind that both GIF and JPG are compressed formats, designed to be used only for the final output of your creative process. Always create your graphics in the native format of your graphics software (.psd if you use Photoshop, for example), and make the conversion to GIF or JPG the very last step. If you need to edit your graphics later, go back to the original files - don't try to edit a GIF or JPG if you can avoid it. Sometimes you can get away with editing these files, but sometimes they come out looking terrible, especially JPGs.

Also keep in mind that even a cheap printer uses a much higher resolution (300 dots per inch or more) than does the (72 dpi) Web. Although it is possible to print a GIF or JPG image, the result will be very low-quality. Always print from the native format of your graphics software, or convert to a high-quality format such as .tif or .bmp. The moral of the story is always to keep your original (native-format) graphics files for future use. If you have a design shop creating graphics for you, make sure they give you the original Photoshop (or whatever) files, not just the GIFs or JPGs.

Pictures on my Web Site - How?
Pictures on my Web Site - How?
Graphics Software