In some applications, it is imperative that a compressed document must be exactly the same as the original when it is uncompressed, and in others some loss of information is acceptable. For example, if you compress a program or a payroll file, you must get an exact copy of the original when it is uncompressed. On the other hand, it is not necessary that an image or song be exactly the same when uncompressed. Compression that keeps all information is called lossless and compression in which some information loss is tolerable is called lossy.
Lossy compression is usually acceptable for images. For example, the Microsoft BMP (bitmap) image format is not compressed. Two compressed-image formats are common on the Web: JPEG (Joint Photographer's Expert Group) and GIF (Graphics Interchange Format).
GIF is used for images with flat color areas. It reduces the number of colors used in an image to a fixed palette of 2, 4, 8, 16, 32, 64, 128 or 256 colors. The fewer colors you can get by with, the smaller the compressed file, but the image may not look as good as the original. GIF is commonly used for logos, cartoons and drawings.
JPEG is usually used for continuous tone photographs. The JPEG algorithm was developed taking human perception into account -- it tries to eliminate detail and distinctions that our eyes do not notice. The user has control over the degree of compression and resulting file size. This enables a Web designer to make trade offs between image quality and download time.
You should begin with an image of high quality -- high resolution and if possible not compressed. Do your editing -- cropping, resizing, contrast adjustment, etc. using the high quality original. When the image is the size and appearance you want, save it in compressed form. (The same goes for audio and video data -- start with the highest quality recording possible and compress as the last step in the editing process).
Nearly all image processing programs can do GIF and JPEG compression. If you have purchased a digital camera, an image processing program probably came with it. Your Windows installation may also include an image editor from Microsoft.
Photoshop, the most common professional grade image processing program, is installed on some of the computers in our labs. This is a short tutorial on image compression using the Photoshop Save for Web command. It is quite simple, and lets you quickly preview the file size and quality of the image before saving it.
GIMP is an open source image processor that rivals the capability of Photoshop. To compress an image using GIMP, simply use the Save as command, choose either jpg or gif as the file extension, and you will be taken to the appropriate compression dialog box. For example, this is the GIMP jpg compression dialog box:
The slider controls the degree of compression. A low setting yields a small, but low quality image and a high setting a large, high quality image. If you have checked "show preview in image window," the image and file size will be displayed as you move the slider.
When you save as gif you will be asked to convert the file to indexed or greyscale using default values for the number of colors. If it is a color image, use the indexed option. GIMP will choose the number of colors (up to 255) automatically. (You can control the number of colors in an indexed image by using the image>mode command, but you will not see a preview of the image or file size).
For more on GIMP consult the manual.
Paint.net is another free, open source image editor. It does not have all the features of GIMP or Photoshop, but it is a powerful program that is sufficient for most Web development work. As you see below, one can easily preview file size and the corresponding image quality by adjusting the degree of compression.
