" />

GDT 150 Design for the Internet: Fall 2001

Class Notes 9.25.2001

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

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 x 10: 24 pixels x color 1, 6 pixels 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

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

PNG-24

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.

Cutting Graphics

See the handout