Optimizing
Images for the Web - Part I
by Charles E. Brown
Optimization - Who
needs it?
After text and hyper-links, images are the most frequently displayed Web
entity. Images used on the Web are often combined with text and
hyperlinks and can range from low-resolution static images to
high-resolution interactive images complete with image maps. Everyone
from the new mom making a Web page about her new-born-child to the
professional Web Designer/Developer creating an interactive
entertainment site for a highbrow client can use images to spice up
their Web pages.
Why Optimize?
Optimization is a reoccurring phrase in the
Web vernacular. Image optimization is simply creating and using images
for the Web that are designed with the Net in mind. This means you
consider the way the images will perform on the Net. Performance on the
Web usually means how long it takes to load a page. This is a necessary
consideration because Web development is out pacing the technology that
makes the Web accessible. In other words, our preoccupation with
designing various types of Web content (images, text, objects, exc.)
leads to advancements in Web authoring that are always technologically
ahead of the Internet itself. This creates and maintains a need to
design content for the Web that will survive and even thrive under the
deficiencies of the Internet.
Don't be fooled by
your PC
Unfortunately image file sizes can be quite
large. These often-obese files may have a difficult time jogging around
on the Net's transfer-rate tracks. They may do well internally on a
given computer system but this is like exercising on a stationary bike.
There are luxuries an image may enjoy at a spa workout on your PC that
are not available while that image is being worked out over the Web's
jungle like environment. Applications accessing an image on your
hard-drive have the benefit of vast amounts of RAM memory, swift bus
speeds and high-speed processors (on most up-to-date systems). However
when your system has to access that same image over the Web, it's like
making that chunky file get off of the stationary bike and run in the
Iron Man Challenge. The conditions are strenuous and the progress of a
users file download can be hampered by many different variables, some of
which are outside of the users control. Although your PC or Mac may be
an expert at getting these hefty files around on your system in-house,
the Internet has yet to handle the problem as well.
Putting Image Size
into Perspective
They say a picture is worth a thousand words.
As a matter of fact, on a computer, a picture in the form of a graphic
is worth a whole lot more than 1,000 words. Let's look at the
numbers. As an example, let's say a particular image file that
takes up about one quarter of a browser screen is around 80K
(approximately 80,000 characters). Now, we'll say that the average word
is five characters. In addition we'll add a couple of spaces for
good measure giving a total of seven characters. If you take an image
composed of 80,000 characters and divide that by a word composed of 7
characters you get approximately 11,400 words! This means you could have
a text file composed of 11,400 words that was the same file size as 1
image that takes up one quarter of the monitor screen (in theory). Of
course this varies depending on the resolution and number of colors the
image is composed of, but the lesson is clear. In order for images to
share the same page with other images and text while still maintaining
decent download time, optimization is a must.
An 80K file, transmitted to a browser
across a 28.8 KBPS connection, takes about 40 seconds. A good rule of
thumb (until broadband becomes a standard) is to estimate that the
average home user is getting about 2K (2,024 characters) per second
transfer speeds from their Net connection. This problem gets worse when
International connections are taken into consideration. Some countries
have very poor connection speeds due to out-dated phone lines and
inferior phone equipment.
Why use the "ALT" Tag
Many advanced Web users who don't have broadband access turn
off their automatic image load feature. They navigate to the desired information,
and then request image loads for specific pages. Many Web Designers/Developers
use the ALT option with images so that a browser operating in text mode
will display a text message concerning the image or a text substitute
for the image. Without the ALT option, a user might not comprehend the
objective of your page. This is especially true if the image has text
in it that is part of a company logo or if the image has important information
that is not included elsewhere on the page. Therefore a Web Designers/Developers
work should always make sense even when images are not available. The
ALT option makes sure the user gets your point or message even if the
image did not make an appearance onto the display. Note that the text
used in ALT cannot include HTML markup. Tags like STRONG, header tags,
and so on, are unusable. The ALT option uses regular text or special characters
and no tags!
Go to Optimizing Images for the Web
Part II
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
About the author...
Charles Brown is a freelance writer specializing in Internet and
consumer related articles. He is also a content
writer for EWM / PSI (Everyone Working Mutually providing
Products Services & Ideas). Mr. Brown is also the
author of a new series of eBooks that will begin publication in
mid February, 2001. "The Art of Complaining © 1998
Charles E. Brown" will be a how-to on writing effective
letters of complaint. "The Art of eShopping © 2000 Charles
E. Brown" which will be a how-to on safe and efficient
internet shopping. Scheduled for publication in
July/August, 2001are "The Art of Web Design © 2000 Charles
E. Brown" and "The Art of Desktop Publishing © 2000
Charles E. Brown".
http://www.productsservicesideas.com
|