Week 4:  Image formats and related concerns

You are about to begin working with one of the most exciting dimensions of teaching with technology:  images.  Visual input, such as graphic images, often has a much stronger impact on the recipient that words alone.  Many students are primarily visual learners, so this is a great way to reach them.  Before you start playing with pictures, though, you need to know that there are different image formats, each with its own special characteristics.  Thus, different graphic file formats are suitable for different purposes.  Essentially, there are two basic types of image files:  vector and raster.  A third type, metafiles, can include some elements of both.  First we will discuss the general features of each type.  A summary chart of file types is on the last page.

Raster graphics:

Raster graphics consist of bitmaps, that is, each pixel (picture element) in the display is coded for a single color.  The result is much like a color photograph printed in a newspaper, or a pointillist painting, except that the pixels are square and exactly the same size.  When bitmapped graphics are enlarged beyond their original size, the individual pixels are visible as large blocks of color.  This is called pixilation.  Thus a diagonal line ends up with a jagged edge or staircase-like effect, but a perfectly vertical line usually remains smooth.  When bitmapped graphics are reduced in size, some detail is lost or distorted.  Thus, when working with raster graphics it is best to use them at or close to their original image size. 

As for the size of the file itself, that depends on three things:  resolution, image size, and type of file compression.  Resolution is usually counted in number of pixels per inch (documentation often refers to this as dots per inch or dpi, based on printing conventions).  The higher the dpi number, the greater the resolution.  If the resolution is too low, the image will appear blurry or jagged.  Image size is the display or print size of the image, so the total number of pixels in a file is the resolution multiplied by the display size.  A large picture with a high resolution will be a huge file, whereas reducing either resolution or image size will result in a smaller file.  The third component, file compression, is determined by the file type.  Some types of compression are referred to as "lossy" because some detail is lost in the compression, while others are lossless.  The amount of compression possible depends on the nature of the image and the type of compression. 

Raster graphic file types suitable for the web include .GIF (Graphic Interchange Format) and .JPG (Joint Photographic Experts Group).  Currently there is limited, though increasing, support for the .PNG format (Portable Network Group).  The usual format for photographs or very complex images is .JPG, because it preserves good image quality and features some compression, however, it is lossy.  File size can be large.  When viewed on a web page, photographs tend to take a long time to load.  You can minimize this problem by making the file progressive (if .JPG) or interlaced (if .GIF).  This way a low-resolution form of the image will display first, gradually replaced by a sharper picture.  The viewer gets a preview of the image while waiting for it to load fully.

For a small image or a picture with areas of plain rather than gradient color, .GIF is the usual format for the web.  This format is ideal for simple graphics with only a few colors and not a large amount of detail.  Complex pictures, such as photographs, may not compress well in the .GIF format.  The .GIF format also allows for either animation or transparency, which are unavailable in .JPGs.  It is not recommended to put both animation and transparency in the same image file, as it doesn't usually display well. 

Other types of raster graphics that can be used in print or presentations but not on the web include .BMP (bitmap), .TIFF (Tagged Image File Format), .PICT (picture) files and others.  If you are making a PowerPoint presentation, you may find that .JPG files don't display well when projected.  Quite often, people prefer to work with .TIFF files, in spite of their large file size.

Vector graphics:

Vector graphics are made up of one or more vector drawing objects.  These drawing objects are generated by formulas, although you don't need to work with the formulas directly when creating them.  You just draw them on the screen.  For example, to specify a circle, the computer only needs information about the center and radius.  In most graphics programs, the designer simply selects the circle tool and drags the mouse to draw the circle.  As long as the entire image is not geometrically too complex, vector graphics allow for a very small file size.  It is possible to vectorize a photograph, but unless you are looking for an artistic special effect, it is not recommended, due to the complexity of the photographic image.

In addition to small file size, the other great advantage of vector formats is that the images are scalable.  You can increase or decrease the size of the display without any loss in resolution or quality.  Smooth contours remain smooth and straight lines remain straight (rather than pixilating, as with raster images) no matter how large or small the total image is.  This makes vector graphics ideal for presentations such as those made with PowerPoint.  Files in the .WMF format (Windows metafile format) work particularly well in PowerPoint.

Apart from images generated by animation programs such as Flash, vector images are not supported on the web.  Some graphics programs such as Freehand, however, use vector-based files as the "working" file in which you draw objects, then allow you to choose from many formats (including vector, raster, or metafiles) for exporting. 

The chart below indicates some popular image file formats and the types of applications they are suited for.  Please note that there are many subtypes of these files, depending on specific needs.  As you learn more about making graphic image files, you will build upon the information presented here.

Reference Links:

• Wayne Fulton's Scan Tips gives a lengthy discussion of many aspects of image manipulation.  He has several sections relevant to the general topic of understanding images.  Here are a few:
• What is an image, anyway? Illustrates the concept of pixels very clearly.
• Image file formats discusses images from a scanning perspective.
• Stanford University's short page on image file formats for the web.

previous | close window | next

page created by Mary Jacob (msjacob@ucdavis.edu), last revised September 30, 2001