Images on the Web

One of the great advantages to creating a Web page, as compared
with a printed brochure or other print material, is the ease with which you
can add various multimedia enhancements to your pages. The simplest and most
common of these enhancements is to add images. Used well, they can make a site
come to life. Used poorly and they will drive even your mother away. (Yes, your
mother loves you, but even she has her limits.) In
this article, I will attempt to give you the tips needed to make your site one
of the good ones.

File size and download speed

The first consideration is file size. You may have heard that
a picture is worth a thousand words. That is not exactly correct. A picture
may be the equivalent of many thousands of words when you get to comparing file
sizes. And those files need to be downloaded. For a 28.8k modem, a useful rule
of thumb is that under optimum conditions you can
download about 3K per second. A page that adds up to 30K, therefore, would take
at least 10 seconds to download, and often more than that. I recently did a
site check for a student who had a page that weighed in at over 800K. That would
take 4.5 minutes to download. No one is going to wait that long for your page
to download.

The expert on Web Usability, Jakob Nielsen, advises that you never
make your page one that will take longer than 10 seconds to download, tops.
That translates to a maximum of 30K, using the figures I have just presented.
(See The Need for Speed).
Jeffrey Veen of Hotwired has set an even stricter limit of 25K for the pages
he designs. And that is a total for everything that appears on your pages. You
need to count the size of every image towards that total “budget”.
In Georgia Tech’s invaluable GVU
WWW User Survey
, the problem of slow downloading was cited by 61% of all
users as a major problem, second only to slowly downloading advertising banners
(62%). A further 48% cited “too many graphics or useless graphics”.
And as regards connection speeds, this
survey
found that 35% of users connected at 33.6K or less.

Are there exceptions? Yes. If you are creating an internal corporate
Intranet site where everyone connects via 100mbps Ethernet, go ahead and use
all the graphics you want. The number one rule of all good Web designers is
to know the audience. Know what kind of equipment they are likely to have, know
how they are connecting, know what they expect to find when they get there.
If you really know your audience, you will know when you can break the rules
and have a good result instead of a disaster. Also, in some cases if people
know ahead of time that the page will be a long download and are sufficiently
motivated to wait for it, you can get away with an image-heavy page. For instance,
one good technique is to create a separate photo page, with a link off of the
home page, and a warning that it will take longer to download. Grandma will
probably wait for the pictures of the kids as long as you let her know what
is going on. Another good technique is to use “thumbnail” images,
which are drastically resized images, and link them to the full-size image.
But for 99% of the pages you design, start with a bandwidth budget of no more
than 30K for the entire page, including all graphics. It may require some skill
and talent to make a good page within these constraints, but that is what separates
the talented professional from somebody’s nephew with a copy of FrontPage.

Cropping and resizing

The number one tool that a professional will turn to for optimized
images, particularly from photographic sources, is the cropping tool. Most photographs
contain useless background material which adds to the download time but not
to the information communicated. You should ruthlessly prune away everything
nonessential. Jakob Nielsen
refers to relevance enhanced images, which includes properly cropped
images, images that are cropped in such a way as to keep the essential of the
image while reducing the file size. Then you can resize the file and further
reduce the file size.

Here is an example. I am going to describe the first few steps
because the files sizes are unbelievably large. I started with a scanned photograph,
3.5 inches by 3.5 inches. At 300 DPI on the scanner, this produced an image
that was 1017 x 1038, and in the TIFF format came in at over 3 MB. A straight
conversion to JPEG produced a smaller file: 500MB!!. Obviously something had
to be done. The first thing was to reduce the size of the image using a resizing
technique that shrinks the entire images. I resized the photo to 294 x 300,
which makes it about the same apparent size as the original photograph. Here
is that image, which comes in at 49KB:

CherylFormat:
JPEG
File size = 49K

At 49K, this is still way over any reasonable budget for a page.
But looking at the photo, there is a lot of stuff that can come out. The wall
behind her is not particularly interesting, for instance. Here is where some
cropping can help out.

Cheryl croppedFormat:
JPEG
File size = 18KB

 

Note that all I did was crop the photo, I did not resize the image. Nothing
important was lost in the photo. Yet the file size is roughly one-third of the
previous photo. That is quite a savings! We can do a little more by resizing
the image as well.

Cheryl resizedFormat:
JPEG
File size = 12KB

With a modest resizing, the image is now down to 12KB. That is still close to
half of our budget for the entire page, but perhaps a workable solution anyway.
I could have done more cropping and less resizing, for instance, since her face
is the really important part of the image. As a designer you will surely experiment
to see what gives you the best results. The point is not to tell you how small
your images need to be, or how much cropping you need to do. Obviously there
are tradeoffs in this process. But a good designer is one who can work with
the limitations of the medium and still produce good results.

Image format

There are three formats worth mentioning when discussing images
for the Web.

  • GIF – Graphics Interchange Format – Developed by CompuServe
    as a way to share graphics on its online service before the days of the WWW,
    it uses a patented compression scheme (LZW) owned by Unisys. Unisys started
    enforcing its patent and collecting royalties a few years back, which led
    some folks to look for a better alternative. If you are using graphics software
    like Photoshop, Fireworks, Paint Shop Pro, or any of the other major programs,
    you do not need to worry about royalties. The company you bought your software
    from has already paid the royalty, and you can create images to your hearts
    content, quite legally.
  • JPEG – Sometimes abbreviated JPG, and occasionally JPE.
    Stands for Joint Photographic Experts Group. A format designed to display
    photographic images with some compression and still achieve optimal results.
  • PNG – Portable Network Graphics – The new alternative to
    GIF. Royalty-free, but hampered by limited browser support. Even the most
    current versions of Netscape and Internet Explorer have incomplete and buggy
    support. Recommended for experts only.

In practice, therefore, your images need to be either GIF or JPEG in format.
But which one? It depends on the image. GIF is excellent for what graphics designers
call line art. This includes drawings, buttons, cartoons, etc. Anything with
large areas in a single color, and only a small number of colors total, will
work well with GIF. But if you have a photograph, JPEG is likely to produce
better results. Here is some proof of that principle.

A photograph of my dog Shannon

Shannon as a JPEGFormat:
JPEG
File size = 4K

Shannon as a GIFFormat:
GIF
File size = 19K

 

A button

Button in GIFFormat:
GIF
File size = 697

Button in JPEGFormat:
JPEG
File size = 3.2K

Conclusion on file format:

The photographic image, even though small, required 19K in GIF format. This
was approximately 5 times the size of the JPEG image, and to my eyes is still
noticeably less distinct and clear. For photographic images, then, the answer
is obvious: use JPEG as your file format. The button shows the opposite conclusion
comes with the button graphic. This is an example of what is called line art.
It has only two colors, and simple composition. The GIF version comes in at
a trim 697 bytes. The JPEG version, on the other hand, requires approximately
5 times the file size, and still has reduced quality. You can just see some
“bleeding” of the purple into the white text area, making the edges
slightly fuzzier. So whenever you have simple graphics like this, you want to
use GIF as the format of choice.

Now, these conclusions are good as far as it goes, but you can do more. Both
GIF and JPEG images can be optimized. I deliberately did not use any optimization
techniques on these images (except for the cropping and resizing in the section
above) so that I could focus on one set of issues at a time. Image optimization
requires an understanding of image formats and compression techniques, and that
is the next topic.

CC BY-SA 4.0 Images on the Web by Kevin O'Brien is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.