|
Web Design Articles
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
Receive your FREE trial download of this ebook for subscribing:
Name
Email
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 the Certified Internet Webmaster (CIW)
owner and author of http://www.iSiteBuild.com
Affordable Web Site Design and Low
Cost Web Hosting
Subscribe to his “Marketing Tips” newsletter for more original
articles. subscribe@isitebuild.com.
You can read more
of his in-depth articles at: http://www.isitebuild.com/articles
***********************************************************************
Article reproduced with kind permission from Herman Drost
|
|
