Graphics Overview

Bitmap (Raster) - an image that is made up of a grid of individual boxes of color called pixels. Bitmap images include gif, jpg, psd, tiff, pict, bmp file formats among others. Bitmap images can sometimes appear to be pixelated and will lose quality when their size is increased.

Vector - an image whose lines and fill areas are described by mathematical equations. Vector images include png, ai, and swf files among others. Vector images can be resized without losing any quality. Vector images are often converted to bitmap images (gif and jpg) for the web. This conversion is sometimes referred to as "rasterizing" the graphic.

gif - Graphic Interchange Format

• compresses horizontal bands of the same color
• used for line drawings, drawings with areas of 1 color, simple shapes with hard edges, text
• not appropriate for most photographs
• limited to 256 colors
• can contain transparency
• can be displayed on the web, cross-platform, cross-browser
• you can change the file size by removing colors from the palette at export

jpg - Joint Photographic Experts Group

• compresses by changing adjacent pixels to an average color (removing complexity)
• because if the compression method it is sometimes known as a "lossy" format
• used for photographs, shapes that need soft smooth edges
• not appropriate for small text or shapes that need hard edges
• can contain over 16 million colors
• cannot display transparency
• can be displayed on the web, cross-platform, cross-browser
• compresses smaller than a gif because it removes data when it compresses
• you can change file size by choosing the amount of loss (quality) at export

png, psd, ai - raw files from Fireworks, Photoshop and Illustrator

• save in a separate folder and DO NOT THROW AWAY!
• will allow you to edit layers, text objects, color palettes, etc
• png files can be displayed in IE 4+, but are not considered cross-platform, cross-browser at this time
• psd and ai files cannot be displayed on the web

 

Color Palette

RGB - most common color palette

• made up of colors mixed from red, green and blue
• can be seen in browsers on newer computers

Web-safe - 216 colors that will display similarly on Macintosh and Windows computers

• will work on older computers/monitors that can only display 256 colors

Custom - set when you export a gif image or before export for jpg

• reduce the number of colors to only the absolutely necessary ones
• smaller palette = smaller file size

Resolution

• Increasing the resolution can increase the file's size, but on the web, it also increases the dimensions.
• Information on image resolution for screen display (web)

Image Dimensions

• The larger the dimensions the larger the file size.

 

Dithering - used on gifs to allow for "more" colors. Different colors are put into adjacent pixels in a checkerboard pattern to trick the eye into thinking that they are mixed together into a new color. Because of the way that gifs are compressed dithering can greatly increase the file size of an image. The only good time to use dithering is if you have gradients or fades in your image. Dithering will make the fade look more realistic and less like solid bands of color.

Interlacing gifs and progressive jpgs - used to show a faster preview of an image on the screen. Interlacing gifs and progressive jpgs download alternating rows of pixels, instead of first pixel to last. This gives the user an illusion of a faster download since they are able to see more of the total image faster, but the images actually take longer to download. This can be useful if you have a lot of images on a page causing it to download slowly. Users will be able to see fuzzy representations of images faster and allow them to navigate the page (or your site) before the page has completely downloaded.

Anti-aliasing or Smoothing - Used to smooth the edges of your shapes and text. Anti-aliasing and smoothing use a pattern of intermediate colors to blend the edges of your objects into their background colors. This can help remove the pixilated or jagged edges. Anti-aliasing should not be used for gifs with transparent backgrounds as it will make the edges of the objects appear fuzzy and jagged. Smoothing should not be used for text if the font size is 10 or smaller. Remember that the edges of jpgs are already smoothed to some degree through the compression process.

Don't save a file as a jpg until you are completely finished with your editing!

Jpg compression is a lossy compression. Each time you save a jpg you will lose information and so your quality will degrade. Make sure to keep your original files (png, psd, ai, tiff, etc) for editing and save as a jpg only when the editing is complete. This will result in the highest quality jpg possible.

Don't dither gifs unless absolutely necessary!

Because gif compression can only work with horizontal bands of the same color, dithering (creating small checkerboard patterns) will greatly reduce the amount of compression that can be done. Dither only for gradients and fades.

• Heather Woods
• Information Services
• Date Created: June 17, 2003
• Last Modified: June 17, 2003
• Page Expires: June 1, 2004