Home Page     Tips   Glossary

Task 1   Task 2   Task 3

Lesson 4 - Image Processing

'Amateurish' web builders might take a digital photo or scanned image and publish it to a web site without considering altering the image file.  Good web designers will consider:

• the file format (jpg, gif, bmp, etc)
• the size of the file in kilobytes or megabytes
• the use of the file (static, animated, transparent, etc.)
• the improvement of the file (contrast, color correction, cropping, etc.)
• the need for color detail

Common Image Formats

The vast majority of images used on the Internet are either jpg or gif format.  Other formats can be used, but these two formats are used because of their superior characteristics.

jpg is named for the Joint Photographic Experts Group, a collection of representatives of the computer graphic industry who developed a method of saving image data that 'compresses' the data very efficiently.  Variations of the format name are sometimes used, including jpeg and jpe.

Photograph images used on the Internet are almost always jpg images.  jpg compression reduces the file size and page loading time greatly over non-compressed formats such as bmp (bitmap).

gif is an abbreviation of the term Graphics Interchange Format, a method of storing image data developed in the late 1980's.  gif files are relatively small because they use fewer colors than formats used for photographs.  gif files can also be animated and can be 'transparent', an advantage covered later in this lesson.

Non-photographic images with simple colors are often gif format images.

This web page at Stanford University has an overview of image file formats, plus general rules for selecting between jpg and gif formats.

HTMLgoodies.com has a graphics format tutorial with links to examples of images using different formats and techniques.

Image Editing Tools

You should become very familiar with the image processing software you will be using - learning both its abilities and limitations.  As a minimum, your software should be able to crop, adjust brightness-contrast-intensity, resize, and save-as a jpg or gif format.  With gif formats, you should be able to select a transparent color.  Microsoft PhotoEditor, available on many computers, will change GIF  transparencies.  Cropping using PhotoEditor is not convenient, but with practice is can be done.

Before Starting the Tasks

Make sure you have image editing software available and you know enough about it to get started.  Read the web pages at both of the links above and understand the basic differences between gif and jpg image formats.