 |
|
|
|
|
|
|
|
|
While adding text to web pages is straightforward—just
a matter of typing it in with a product like
Macromedia Contribute—users will want
to add photographs, charts, or logos too. This
isn't quite so simple. But here are some useful
tips for users that will help them add images
to their website without wreaking visual havoc.
It's a cliché that "a picture
is worth a thousand words" but on the
web images do require much more downloading
time than text. A small 6K image is equivalent
to a thousand words, so site contributors should
use images sparingly or else risk annoying
and alienating readers as they wait for those
images to download.
|
|
|
| |
Luckily,
there are ways to minimize the file sizes of web graphics.
Just like flat-pack
furniture or a can of condensed soup, images can be "compressed" so
that they're small while in transit yet are "reconstituted" to
their original state (or very nearly so) when they appear
in the browser.
To compress an image file, it just needs to be saved in
the appropriate
file format; the browser does the rest. There are two
main file formats that do this, especially for web graphics;
the correct one to use depends on the image.
Before compressing an image, however, you should resize
it in an image-editing program so that it's at the final
size that it will appear on the web page. It's not a good
idea to let the browser scale images because this compromises
file size and slows down the page's display. The original
image should always start out larger than needed before
you reduce it. Enlarging a too-small image never gives
good results because the detail is just not there to begin
with and can't be generated.
Adding photographs with the JPEG format
Placing a photograph on a page requires finding something
suitable from a stock photo library. Otherwise you need
to scan an existing transparency or print, or take the
photo with a digital camera. The original image may have
been saved with any number of file formats (TIFF, PNG,
PSD), depending on your camera and software. The best
file format to use for photographs on the web is JPEG
("jay peg"), which has the file extension .jpg.
The way that the JPEG format compresses files is quite
complicated, but all you need to worry about is the fact
that you trade off image quality for smaller file sizes.
The JPEG format is a "lossy" format, which
means that some image quality is always lost in the process
of compressing the image's file size.
A high-quality JPEG image has a large file size; a low-quality
JPEG has a small size. Somewhere between these extremes
lies an optimal file size that looks virtually indistinguishable
from the original. You have to judge this point by eye.
You usually preview the image's quality in your image editing
program and make
adjustments with a slider control. As the file size
and quality lessen, unsightly blemishes ("compression
artifacts") appear in areas of flat color and around
edges of objects. When these nasties start to appear, back
off on the compression a little. When there is little or
no trace of compression artifacts, you've reached the compression
limit without compromising visual quality.
Here are some examples of what I'm talking about:
|
| |
 |
|
| This file from
a Photo-CD was originally about 62K. With a medium amount
of compression, I reduced the size to a more manageable 15K.
There is an imperceptible loss of quality. |
|
| |
 |
|
| This version
is more highly compressed at 6.5K but the loss of quality
is evident, especially around the edges of the clouds. |
|
| |
 |
|
| At maximum
compression, the file size is about 5K but the quality is
very poor. Considering that it's only about 1.5K smaller
than the previous image, you can see how you have to balance
file size and quality just right. |
|
| |
| After
you find the ideal compression size for your photos, be sure
to keep a copy of the original, uncompressed file at hand
in the editing program's native file format. If you ever
resize or resave a JPEG file, you will add more "loss" each
time, which will make the image look worse—and probably
increase the file size too. |
| |
Adding
flat-color images with the GIF format
For logos or other images that contains mostly flat, non-gradating
colors (no shading, for instance), you're best off using
the GIF (.gif) format. (Some people pronounce GIF as "jiff" but
it stands for Graphic Image Format so the G should have a
hard sound, as in "graphic.") The GIF format is
not suitable for photographic images or illustrations with
many subtle color blends. In fact, the fewer individual colors
in the image, the smaller your GIF will be.
Let me show you what I mean. When saved in GIF format
at a comparable file size to the optimal JPEG image, this
shot shows how the image is "posterized" into areas of
flat color; subtle gradations are completely lost:
|
| |
 |
|
| |
| To
minimize this banding, you either have to save the file at
a much higher color-depth or else switch on "dithering," which
means simulating gradations with patterns of dots of colors
already present. This image is not only larger than its JPEG
equivalent, but it looks worse. |
| |
| Here's
how GIFs work. Instead of remembering the color of every
single pixel in an image, the GIF format simply counts the
number of pixels of the same color in any row. Consider,
in the real world, how more efficient it is to say "there
are 12 red pencils, 5 blue pencils, and 1 yellow pencil in
this box" than it is to say "this is a red pencil,
this is a red pencil, this is a red pencil..." etc.
Essentially, GIFs count the "runs" of a single
color, substituting just the total count for the individual
pixel values. This is much more efficient—and compact—than
JPEG compression.
The decision you have to make with GIFs is this: "How
few colors can I get away with?" If you scan a blue
logo on a white background and resize it to fit comfortably
in the available space on the web page, you have to select
a color depth (or bit depth) for the image. This determines
how many colors are used to display the picture. The smallest
color depth possible is two colors—a foreground color
and a background color—but this will pixelate the
logo, giving it hard, jagged edges. With four colors, edges
start to look better but they're still a little jaggy.
Eight colors make them look reasonably smooth. Using more
than eight colors for a single-color logo is unlikely to
improve the image quality perceptibly and only increases
the file size unnecessarily.
What's happening here is that the image is blending smoothly
from the blue foreground to the white background using
a number of intermediate tones of blue. Eight tonal steps
are usually sufficient but if the logo has more than one
color, it's a good idea to allow for an equal number of
steps for the other colors too. The maximum number of colors
that a GIF image can handle is 256—but a 256-color
image has a much bigger file size than one with only 8.
Time for another example. The following Jasmine logo examples
show the effect of reducing the number of colors in an
image. Although the lettering is only a single color with
a smooth edge, the logo includes a colorful parrot with
subtly gradated colors. It's vital to reproduce the flat-color
lettering and retain the subtle colors in the bird:
|
| |
 |
|
| This 256-color
GIF reproduces the image very well but the file size is 4.4K. |
|
| |
 |
|
| Dropping back
to 128 colors makes little visible difference but gives a
smaller file size of 3.62K. |
|
| |
 |
|
| At 64 colors,
the image is still perfectly acceptable and the file size
has lowered to 2.87K. This is probably the best we can do
with this particular logo. |
|
| |
 |
|
| With 32 colors,
at 2.37K, the subtle color blending in the upper wing has
separated into three distinct areas. |
|
| |
 |
|
| Further reduction
to 16 colors reduces the subtleties even further. If you
find this flattening acceptable, this may still an acceptable
representation of the logo—and the file size is now
only 1.94K. |
|
| |
 |
|
| Even with only
eight colors (1.5K), the parrot is recognizable. Note also
that the lettering hasn't suffered at all. There are enough
colors to provide a smooth edge. |
|
| |
 |
|
| Reduced to
only four colors, the file size is now only 1.14K but the
parrot is now very basic and the lettering takes on a nasty
jagged look because there aren't enough colors to blend it
into the background smoothly. Note that we've lost the yellow
in the image. |
|
| |
 |
|
| Obviously,
two colors are not enough to reproduce this image and the
0.76K file size is ridiculously low. You can only use two
colors for simple rectangles. |
|
| |
 |
|
| Saving the
logo as a JPEG of similar size to the optimal GIF (2.54K)
shows how inappropriate the JPEG format is for this kind
of image. JPEGs don't handle flat colors well. |
|
| |
Making
a GIF color transparent
One thing that you can do with GIFs, and not JPEGs, is designate
one of the colors as transparent. A transparent color allows
the background to show through. This is very useful if the
web page has a textured or patterned background. Some care
is needed here, however, because if the original image sits
on a white background and is then stuck on a web page that
has a blue background, it won't look right. Since the intermediate
tones along the edge of the lettering change gradually to
white instead of blue, you end up with a white halo around
the type.
For this to work correctly, you should first place the
image in the image-editing program on its intended final
web page background color and then make that background
color transparent. If the background is a texture or
pattern, the dominant or "average" color can
be used.
Here's what I mean:
|
| |
 |
|
| Making
the white background in this logo transparent (left) and
then putting the image on a blue background won't work. As
the soft edges of the image graduate to white, they cause
a halo on a blue background (right). |
| |
 |
|
| Here
the original image was on a blue background that I made transparent
in the image-editing program (left), giving the correct edge-blending,
called "anti-aliasing" (right). |
| |
Keeping
file sizes (and page sizes) low
Having established that you should keep individual graphic
files as small as possible, it follows that the number of
them present on a page is also an issue. If you reduce the
file size of a photograph to 10K but then place 10 of them
on a single web page, the total page size will swell to over
100K, which could pose a problem unless your site's visitors
all have broadband connections.
Under optimal conditions, which are actually pretty rare,
a 100K web page takes about 15–20 seconds to download
in the browser using a typical 56 kbps dial-up modem—which
is way too long. When pages take longer than about 10 seconds
to load, people lose interest fast and go elsewhere. A
maximum page size, including all text and images, should
be in the region of 50K (downloadable within 7–10
seconds at 56 kbps). Less is better.
Testing the loading times of web pages on your own machine
or over the local network is never going to give you realistic
results. It's what the web surfer sees on his or her end
that counts. Before any new page goes live, view them from
a laptop or home computer that's linked to the web with
an ordinary modem. Then what you see is truly what you'll
get.
|
| |
| |
|
|
About the author
Joe Gillespie is a new media consultant based in London.
Since 1996 he has published Web
Page Design for Designers, a site dedicated to the
more creative aspects of web design. He also designs screen
fonts for web designers, such as the classic MINI
7.
|
| |
