| |
 |
|
|
|
|
Image Errors--AKA Mini, Heavy, Jaggy, Halo,
...
Great graphics are vital to Web performance. Unfortunately, there are numerous
ways to fall short of delivering great images. First, let's look at why images
deserve so much consideration. Then we can touch on the major pittfallls
that often sabotage unwary webmasters in their quest for excellence. |
|
|
|
Why Quality Images are Essential for
Websites
 Your competition is often brick & mortar retailers.
In a physical store, a customer can pick up the product, see its every detail,
sense its texture, its weight, its smell. In a virtual store on the Web,
you have only the image and text description. Those two tools must be exceedingly
good to match the physical store's sales appeal. And if you can't compete
in sales appeal, low price is generally where you have to outclass your
competition. Not an easy contest to win when you are up against mass
merchandisers like Walmart and Target. |
|
|
|
Aliasing, AKA Jaggies
Computer screens are made up of thousands of tiny dots, AKA pixels. If I
paint a red line vertically up the screen or horizontally across it, each
successive pixel that is lit up red is directly adjacent to the borders of
its neighbors, and I have no problem with jaggies. But when I paint an angled
line, i get a staircase effect. It's not so noticable with today's high
resolution monitors, but anyone familiar with early home computers or computer
games will remember that images often looked like come sort of cubist art.
Even today, we use something called anti-aliasing to smooth out the staircase
effect.
|
 |
|
 |
|
 |
|
 |
Without
Antialias |
|
Closeup
Without |
|
With
Antialias |
|
Closeup with
antialias |
|
|
|
|
One other note
about angled lines and antialiasing. Note that the Antialiased line center
right looks a bit lighter than the one to the far left where no antialiasing
was applied. In designs where you mix vertical, horizontal and angled lines
and they must all be the same line weight, antialiasing makes it extremely
difficult to deliver pleasing results. If the designer really cares and has
good eyes, it's a matter of tweaking the antialiasing by hand. I know of
no software that will automate the process. |
|
|
| |
When Halos are NOT Holy
Halos around Web graphics are a result of poor planning coupled with the
need for anti-aliasing. THey occur when we antialias an image into one color
of background, then turn the background color transparent in a GIF file.
The easiest way to see what's happening is to look at an actual example.
Let's draw a red star on a nice white background--left.
Looks great. Now let's save it as a transparent GIF and set the transparency
color to white--center left. Still looks good because it's on a white background.
Now let's see what happens when we switch the background behind the transparent
GIF to black. All of a sudden, we see this ugly white glow almost like stitching
around our nice red star--center right. Magnifying our star--far right--we
see what's going on. When we antialiased our star into a white background,
we got a series of increasingly lighter pink pixels to smoth out its jaggies.
No problem so long as the background color remains the same as (or very near)
the color we antialiased the image into. So the solution is very simple.
Consider the background color before producing an antialiased transparent
GIF. If your image has to work with multiple background colors, either avoid
antialiasing or make multiple images antialiased into each unique
color.
|
 |
|
 |
|
|
|
 |
Star Plus
Antialias |
|
White to
Transparent |
|
Background
Black |
|
Closeup
of Halo |
|
|
|
|
|
|
|
|
|
Meet Mini
 Image problems go by many names (aliases) but Miss Mini is probabaly
#1 on the Most Wanted list--the most active, prolific offender out there.
Perhaps it is because so many "best practice" disertations date from the
days of 14.4K modems. Perhaps it's because product suppliers hate sales--so
much hassle shipping products and the like. But it is not at all unusual
to find sites trying to sell things like inscribed tee shirts--where the
look IS the sale--with postage-stamp-sized images like that shown above right.
If that's all your supplier offers, do yourself a favor and get your own
images. If you are a shutterbug and already know tons about lighting, shaddow
and hot spot elimination, backdrops, etc. then get a good digital camera
and do it yourself. If you're not already a talented photographer, recognize
that product photography may well be the most challenging of all branches
of the art. Hire a good product photographer and launch your site with images
that will sell.
The biggest surprise to most first time store owners
is that we actually want big, beautiful, high-resolution images for their
site. How big is too big? If you have an 8 megapixel digital camera we'll
take them in full out-of-the-camera resolution if possible. We want to end
up with all product images at least 800 pixels in their larger dimension.
We'll res down to 72 DPI but if
we need to prepare something for print advertising, we must have the original
art in at least page size and 300
DPI.
We can always downsize an image that is too big, but
we cannot get decent results by rezzing up tiny images. Let's say your
product is an Internet Secure Data Center and you want to show people
what a high-tech solution you offer. Here's a link to a
high-res image. It is JPEG compressed,
but at 3307 pixels wide X 2717 high and at 300
DPI (Minimum dots per inch for print
advertising and dead tree publishing), it weighs in at a very healthy 8,944,200
bytes. It will take minutes to download over a dial-up connection, and even
after download, you will have to scroll both vertically and horizontally
to view it on all but the most incredibly high resolution displays. Not what
we want for the Web. But it is a great starting point. From it we
rezzed down the 800 pixel, 72 DPI
image shown here.
If you had a data center to sell and were proud of its
technology, the image above certainly would convey that pride. Whatever you
are selling on the Internet, big crisp graphics like that in Figure 2 will
help your sales.
Now, let's take that image down to the postage-stamp
size you often find offered by manufacturers as a product photo. Figure 3
shows a 140 x 115 image. It's still barely discernible as a data center,
but it sure doesn't sell like the image in Figure 2 above. Without knowing
what it's a picture of, you'd be hard pressed to guess when it's reduced
to this size. Which would encourage you to buy? And look at the hideous results
we get in figure 4 below when we try to "rez up" or add resolution to the
small image form Figure 3. |
|
|
|
|
|
|
|
|
|
|
| |
Page URL:
www.etproductions.com/help/best-internet-images.html
Copyright © ET! Productions & J. K. Hollomon, Jr., 2001.
Excerpts from original site, © 1998/99. All rights
reserved.
Last revision:
Sunday, 28-May-2006 18:32:58 PDT |
|
|
|
|
|
| |
ET
Productions
160 East Berkeley St, Suite 312
Boston, MA 02118
| Phones: |
| Toll
Free |
800-448-6399 |
| Boston
Area |
617-723-3339 |
| Fax |
617-723-7557 |
e-mail
ETpro@etproductions.com
|
|
|
|
|
|
