Optimizing Images

Large image files result in excessive loading times for your web pages, and poorly sampled images reduce the overall quality of your site. This article provides an introduction to image optimization, and explains the steps you can take to display the best quality images on your web pages, while achieving the smallest files sizes.

Choosing the Right Image Type

While other formats exist, the most common types of images used in web pages are either JPEG/JPG or GIF. These are distinctly different, and each is suited to a particular type of image.

JPEG/JPG images can contain millions of colors, much like the original uncompressed image. The way file sizes are reduced is by 'blurring' adjacent pixels to reduce the amount of color information contained in the resulting file. Compression levels can be varied, with higher compression resulting in smaller file sizes. However, the trade-off is image quality, and highly compressed JPEG/JPG images tend to look 'blotchy'. This format is best used for images that have smooth gradients of color and tone, such as photographs.

GIF images can only contain a maximum of 256 colors. The number of colors can be further reduced, with fewer colors resulting in smaller file sizes. The GIF format has the additional ability to recognize a single color as transparent, which permits the same irregular shaped image, such as a logo, to be placed on different background textures or colors. This format is best used for images that contain solid fills of color, such as drawings, shapes, charts and logos.

Understanding Image Size and Resolution

Both JPEG/JPG and GIF files are raster image formats. This means the image is made up of dots of single colors, similar to a mosaic. The number of dots in an image determines the image resolution, measured in dpi (dots per inch), so a 300 dpi image contains 300x300 dots per square inch.

In the print world, higher resolution means better image quality, but this does not apply to images displayed on web pages. Modern computer monitors display images at 96 dpi, so using resolutions higher than this will only increase the file size and subsequent load time, with no visible improvement in image quality.

Although HTML <image> attributes permit an image to be displayed at any size, this does not alter the size of the actual source image. As a result, images displayed larger than the actual image size suffer dramatically in quality, while downsized images are unnecessarily large. To ensure the best quality images and fastest load times, images should always be resampled and saved to the exact size required.

Optimizing Your Images

All good image editing applications include tools for resampling images, changing color palettes and exporting to JPEG/JPG and GIF formats. Applications worth mentioning are Adobe Photoshop, Corel PhotoPaint and Adobe Photoshop Elements.

When resampling (resizing) images, always start with a high quality image of at least the same resolution (dpi) and size (pixels) as your required image, as upsampled (increased size or resolution) images rarely look good.

If you need to downsample (reduce the size or resolution) a GIF image, first convert it to 24-bit RGB (millions of colors), then convert it back to paletted (256 colors) once you're done, as paletted images contain too few colors to resample well.

When creating GIF images, instead of relying on the save dialog to convert your image, you can get better and more controlled results by doing this yourself.  Access the color or mode settings (depending on your application), choose paletted or indexed, select an optimized or indexed palette, enter 256 colors and apply your settings. This will result in the best quality GIF conversion for your image. Now you can work on the file size.  Access the color/mode settings again, change the colors to 128 and apply your settings. Carefully examine your image and if the quality is still acceptable, access the color/mode settings again and reduce the colors to 64. Continue this process, halving the colors each time, until the quality is no longer acceptable, then simply undo the last change.

When saving JPEG/JPG images, most image editing applications include an image preview window with controls for adjusting the compression level. Carefully examine the image preview and estimated file size while adjusting the compression level to find the best combination of image quality and file size. While the best setting will vary depending on the complexity of the image, 20-30 percent is usually best.

< Back to Hosting Articles