Images

CSc 302 Outlines

Linking

Design

Images in Web pages. [ Image Examples ]
1. The web page refers to the image, which is a separate file.
2. <img src="http://www.website.org/some/place/here.gif" />
3. The web page specifies a URL. Any of the forms used in a are fine.
4. The browser makes a separate request for the image.
5. Placing images from another site.
  1. Allowed by HTML, but may be prevented by the server.
  2. Probably legal, unless part of a fraud.
  3. Usually rude.
Alt attribute:
<img src="http://www.mc.edu/images/logos/mcclock.gif" alt="MC Logo" />
1. Some browsers use it as a mouse-over.
  Firefox and other Mozilla family use title.
2. Screen readers for blind visitors.
3. Actually required, though I've never seen a browser complain.
Width and height attributes. [ Resized Images ]
<img src="http://www.mc.edu/images/logos/mcclock.gif" height="118" width="90" />
1. Keeps the browser from having to rearrange the page when the image finally shows up.
2. Can resize the image.
3. Setting one dimension retains the proportions.
4. Setting both can distort the image.
Image placement. [ Image Placement. ]
1. Without any horizontal alignment, images are treated as fat characters.
2. Vertical alignment:
  <img src="http://www.mc.edu/images/logos/mcclock.gif" align="top">
  Also, bottom, middle.
3. Horizontal alignment: align="left", align="right"and align="middle".
  Horizontal alignment also causes the text to flow around the image.
Space around images. Expressed in pixels. [ Image Spacing ]
1. On the sides: hspace
2. Above and below: vspace
3. Border width.
Image File formats.
1. Images are just arrays of numbers designating colors.
2. Image data must be compressed to keep sizes reasonable.
3. Lossy and lossless compression.
  1. Lossless: Retains all original information.
  2. Lossy: Trades compression for fidelity.
  75% 4.7K 60% 4.5K 40% 3K 25% 2.6K
4. GIF (Graphics Interchange Format)
  1. Lossless compression.
  2. Indexed: 256 colors max.
  3. Works best with line drawings, diagrams. Generally, a few distinct, solid colors.
  4. Transparent GIFs:
    
    Transparency works best with sharp edges.
  5. Animated GIFs. Typically as useless as this one.
    
    Browsers generally have options to control the animation.
  6. Interlaced GIFs. Look nicer when loading slowly.
  7. Patents.
    1. Unisys patent expired June 20, 2003 in the US.
    2. IBM holds one until Aug. 11, 2006. Likely not valid; never been enforced.
5. JPG (Joint Photographic Experts Group)
  1. Photographs.
  2. 16,777,216 colors. (Tad over 256.)
  3. Lossy compression (those are JPG horses).
  4. No transparency, animation, interlace, or patents.
6. PNG (Portable Network Graphics)
  1. Replacement for GIF.
  2. Keep your 16,777,216 colors.
  3. No patents.
  4. Often larger than GIF.
  5. Not particularly well-supported.
Linking with images.
1. Simply place an image inside the <a> tag:
  <a href="page.html"><img src="img.gif" /></a>
2. Often like to use border="0".
  <a href="page.html"><img src="img.gif" border="0" /></a>
Image maps. [ Imagemap Example ]
1. A picture where parts are links.
  1. Specify an image with <img>
  2. Specify the map with the usemap attribute.
  3. Specify a map with the <map> tag.
  4. The usemap gives a URL, which is almost always internal (starts with #).
  5. The <map> contains a name or id (use both) to match it to the <img>.
2. Maps: <map> . . . <area> . . . </area> . . . </map>
  1. <map> attributes: id or name; use id.
  2. <area> attributes.
    1. href and alt: Same as <a>.
    2. shape: rect, circle, or poly.
    3. coords: List of coordinates according to shape.
    4. A string, giving values separated by commas.
      1. For rect: Coordinates of upper left and lower right, four values.
      2. For circle: Coordinates of center and the radius, three values.
      3. For poly: Coordinates of each corner, two values for each point.
      4. Areas can be effectively combined by linking them to the same place.
3. The ismap attribute of <img>.
  1. Specifies a server-side map. A server-side map is processed by the server, not the browser.
  2. Clicking the image sends the coordinates to the server, which responds with an appropriate page.
  3. Original map; not so common now.
4. Most image processing software tracks the location of the mouse. This can let you build an image map.
Using images well.
1. Images should be as small as possible to save time.
  1. Reduce the dimensions.
    1. Using height and width sends the large image, and the browser reduces it.
    2. More efficient to make a smaller image on the server.
    3. Most any image software.
  2. Reduce the number of colors.
  3. Increase the compression.
2. Reuse images.
  1. Link the same image from many pages.
  2. Browsers cache.
  3. Copies in different places lose this advantage.
3. Some [ interesting stretches ].
Audio and video.
1. Audio formats: MP3, real audio, wav, etc.
2. Video formats: AVI, MPEG, QuickTime.
3. Support in any particular browser will be uncertain.
4. Can play sound by simply linking a file of that type. train gong
  Click <a href="noise.mp3">here</a> to play sound.
5. The <embed> tag.
  1. Not, apparently, standard XHTML.
  2. <embed src="someurl.mp3" autostart="true">
  3. <embed src="someurl.mpeg" autostart="false" width="400" height="200">
Resources
1. The Gimp is a free and fine image manipulation program.
2. Inkscape is another graphics editor. It can produce SVG images which scale well.
3. ImageMagick is a set of command-line tools for manipulating images. It is particularly useful for automating image operations, or peforming a transformation on a large batch of images.
4. The Open Clip Art Library is sort of a clip-art cooperative. They have much content stored in the SVG format, which can be converted to more common formats using Gimp.

Linking

Design


75% 4.7K	60% 4.5K	40% 3K	25% 2.6K