Using Images

More information on the use of images and color.
Issues to consider
  • Large images slows download time
  • Images can distract from message
  • Search engines ignore images
  • Use ALT attribute with images because
    (1) some people turn off automatic image download and
    (2) readers used by visually impaired ignore images
    •  
    Image Formats
    GIF - Graphic Interchange Format, 8-bit loseless
    JPEG - Joint Photographers Experts Group, 8-bit or 24-bit lossy
    PNG - Portable network Graphics, 8-bit or 24-bit lossless
    TIFF - Tagged Image File Format, used for document exchange
    BMP - Bit Mapped Picture, used in image editors
     
    Image Sizes
    Compute by Width x Height x bits/pixel (bpp)
     
    Adding an image on a page
    The following example code uses several basic attributes of the <img> tag:

    <img src="media/cape_hat.jpg" ALT="Cape Hattaras, NC" height=424 width=295 align="top" >

    The image displayed by the code. Resize the browser window to see what happens to the text.
     
    In the following example code the alignment is changed to middle and the width and height reduced:

    <img src="media/cape_hat.jpg" ALT="Cape Hattaras, NC" height=150 width=104 align="middle" >

    The image displayed by the code. Resize the browser window to see what happens to the text.
     
    Attributes for the <img> tag:
    • SRC
    • ALT
    • LOWSRC
    • HEIGHT, WIDTH
    • ALIGN - the standard values are TOP, MIDDLE, and BOTTOM (the default), however some browsers also recognize LEFT and RIGHT. The code to align an image to the left border of a page is align="left" or style="float:left" within the <img> tag. To create space between an image and surrounding text the VSPACE and HSPACE attribute can be used.

      A sample of the result of using a LEFT alignment. Resize the browser window to see what happens to the text.
     
    Using an image as a link
    Enclose the <img> tag within the <A> container tag. Set the BORDER attribute of the <img> tag to "0" to remove the outline around an image link.

    Here is a sample with two links, one using BORDER="0" and one not.
     
    Tools for use with images
    Screen Ruler (www.kagi.com/microfox)
    IrfanView (www.irfanview.com)
    PaintShop Pro and Animation Shop
    PhotoShop and ImageReady (Multimedia Lab)
     
    Tutorials
    The ImageReady Tutorial shows how to construct a simple gif animation.
    The IrfanView Tutorial shows how to edit a graphics image.