w e b
g r a p h i c s

Computing & Information Services Deptartment
instructor: jim.cerny@unh.edu

http://www.unh.edu/NIS/Courses/Graphics/
06-Oct-1999

Internet: Web Graphics

Not currently scheduled.
Last offered Oct 5, 1999, 1:00-3:00 p.m., Ham-Smith 3.

Description:
Review and explanation of common Web graphics formats (GIF,JPEG). How to use HTML to include inline images, image mapss, animated GIFs, plus use of cut-and-paste JavaScripts. Sources for graphics. Lecture/demo format.
Prerequisite: Basic HTML authoring.
Instructor: Jim Cerny

This document and its links comprise the discussion outline, including many illustrations, references, and the hands-on examples for the October, 1999, incarnation of the course.

Overview.

Description:
How to use HTML to manipulate colors and backgrounds, to include inlines images, image maps, animated GIFS, plus use of Cascading Style Sheets. Review and explanation of Web graphics issues and terminology, including formats (GIF, JPEG, PNG). Sources for graphics software and graphics. Lecture/demo format.

Goals:
(1) To look at the more basic and useful HTML tags for graphics; (2) To review Web graphics terminology and choices; (3) To point to some useful resources. We will peek at Cascading Style Sheet coding.

Disclaimer:
Netscape is the only application mentioned here that is on the Computing & Information Services Supported Products List.

General Advice:
• Make graphics small and fast to load. • Design for a basic monitor (72 dpi, 256 colors). • Simple is good. • Design with disabilities in mind. • Test with several common browsers, versions, hardware. • Avoid the small-child-with-hammer syndrome with new "tools".
Example of Bad Web Graphics

Graphics Effects in HTML.

This section demonstrates specific ways to use graphics in your HTML coding. The topic is defined broadly to include use of color and backgrounds on Web pages. Emphasis is on HTML tags and attributes consistent with HTML 3.2, of which many were deprecated in HTML 4.0, with a peek at the use of Cascading Style Sheets (CSS) that is now emphasized as preferred technique. Use your browser's "View Source" capability to see the HTML code for the examples below.

• Color and Backgrounds.

There are many HTML BODY tags that have graphical effects. These include use of background colors and patterns and use of fonts.
Examples

• Tables for Graphical Layout.

Tables can be used to control layout and as a kind of graphic panel. Prior to HTML 4.0 and CSS, a variety of HTML tags and attributes were used for such control. Now there is a renewed emphasis on CSS for layout. Both HTML and CSS are easy to understand in principle, but can get complex in details. See:
Graphic panel as HTML Table
Graphic panel as CSS
Table colors

• Inline Graphics.

• Specified with IMG tag. • Allows many attributes, including SRC, ALT, ALIGN, HSPACE, VSPACE, WIDTH, HEIGHT, BORDER, USEMAP, LOWSRC. • Can be used as a hyperlink instead of text. • Takes advantage of caching behavior of browsers. • The single-pixel GIF trick. • Adobe Acrobat PDF files as an alternative.
Basics of inline graphics
Single-pixels GIFs
Bitstream PFR font technology

• Hyperlinks.

• Use the A (anchor) tag. • HREF and TARGET attributes.
Anchor tags for graphics (HTML version).
Anchor tags for graphics (PDF version).

• Animated GIFs.

• Defined in GIF89a specification. • Number of images to use. • Software tools to use. • Looping. • Delay.
Animated GIF examples

• Image Maps.

• Associate URLs with areas. • Client-side (browser) processing. • Use of MAP and AREA tags with IMG tag.
Image Map example left-right
Image Map example mountain and background
Image Map example UNHINFO front page

• Cascading Style Sheets.

• Separate structure and layout. • Introduced coincident with HTML 4.0 • The "cascade" refers to order of precedence when several layers of style are coded.
  CSS discussion in general.
  CSS layers example with Guy Noir.
  CSS layers and clipping example with Retro face.

Graphics Issues and Choices.

• Bit-mapping vocabulary.

• bit-mapped vs. vector graphics. • pixels (raster). • monitor size and VRAM and dpi. • dot (mask) pitch. << .3mm

• Bit-depth possibilities.

• 8-bit=256 colors. • 16-bit=65.5K colors. • 24-bit=16.7M colors. • 32-bit=16.7M colors + 8-bit masking channel.
  Number bases and measurement.

• Color topics

• gray-scale. • duotones. • indexed color. CLUT=color lookup table. • RGB color (true color). • CMYK color. • HSB color. • HSV color. • system gamma value. • monitor color temperature. • psychophysics.
   Color Use with HTML.
   Gamma resources.

• File Formats.

• TIFF. • PICT. • GIF (Unisys). • JPEG. JFIF. quality versus compression. • PNG. • PDF (Adobe). • PhotoCD (Kodak). • FlashPix (HP,Kodak,Microsoft,HP,Live Picture).
   Blowfish with GIF/JPEG/PNG alternatives.
   Encyclopedia of Graphics File Formats.
   GIF Patent Issues.
   JPEG Image Compression FAQ.
   PNG Home Page.
   Kodak Photo CD Information and Demo.
   FlashPix FAQ.

• Processing Effects.

• dithering. • anti-aliasing. • interleaving or progression. • compression. • multi-image animation. • sharpening. • color reduction.
   Optimizing Web Graphics.

• Making Graphics Smaller.

To make your graphics smaller and your pages load faster, use a mix of these techniques:

• Eliminate graphics you don't need. • Crop the graphic. • Resize the graphic. • Use inline thumbnails as links to full images. • Reuse graphics to take advantage of browser caching. • Reduce colors. • Choose an appropriate format (GIF/JPEG/PNG).
  GIFBot online utility.
  Making small icons.
  Reducing size of Web graphics.
  JPEG vs GIF vs PNG for blowfish.

References.

Return to Courses page.

jim.cerny@unh.edu (photo of Jim Cerny) D   Stop me before I click again!