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
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
< Back to Hosting Articles