home -- outline -- lectures -- assignments -- discussion -- tips -- links --



Intro to the Web: Wednesday, Jan 21


Images: Vocabulary
  • Anti-Aliasing: no jaggy edges (good for circles curves)
  • Background Correction: getting rid of a " halo ", making edges clear

Inline Images: Basics
  • Text Flows Around Images.
  • Use much more bandwidth than plain text.
  • GIF, JPEG, (and soon PNG) are widely supported by browsers.

Comparative Bandwidth
  • Speed of connectivity varies dramatically:
    • ATM - 155 Mb/s
    • 100BaseT - 100 Mb/s
    • T3 - 45 Mb/s
    • 10BaseT - 10 Mb/s
    • T1 - 1.5 Mb/s
    • ISDN 64 or 128 kb/s
    • Modem (x2) 56 kb/s
    • Modem 33.6 kb/s
  • Mb = 2^20 bits (about 1 million)
  • kb = 2^10 bits (1024)

Time to download 100 kB image
  • 155 Mb/s ATM: 0.005 sec
  • 45 Mb/s T3: 0.02 sec
  • 1.5 Mb/s T1: 0.5 sec
  • 128 kb/s ISDN: 6 sec
  • 28.8 kb/s modem: 28 sec
  • 14.4 kb/s modem: 55 sec

GIF
  • Graphics Interchange Format (.gif)
    • Developed by CompuServe (patented too!)
    • Uses 8-bit per pixel color from 256 color palettte.
      • Dithering possible for simulating extra colors.
    • LZW (Lempel-Ziv-Welch) lossless : deompressed image and original look the same.
    • 89a builds on 87a.
    • good for high-contrast / line graphics and type

GIF 89a
  • Supports:
    • 4 pass interlacing (row-by-row display).
    • One transparent (usually the background) color.
    • Animations (sequence of images displayed over time).

JPEG / JFIF
  • Joint Photographic Experts Group (.jpg/.jpeg)
    • Uses 24-bit per pixel color. 16.7M colors.
    • Lossy compression based on observation:
      • People are sensitive to changes in brightness.
      • People are not sensitive to subtle changes in color.
    • New progressive version/format available.
    • Variable compression.
    • Good for photographs, rendered images, (shading)

Which Scheme is Better?
  • GIF
    • Text
    • Sharp edges
    • Large filled regions of solid colors
    • Few colors in total
    • A transparent background is required

PNG
  • Portable Network Graphics
    • Patented GIF format results in new format:
    • Uses 8-bit per pixel color from 256 color palette.
    • Uses up to 48-bit per pixel color, 16-bit per pixel grayscale.
    • Uses up to 8-bit per pixel partial transparency (called alpha-blending).
    • Two dimensional interlacing (progressive display 8x faster than GIF)
    • Unpatented lossless compression, 10-30% better than GIF.
    • has an Alpha Channel
      • transparency
      • masking
      • added image information or metadata (replaces <ALT> attribute)
    • limited support (boo hoo)

Flash Pix
  • Live Picture brainchild
  • bi-directional interlacing on JPEGs and PNGs
    • pyramid of image data
    • each level is a resolution
    • high at bottom , low at top
    • people can click in to higher resolutions
  • not supported by current browsers.



Using Images
  • Each Image requires a separate HTTP connection.
  • Giving HEIGHT and WIDTH allows text to be displayed in the correct location before the image downloads.
  • Use HSPACE and VSPACE to give your image breathing space.
  • Use BORDER = 0 for transparent GIFs.

Using Images
  • HEIGHT and WIDTH can be used to fill flood regions, by tiling the SRC image.
  • Remember <BR CLEAR = left | right | all>.
  • Use progressive formats.

Images as Links
  • < a href=" http://www.cs.uchicago.edu/~hunicke/" >
    < img src=" http://www.cs.uchicago.edu/~hunicke/me/gif/Robin.gif " > < /a >

  • < a href=" http://www.cs.uchicago.edu/~hunicke/" >
    < img src=" http://www.cs.uchicago.edu/~hunicke/me/gif/Robin.gif BORDER=NO " > < /a >


Image Maps
  • Combines Images and HyperLinks.
  • Allows you to Associate Regions in an Image with HyperLinks.
  • Can be server-side (CGI powered) or client-side (Browser powered).
    • client-side image maps can be created by anyone (server-side requires special access)

Back to <IMG> TAG
  • <IMG USEMAP=#FragmentName SRC=URL ...>
  • USEMAP specifies client-side image map

The <MAP> Tag (& Friends)
  • <MAP NAME=#FragmentName> List of Areas </MAP>
  • <AREA COORDS=["#,#,#..." | "%,%,%.."] HREF=URL [SHAPE= rect | circle | poly] [NOHREF] [ALT="Alternate Text"]>

<MAP> Example
    <map name="navbarmap">
    <area coords="0,0,49,49" href="http://www.somewhere.com/index.html " shape="RECT" >
    <area coords="50,0,99,49" href="http://www.somewhere.com/index.html " shape="RECT" >
    <area coords="100,0,149,49" href="http://www.somewhere.com/index.html " shape="RECT" >
    <area coords="150,0,199,49" href="http://www.somewhere.com/index.html " shape="RECT" >
    ...
    </map>

    <img src="/img/frontpage/sw_bar7a-sz.gif" border="0" USEMAP="#navbarmap" ISMAP align="left">
    Example:


Designing with Image Maps
  • Huge images take up space and are slow: same with huge image maps.
  • Changing an image map can be a pain: use buttons for dynamic pages
  • Tables or frames give you the same idea of "clickable area" without the mess.