outline

GIF (Graphic Interchange Format)

• First graphic file displayed by early web browsers
• Platform independent
• Only graphic file format universally supported by all graphical browsers, regardless of version.

GIF87a versus GIF89a

• Both fully supported on most browsers
• Use .gif as the file suffix
• GIF89a includes transparency and animation capabilities
• 8 bit indexed color (can contain up to 256 colors [2^8=256])

GIF Compression

• "Lossless" compression
• Uses LZW (Lempel-Zev-Welch) compression which allows repetition in data streams

When to use GIFs

• Use on images with areas of flat color (logos, line art, cartoon illustrations)
• 

Tools used to create GIFs

• Image-editing Software
  -Microsoft PhotoDraw on Office 2000 Premium
  -Paint Shop Pro
  -Adobe Photoshop - the professional industry standard
• Web Graphic Tools
  -Macromedia Fireworks 1.0 (http://www.macromedia.com/)
  -Adobe ImageReady 1.0 (http://www.adobe.com/)

Transparency and How it Works

• Transparency allows the background to show through
• The transparent area is indicated by selecting an off color (hot pink, slime green, etc.) for the background color.
  -Save this color as the transparent color

Keep GIF Files Small

• The standard guideline for estimating download time over a modem is 1 sec. per kilobyte.
• Remember, people wait only about 7 seconds before they move to the next page.
• Limit dimensions
  -scale large images down
  -crop out any extra space around important areas of your image
  -avoid any large graphics that aren't absolutely necessary

JPEG (Joint Photographic Experts Group)

• JPEG is a compression algorithm
• Are platform-independent
• Contain 24-bit RGB color information
  -comprised from the true color space of millions of colors
  -can contain gray scale
• When displayed on a system that supports only 8-bit color, the browser will reduce the colors in the image to the Web Palette

JPEG Compression

• "Lossy" Compression
  -some color is lost in the compression process
  -loss in photographic images is not discernible to the human eye
• JPEG compression allows you to determine the degree the image is compressed.
• Once compressed, the image quality cannot be regained.

JPEG Decompression

• JPEG files must be decompressed before being displayed by the browser
• Displaying takes more time than a GIF file

When to use a JPEG file.

• Best used for photographs, paintings, watercolor illustrations and grayscale images.
• 

Minimize JPEG File Size

• Reducing bit-depth is not an option as JPEGs are always 24-bit by nature.
• Standard JPEGs use a precalculated, general purpose compression table

Web Palette

• This palette consists of the 216 colors capable of being displayed by both Mac and Windows systems
• Colors in the Web Palette are defined using their numerical values.
• Consists of 6 shades of RED, 6 shades of GREEN and 6 shades of BLUE giving you 216 possible colors (6 x 6 x 6 = 216)

Three Systems used for Defining the Web Palette

• Three systems used for defining RGB values:
  -Decimal- web-safe values are multiples of 51, ranging from 0 to 255. Darkest being 0, lightest being 255
  -Hexadecimal-base-16 numbering system used in programming languages and HTML. Darkest being 00, lightest being FF
  -Percentage-web-safe values are multiples of 20%. Darkest being 0%, lightest being 100%

Reference

• Web Design in a Nutshell by Jennifer Niederst, 1999, O'Reilly & Associates, Chapters 14 & 15