Graphic Formats 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% Reference Web Design in a Nutshell by Jennifer Niederst, 1999, O'Reilly & Associates, Chapters 14 & 15