Most web pages contain graphics (pictures) that make the web page more interesting, and provide visual information--such as pictures of products. Graphics for web pages are usually stored in one of two common formats:
Webmasters are always concerned about the amount of time that it takes web pages to download and display in the user's browser. It is important to make sure that the web site is convenient and easy to use. People visiting a web site will become impatient if the pages take a long time to load. In the case of an e-commerce web site, this may mean that the customer will become frustrated and will go to a different web site to make their purchase.
The performance of the web site (as it seems to the user) depends on many factors, most of which are not under the control of the web designer. These factors include:
One factor that is within the web designer's control is the amount of information contained in the web page, including both text and graphics. Text does not cause a performance problem on most web pages. This is because the amount of data needed to represent the taxt is usually fairly small. This page, for example, contains about 7800 bytes of text data. Compare that number with the size of the graphics files that are discussed below.
Graphics, however, often degrade the performance of a web site because the amount of data needed to represent the graphics is relatively large, and takes a long time to download. Web designers are therefore interested in ways to reduce the amount of data in their graphics files. In the case of JPEG files, there are several techniques that can be used to reduce the size of the file, and therefore the time needed to download it to the user's browser. The following is a demonstration of some of these techniques.
Click here to see a JPEG image, and then click the BACK button on your browser to return to this page.
The JPEG photograph that you just saw required your browser to download 839,072 bytes. The image is 1600 pixels wide and 1200 pixels long. How long did this take to download and display this image? Does it need to be quicker?
The first thing we can do to reduce the size of the JPEG file is to crop the photo. This means removing parts around the outside that are not needed. Click here to see the same photo after cropping.
The image that you just saw is now 708 pixels wide and 944 pixels long. The subject is still the same size, but unneeded (and uninteresting) parts of the image have been removed. The JPEG file has been reduced to 447,766 bytes--about 53% of the original size. Does the image download and display quicker now?
The image is still larger than it needs to be. We don't want to crop it any more, but we can reduce the size of the image as it appears on the user's screen (and the amount of data that must be downloaded) by resampling. This means removing pixels across the entire image. Click here to see the image after resampling.
The image that you just saw is 354 pixels wide and 472 pixels long. The JPEG file now contains 131,166 bytes--that is about 29% of the size of the cropped image, and less than 16% as big as the original image. Some detail has been lost by resampling, but the image still looks pretty good. Does it download and display faster now?
The JPEG format is a form of lossy compression. This is a method of storing an image using fewer bytes, but with a possible loss of some picture quality. By changing the compression factor, it is possible to reduce the size of the JPEG file. Click here to see the image after applying a compression factor of 48.
The image you just saw is still 354 x 472 pixels, but the JPEG file that was downloaded to your browser is only 18,110 bytes. This is only about 14% as big as the uncompressed JPEG file, and only about 2% the size of the original file that we started with. The compression caused a subtle loss of detail in the image, but it is acceptable. Can you see the difference?
Click here to see what happens if you go too far with JPEG compression. This image was compressed with a factor of 92. The JPEG file is now only 5014 bytes long, but the image quality has been seriously degraded. It is usually necessary to experiment to find the compression factor that gives the best balance between picture quality and file size.
The JPEG images above were edited with Corel Photopaint (part of the Corel Draw suite). Many other programs can be also used. Most programs that edit JPEG files are capable of cropping and resampling (which may be called resizing). Not all programs allow you to select the JPEG compression factor.
Many digital cameras allow you to select the image resolution (the number of pixels). Some also allow you to select between several settings for image quality (JPEG compression).
