GDT 150 Design for the Internet
Handout: Graphics for the Web
Most bitmap graphic formats have very large file sizes. (Bitmap graphics are images that are made up of dots arranged in a grid. Each dot is described by a certain number of bits, and these bits quickly add up to a large file size.) To distribute images on the web, it is necessary to compress them somehow. Graphic compression is a tradeoff between image quality and file size. You need to make the file size as small as possible, but you also want your graphics to look good.
GIF 89a
- Indexed color - 8-bit (256) color
- Best for graphics with flat area of color or linear elements and text
- Lossless compression (after the initial indexing)
- Allows transparency
- Allows animation
Gifs compress graphics in two ways: by indexing the colors, and by describing images in horizontal sequences of pixels. Gifs use indexed color, meaning that they use a limited number of colors and assign each one a number in a color table. Gifs can have a maximum of 256 colors (8-bit, each bit represents 2 possibilities, so 8-bit means 2x2x2x2x2x2x2x2, or 2 to the 8th power, which is 256). Fewer colors mean smaller file sizes.
They also compress by notating the number of pixels in a horizontal row that are the same color. For example, a graphic that looks like this: 
is described as:
Color 1: black
Color 2: red
Row 1: 24 pixels x color 1, 6 x color 2
Row 2: 24 pixels x color 1, 6 x color 2
Row 3: 24 pixels x color 1, 6 x color 2
Row 4: 24 pixels x color 1, 6 x color 2
Row 5: 24 pixels x color 1, 6 x color 2
Row 6: 24 pixels x color 1, 6 x color 2
Row 7: 24 pixels x color 1, 6 x color 2
Row 8: 24 pixels x color 1, 6 x color 2
Row 9: 24 pixels x color 1, 6 x color 2
Row 10: 24 pixels x color 1, 6 x color 2
(Obviously, this isn’t exactly how the graphic is described, but it illustrates the concept.)
As you can see, graphics that have a lot of pixels that are the same color next to each other can be efficiently compressed. If a photographic image, where virtually every consecutive pixel is a different color, this compression method isn’t nearly as effective.
JPEG
- Full range of colors - 24-bit (millions)
- Best for photographic or continuous tone images
- Lossy compression: compression method discards data and lowers image quality each time it’s compressed, but it’s very efficient
Jpegs are an extremely efficient compression method for continuous tone images. They compress graphics by discarding data: they write equations that approximately describe sections of color in the image. If you look closely at a jpeg, you’ll see that it’s roughly broken up into squares. The size of these squares is controlled by the amount of compression. The greater the compression, the larger the size of the squares and the lower the image quality. The lower the compression, the smaller the squares and the higher the image quality.
PNG-8
- Virtually identical to GIF, except it can compensate for alpha (brightness) differences in monitors
- Not as widely supported as GIF
- No animation
PNG-24
- Basically, a 24-bit GIF
- Photographic quality
- Supports transparency
- Supports alpha compensation
- HUGE FILE SIZES
- Not as widely supported as JPEG
Png was expected to be the revolutionary new graphic format when it was introduced, but it’s not widely used because of a lack of widespread support in the browsers. Some browsers require the Quicktime plugin to view pngs, which can be a problem if the plugin isn’t installed. PNG-24 has the added disadvantage of super large file sizes. Pngs are basically useless as web graphics until there is wider support and faster connections.
Optimizing graphics in Photoshop
Photoshop 5.5 and 6.0 are integrated with ImageReady to easily produce web graphics. File>Save for Web will cover all jpeg optimizations and some gif optimizations.
It’s always important to save the original graphic file as well as the compressed graphic. That way, if you need to edit your graphics later, you can work off the high quality original, rather than the lower quality optimized file.
To save a jpeg from Photoshop:
- Save your original file.
- File>Save for Web
- From the drop down menu on the right, choose JPEG
- Choose a quality setting based on image quality and file size
- Click OK
- Name the file, including the .jpg extension and save it in the correct directory
To save a gif:
Method 1
- Save the original file
- File>Save for Web
- Choose GIF
- Choose the number of colors
- Choose the color selection method Perceptual, Selective, Adaptive, Web, or System
- Choose a dither amount (I generally choose 0 if the image is fairly flat)
- Choose a web snap amount to snap a percentage of colors to web safe
- Click OK
- Name the file with the .gif extension
- Save in the correct folder
Method 2 (To change a color to transparent)
- Save the original file
- Image>Mode>Indexed Color
- Choose the number of colors, selection algorithm, dither, any custom colors to force
- Click OK
- File>Export>GIF 89a Export…
- With the eyedropper tool, select a color, or colors, to knock out to transparency
- Click OK
- Name the file and save in the right folder
