|
|
|
How to
Prepare Images for Your Web Site – Part 1
Copyright
2002 Herman Drost
You 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.
Images 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:
When to use images for your web site?
What image file formats should you use on the Web?
When to use images for your web
site - Navigation
Graphical buttons can link to other pages or resources.
Image 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.
Logos and Trademarks – your business or
organization’s trademark are crucial for name recognition
and branding.
Thumbnails – 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 to load.
|
Subscribe
FREE to
Marketing
Tips Newsletter
Hosting
Plans from $30/Year
|
What
are the different image file formats?
Web graphics can be categorized into two file formats:
bitmap and vector.
Bitmap – 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.
Bitmaps are best suited for photos, drop-shadow effects
and
soft, glowing or blurry edges.
Vector – these store information about the image
in mathematical
instructions that are then interpreted and displayed.
Vector graphics are best suited for line art, shapes and
illustrations.
Image File Formats
Graphic file formats used on the Web are GIF, JPEG and PNG
Graphics 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.
GIF is considered a “lossless” format. This means that
as the
image is compressed, no information is lost.
Types of GIFs
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 motion.
Transparent GIF
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.
Interlaced GIF
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.
When 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.
Joint 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 color.
When 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 images.
JPEG 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.
Portable 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.
When 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 GIFs.
Knowing 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.
Part 2 of this article will discuss how to optimize
graphics for
your web site and factors that affect optimization.
==================================================
Herman Drost is a Certified Internet Webmaster (CIW) owner
and
author of iSiteBuild.com
Low Cost Hosting and Site Design
(http://www.isitebuild.com/sitehosting.htm)
Subscribe to the “Marketing Tips” newsletter for more
original
articles. subscribe@isitebuild.com
|
iSiteBuild.com
(240) 334-3271
info@isitebuild.com
[ Design
] [ Hosting ] [ Promotion
] [ Articles ] [ Portfolio
]
|
|
