Image Tag and Image File Types

Image Overview

The Image Tag

<img
src="the_path_to_the_image_file"
height="dimension_in_pixels"
width="dimension_in_pixels"
alt="descriptive_text_for_non-graphical_browsers" />

Notice the image tag is a link or reference to an image file; it doesn't have a closing counterpart so it must close itself. The image tag information is all contained within the attributes of the tag.

All of your image tags will contain at minimum of the four attributes listed above; you may add more as needed.

  1. src is the location of the image file, the relative or absolute path.
  2. height is the image height in pixels. You may use a different value than the actual height of the image to constrain it to a certain size. Be cautious; if you change the dimensions of an image too much by this method, it will usually get pixellated or blotchy.
  3. width is the image width in pixels. The same cautions apply as those of the height attribute.
  4. alt or alternative text is used to give web surfers who cannot view images (or choose to turn them off) some information about the content or context of the image. For example, if you are using an image for a navigation or form button, note it in the value of the alt attribute. Illustrating images alt tags will have a description of the image. For images used a pixel shims, use alt="" with nothing between the quotes.

Image File Types

We will be using .jpeg, .gif, and .png files in this class. jpeg and gif have been used the longest, png files are a more recent format.

  • jpeg
    • Use .jpg file type for images that have gradients - photos, gradient filled logos, sunsets...
    • jpegs use 24 Bit color - millions of colors
  • gif
    • Use .gif file type for images with large blocks of color - logos, text graphics...
    • gifs can be transparent, whole or part
    • gifs can be animated
    • gifs use 8 Bit color - 256 colors, so they produce color banding on gradual gradients

  • .png
    • PNG files come in several flavors; for web, use PNG-8bit since PNG-24bit creates a much larger file size. PNG support, especially alpha transparency, has had varying support in Internet Explorer.
    • Unfortunately, Photoshop does not export PNG-8bit with 8-bit alpha transparency, the one PNG file type that has varying levels of transparency (gives a smoother look) and gracefully degrades to 1-bit transparency in Internet Explorer 6. The article listed below has a succinct discussion of PNG files and links to freeware conversion software and freeware file compression software.
    • PNG That Works - A very informative article.
      http://calendar.perfplanet.com/2010/png-that-works/
      ImageAlpha - Mac GUI over some opensource software to convert PNG-24 with alpha transparency to PNG-8 with alpha transparency for much smaller file sizes.
      http://pngmini.com/
      ImageOptim - Mac GUI over a number of opensource compression software applications to compress PNGs, jpegs, gifs, and gif animations. The site has links to the opensource software it uses which are available on other platforms besides the Mac.
      http://imageoptim.pornel.net/

Image Tidbits

  • 72 PPI - Use a resolution of 72 pixels per inch for your images when working in an image editing program such as Photoshop.

  • Use the height and width attributes in the img tag to "carve" out a hole for the image. This will make your pages seem to load faster, the browser knows to leave that space for the image and fills in the rest of the text of the page.

  • Alt attribute - Use the alt attribute in your image tag to give users with text based browsers or graphical browsers with images turned off a chance to know something about the images you are displaying on your page.

  • Images as links - To make an image into a link, surround it with anchor tags just as you would text. If you use images as links, be sure to include text versions of the links to accommodate all browsers. You will often see these links at the bottom of the page in the case of navigation graphics or as a text link adjacent to the image being used as a link.
bottom graphic for DM 60A pages