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)
• 
• align = center>

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%

Other Palettes

• Exact - used if the image has fewer than 256 colors making a palette out of the actual colors found in the image.
• System - (Mac/Windows) will convert the image to 256 colors as defined by the operating system.

Image Types

• Photographic Images - best if saved as a JPEG
• Flat Graphics - dithering is unacceptable and distracting within a graphic
  -might cause problems in logos, line-art illustrations or graphical headlines
  -create using the Web Palette at the beginning of the design phase

Designing with Web-Safe Colors

• Tools with built-in Web Palettes
  -Microsoft PhotoDraw 2000 uses Web Palette as default palette
  -Adobe Photoshop 5.0 has web safe colors in the CLUT file
  -Macintosh System OS8 comes with a HTML color picker

Converting to the Web Palette

• Selecting a palette - decide which best suits the image you are using
• Reduce the number of colors
• Shift colors to the nearest Web-safe color

Animated GIFs

• Users need no special software or plug-in to view an animated GIF-just need a browser that supports animation
• GIF is a standard file format for the Web
• Easy to create
• Require no server configurations
• Use streaming technology

How do animated GIFs work?

• Each file contains a number of frames layered one on top of the other
• Simple animations contain one frame for a complete scene
• Complex animations-the first frame is the background and each subsequent frame changes a portion of the image
• 

Using animate GIFs

• Banner Ads, however, use wisely as they can be distracting
• Avoid using more than one on a page
• Use as a clever communication tool
• Avoid using on a page that requires concentration (text-heavy page)
• Will the animation need to loop continuously

Browser Support

• Netscape and IE versions 2.0 and higher support some degree of GIF animation
• Check on multiple platforms

Tools

• GIF animation utilities
  -GifBuilder 0.5 (Mac only)
  -GIF Movie Gear (Windows only)
  -GIFmation 2.1 (Mac and Windows)
• Applications available with GIF animation tools
  -Macromedia Fireworks (Mac and Windows)
  -Adobe ImageReady (Mac and Windows)
  -Animation & Paint Shop Pro 5.0 (Windows only)

Creating Animated GIFs

• Frame delay
• Transparency
• Disposal methods - what to do with the previous frame once a new frame is displayed
  -unspecified (nothing)
  -Do not dispose (do nothing)
  -Restore to background (the background shows through
  -Restore to previous (restores the image to the previous, undisposed frame

Reference

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