How to Prepare
Images for Your Web Site – Part 1
2002 Herman Drost
are staring at the your monitor waiting for the image
to download. It finally appears but it has blurry edges.
You go to the next page but can't read the text because
of the dark image in the background. The next page has
animated images, that don't seem to stop. The spinning
globes keep spinning. The last page has a large graphic
on it, which is a link. You click on it for more information
but it goes nowhere. You leave the site in frustration.
are an essential ingredient for Web Site design. You
want visitors to have an aesthetically pleasing experience.
Properly preparing your images is necessary to enhance
the appearance of your web site. In Part I of this article
I will explain:
to use images for your web site.
What image file formats should you use on the Web.
to use images for your web site - Navigation Graphical
buttons can link to other pages or resources.
Maps – this is a graphic that contains several links
on it. It has several "hot spots" or invisible buttons,
you can click on. For example you could have a photograph
of your family and put a hot spot on each person's face
that links to that person's web site.
and Trademarks – your business or organization's trademark
are crucial for name recognition and branding.
– this is a small, "thumbnail-sized version of an image.
When you click on it, you jump to another page with
a larger version of the same image. The visitor can
see many different, small images on the first page without
having to wait for larger files of the larger images
are the different image file formats? Web graphics can
be categorized into two file formats: bitmap and vector.
– these are composed of individual values for each color
displayed. The larger the dimensions of the image, the
larger the associated file size will be for the same
graphic. When viewed with magnification, a bitmap resembles
a series of little squares, each of which has a color
value that contributes to the overall shape. Bitmaps
have a very rough appearance when viewed closely but
form images when viewed from a distance.
are best suited for photos, drop-shadow effects and
soft, glowing or blurry edges.
– these store information about the image in mathematical
instructions that are then interpreted and displayed.
graphics are best suited for line art, shapes and illustrations.
Graphic file formats used on the Web are GIF, JPEG and
Interchange Format (GIF)
GIF is a platform-independent file format that is limited
to a display of 256 colors. GIF has been adopted by
most developers because of its small file size.
is considered a "lossless" format. This means that as
the image is compressed, no information is lost.
Animated GIF (89A) This 89a version of GIF allows storage
and playback of a sequence of still images to create
the illusion of animation. Animated GIF files consist
of sequential frames that reload from a browser's cache
and replay in an infinite or predetermined loop to simulate
An advantage that a GIF has over a JPEG image is that
the designer can designate a color of the GIF image
to be transparent. For example, you can create a circular
logo in a square image by making the background color
transparent. The image appears circular, when, in fact,
it is square with information to appear transparent.
Graphic interlacing (the progressive rendering of images)
is unique to GIFS and is the preferred method for display
of large graphic files. Many people find the "fuzzy-to-sharp"
animated effect of interlacing visually appealing, but
the most important benefit of interlacing is that it
gives the reader a preview of the full area of the picture,
while the picture downloads into the browser.
to use a GIF
Buttons, bullets and navigational tools that accent
your Web pages. Interlacing is best for larger GIF images
such as illustrations and photographs.
Photographic Experts Group (JPEG)
Graphics in the JPEG format are capable of much greater
color depth than GIFs, but usually require more time
to download. JPEG can contain up to 24 bits of color
information (16.7 million colors). Remember though,
that most users are only capable of displaying 8-bit
to use a JPEG JPEG enables you to use brilliant colors
and provides support for complex images and digitized
photographs but it is not designed for use with simple
compression is not as effective as GIF compression and
may distort images with few colors or large areas of
the same color. JPEG compression is therefore not designed
for low-resolution images.
Network Graphics (PNG)
The PNG file format is emerging as the new format for
Web graphics. PNG files are lossless and support transparency
like GIFs, yet also support compression and high bit
depth like JPEGs. In addition, PNG bit depth can be
adjusted, unlike GIFs or JPEGs, which must be 8-bit
and 24-bit depth.
to use a PNG
PNGs behave similarly to GIFs and work best with flat-color,
sharp-edged art. PNGs compress both horizontally and
vertically, so solid blocks of color generally compress
best. They also support better interlacing than interlaced
what types of graphics to use and when to use them for
your web site will help you avoid the many pitfalls
of bad web design.
2 of this article will discuss how to optimize graphics
for your web site and factors that affect optimization.
Drost is a Certified Internet Webmaster (CIW) owner and
author of iSiteBuild.com Low Cost Hosting and Site Design