Graphic Formats and Manipulation n241.tplt 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% 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