Home

Things to consider when adding images to a web page are many, but three basic factors for the beginning web designer to control are image size, file size and image quality.These may be manipulated by cropping to resize the image, choosing the most appropriate file type with which to compress the image, and tweaking factors such as color, dithering and quality settings in image editing software.

Adobe Photoshop's Save for Web and Devices does a great job of letting you see the differences.

Line 'Em Up

pshow promo gif pshow promo png pshow promo jpg

The first image above is 26.13K GIF, 64 colors;The second is an 18.52K PNG-8, 64 colors; The third is a 40.41K JPG, very high quality: 80, optimized. My choice would be to use either the PNG because of it having the smallest file size and still being high quality, or the GIF with a little larger file size and good quality. The PNG image also has the fastest download speed with four seconds @56.6 Kbps.

The Sky's the Limit

sky jpeg sky png sky gif

The first image above and my choice for the Web is a 30.14K JPEG image at very high quality, 80, optimized,downloading in six seconds @ 56.6Kbps; Second is a 39.39K PNG-8, 64 colors, downloading in eight seconds @ 56.6Kbps; The third image is a 42.01K GIF, 64 colors, downloading in nine seconds @56.6Kbps. The JPEG format is the best for use on the Web when displaying a complex organic photographic image such as this.

Keep on Truckin'

truck PNG truck JPEG truck GIF

This last group of image file types begins with a 45.5K png-8, 64 colors, downloadable in nine seconds at56.6Kbps; My choice for Web use would be the second image, the 39.4K JPEG, very high quality, 80, optimized and downloadable in eight seconds at 56.6 Kbps; The third image is a 49.24K GIF, 64 colors, downloadable in ten seconds at 56.6 Kbps. The colors in the JPEG image are noticeably more vivid than in the other two images. The reflectors on the bottom right of the image are a stronger shade of red than they are in the first and last images.