Images In HTML Documents

TOC

HTML documents were originally all text-only. Soon though, scientists and engineers saw the need to provide illustrations to their treatises, and a means of placing images was developed that would allow NCSA Mosaic to display them. Several image compression formats were developed to minimize transmission (download) times. Two formats emerged as the defacto most common standards, and are still around today: GIF and JPEG.

GIF format is best for smaller images with lots of same-colored area. JPEG or JPG is better for larger images (it compresses into smaller files). GIF is a "loss-less" compression. That is, no picture information is lost. On the other hand, JPG allows selection of a "quality" factor that regulates the amount of picture information that is lost during compression, thereby decreasing file size. Most images can be shrunk with a factor of "medium" and still look as good on modern screens as full-quality ("maximum") settings, for purposes of use in web pages.

To place an image anywhere in the body of your document, use the image tag. The "image" is abreviated to "img" and the tag includes at least a "source attribute" (abreviated "src"):

<img src=

the "src" is a path or a URL that locates the image. For example:

"i/fig2.gif" -- if the image is in a local "i/" directory, or

"http://anotherdomain.com/i/fig2.gif" -- if the image is on another site.

NOTE: It is rude and often illegal to link to an image on someone else's website without optaining permission. Doing so increases the other person's site bandwidth and could result in their accruing hosting surcharges.

since the img tag has no "close" tag, we must close it in the open tag much the way we do for <br /> and <hr />, by ending the tag with "(space)/>".

<img src="i/fig2.gif" alt="Figure 2" />

The alt attribute text can will be displayed in lieu of the image in text-only browsers like the Lynx browser in UNIX systems or on some cell phones and PDAs that can connect to the web. The alt attribute is required under strict XHTML and can be set to null if you have no alternate text to put in it:

Alt text can have capital letters and spaces, or be null, unlike filenames, which cannot.

alt="" />

Some considerations for the use of images:

  1. There should be a good reason (artful design element, illustration, etc) for placing the image -- images slow down page loading.
  2. Pre-size the image to fit the space in your page reserved for it before uploading it to the server. Shoot for a compressed file size of under 20K bytes.
  3. For large images, it is best to place a "thumbnail" (smaller, low-quality version) which links to the full-sized image. (See "Thumbnailing Images")
  4. Keep the number of images per page as low as possible.
  5. When designing navigation methods for your site (links to your pages), resist the temptation to use images as the clickable navigator links. There are ways of using CSS to make nice navigators that resemble graphical "buttons".
  6. Select the compression (file type) appropriate to the image; GIF for small decorations or images under about 100 pixels high or wide, JPEG (JPG) for larger images.

<< Hypertext Links (Anchors) | Index | GIFs and JPEGs >>