Website resource guide, web development-Image Insertion

Basic Image Insertion

The most basic of HTML elements: are "Images". In most cases, no Web page is complete without them, but too many images can ruin the best Web page.

To insert an image into a Web page, you use the IMG tag. While this tag has dozens of attributes covering all sorts of usage, you'll often need only one attribute: SRC. This attribute tells the browser the URL of the image to be placed into your document. For example, here is a simple image tag that places an image into a document:

In this example, the URL is nothing more than the name of the image file. There is no special formatting that will take place, with the possible exception of adding vertical space above the line to handle images taller than the surrounding text.

Organizing your images

This simple example used a simple image name. This is common, but not the best way to structure your documents. The best way to organize your images is to create a directory called "images". If you take the time to organize your directories, you will be rewarded with both documents and images to which is much easier to maintain as it grows.

This one directory will make it easier to organize your images and share them between related documents. Your other alternative, chosen by far too many Web authors, is to create images in the directory containing the documents that use them. The result is utter chaos: Images being copied all over your site, difficult to find and update, and not a cost effective solution regarding disk space.

To use your shared image directory, you will want to sway from the simple example shown above to either relative or path-absolute URL that always explicitly reference the image directory. Path-absolute URLs would always contain the full path of the image directory for your site. For more flexibility in the management of your documents, consider using relative URLs that reference the image directory relative to the location of the directory containing the referencing document.

For example, suppose you create a directory named images to hold all of your images. Using path-absolute URLs, all your image references would look like this:

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

While this is a bit more to type, the benefits of good site organization will far outweigh the extra effort.

Which format is best?

In the examples above, I used an image extension .gif, indicating a GIF-format image. GIF images, along with JPEG images (typical ext: .jpg) are the vast majority of images used on the Web. Each format has advantages and disadvantages:

GIF images are often larger than JPEG images, but store an exact version of the original image. JPEG images use compression to reduce the overall file size, but suffer some loss in picture quality as a result.
GIF images use, at most, 256 colors to make up the image. Simple GIF images may use as few as 2 or 4 colors, allowing for smaller images. JPEG images can have millions of colors, allowing for truer images at the expense of being of higher image size.
GIF images support transparency, a feature where the background is invisible.
Both formats can be displayed as they are received by the browser, making it easier for users to see the image before it is fully downloaded.

When deciding between the image extensions my advice:

Use GIF images for simple images, i.e: bullets, little icons, and simple graphics that do not require millions of color.
Use JPEG images for photographs, images with many colors, and larger images that you want to make as small as possible for fast downloading.

<< BACK