Preparing IMAGES for the Web
Post a Message     Lessons       Resources
Message Archive    Personal Pages    Help

Glossary of graphics terms

anti-aliasing
A software process that blends the borders of separate colors areas in order to disguise the jagged look of square pixel edges in a screen display. By placing pixels of an intermediate color along the borders between colors, anti-aliasing gives the shape a smoother, slightly blurred appearance.

artifacts
Discolored specks that appear in an image as a result of file compression. They are especially common along the borders of distinct areas of color in an anti-aliased GIF images, and in large areas of solid color in JPEG images.

banding
For our purpose, banding is a kind of striped effect that occurs when each area of an image with a range of similar colors is forced to a single color that is an average of all of that area's original colors. This may occur as an inadvertent byproduct of converting a 24 bit (RGB) photographic image to 8 bit (256 color) or indexed color. Banding gives the image a strangely flattened look which destroys subtleties. This is generally something to avoid.

bit depth
The number of bits of information used to describe the color of any given pixel in an image. Higher bit depth allows an image to display a greater variety of colors, but may create a larger file. A file with a bit depth of eight may display up to 256 different colors (like a GIF). JPEGs commonly have a bit depth of twenty-four.

CLUT
(Color LookUp Table) a set of colors that define the palette of an 8 bit (256 color) image. A specially defined "browser safe" CLUT may be loaded into Photoshop or Photopaint to insure that solid colors will display well across platforms.

compression
Software processes that reduces the size of an image file (and speeds the time it takes to download). GIF and JPEG are both compressed file formats, though they use different processes. The JPEG file format allows for different degrees of compression, allowing one to balance concerns for file size vs. image quality.

dithering
A software process that combines specks of two or more colors in a single area of an image, in order to create the impression of another color not available in the display. Dithering can improve the appearance of photographic images, but is usually not desirable in a graphic with areas of flat color.

gamma
A measurement of the relative contrast of middle tones in an image. If you adjust the gamma of a black and white photograph, the range of grays in the image would change, but the black and white portions would remain the same. In color images, gamma differences frequently involve the balance between the amounts of red and green in tones, as well as the relative lightness and darkness of colors. Colors in a given image will look noticeably different on PC and Mac monitors because each platform uses different gamma settings.

GIF
(Graphics Interchange Format) a compressed file format for graphics that is lossless, that is, no information about the image is discarded during compression, and restricted to a palette of (any) 256 colors. The GIF89a version of this format allows for a color to be designated transparent, for interlacing, and for multiple images to be stored in a single file (GIF animation). GIF87a is an older version. GIF compression is most efficient for images that are mostly areas of solid color, like logos.

gradient
For our purposes, an area of an image that displays a very gradual color or tonal shift, like shading in a photographic image, blurring, or an airbrushed effect.

interlacing
An interlaced image downloads onto a web page as a grid that increases in visible resolution over the download time, allowing the image to be somewhat viewable before it has fully loaded. (Non-interlaced images load top to bottom at high resolution.) GIF89a images may be interlaced; "progressive" JPEGs are also interlaced.

"jaggies"
A non-technical term for a step-like appearance of the edges of curved and diagonal shapes in a screen display, caused by the fact that screen pixels are square. This phenomenon is a problem for web art because screen resolutions are so much lower than usual print resolutions. The cure for screen jaggies is anti-aliasing. (Sometimes jaggy (aliased) images and fonts are used as a deliberate style).

JPEG
(Joint Photographic Experts Group) a compressed file format for graphics that is lossy, that is, information about the image is discarded during compression, and may display the full spectrum of 24 bit (RGB) color. A good JPEG converter will allow you to vary the degree of compression for a given image. JPEG compression is most efficient for images that are mostly made up of areas of gradient color, like photographs.

lossy/lossless compression
"lossless" Compression formats (like GIF and TIF) reduce the size of a file without discarding any information about the image, so that the original file could be restored from the compressed version. A "lossy" compression process (like JPEG) does discard information, resulting in some loss of image quality each time the image is saved.

pixel
For our purposes, think of a pixel as the smallest possible area of color in an on-screen image, and the basic unit of measure for them. Computer screens commonly display about 72 to 96 pixels per inch; common full screen sizes in pixels are 640 x 480 and 800 x 600.

plug-in
A small applet that adds a function to a basic program. In graphics, usually a filter or converter of some kind. Plug-in standards originated with Adobe Photoshop, but other graphics programs (like Corel Photopaint, JASC Paint Shop Pro, and Adobe Illustrator for Mac) may accept "Photoshop compatible" plug-ins produced by Adobe or other vendors. There are also a series of separate standards for plug-ins that add other kinds of functionality to web browsers.

PNG
(Portable Network Graphic) PNG is a compressed, loss-less image file type designed to replace the GIF format online (software developers have to pay a royalty to incorporate GIF technology in their programs--PNG is royalty free). A PNG file can display 24-bit color and 256 levels of transparency, and include gamma information about the image. The WWW3 Consortium endorsed use of PNG on the Web in the fall of 1996. Both Netscape and Microsoft have announced that future versions of their browsers will support inline PNGs.

raster
A raster graphic is composed of a grid of square pixels. When a raster image is scaled, the impression of lines and shapes in the image translated from one grid to another, which can result in loss of image quality, or the appearance of jaggies. Raster graphics may be stored in bitmap file formats like TIFF, BMP, PICT, GIF or JPEG. Adobe Photoshop, Corel Photopaint and Paint Shop Pro are examples of programs that produce raster graphics.

vector
A vector graphic is composed of a series of lines and shapes. Because the computer file stores the mathematical formulas for generating these lines and shapes, the image can be scaled much larger or much smaller without a loss of image quality. (Scalable fonts are vector images.) Adobe Illustrator and Corel Draw are examples of programs that produce vector images. In order to display a vector image on the web, either it must be saved to a raster file format (GIF or JPEG), or the user must have a separate browser plug-in to view it.
Post a Message     Lessons       Resources
Message Archive    Personal Pages    Help

Last updated on 02/10/97 by EMF