The purpose of 'Using Graphics'.... is to raise a few issues regarding the use of graphics on our web sites and to set the stage for six other topics which provide more detail.
It's difficult to picture a web site that doesn't utilize graphics. While words convey the meaning of our site, they are by themselves tiresome, and when strung endlessly together, can make our visitors weary and inattentive.
Consider our visits to the
supermarket. Do we buy products based on their lists of ingredients and
nutritional content? Not at first really, if you think about it. The
package catches our attention because of its graphics: the pretty
background, colorful and artistic lettering, and of course a mouth
watering picture of what's inside. Only when the package is in our hands
and at eye level, do we have the opportunity to learn whether this
product is actually good for us.
Web sites are not all that different! If we make a good first impression when someone lands on our site, there's certainly a better chance they'll stay a while, at least long enough to 'read our list of ingredients' and see if our site is 'good for them'. Graphics make this happen.
I also have a theory that people don't like to read. If they did, books would outsell movies and theater, and catalogues would be more effective than billboards and TV commercials, and Reader's Digest and People Magazine would be out of business. So, if you agree with me at all, our job as web designers is to distract the reader in subtle and not so subtle ways so that they don't have a sense that they're reading, but rather viewing. If we're successful, our web site will be a multi-media presentation. Its 'word' messages will be much less boring and will better get through to the viewer.
My site is
thoroughly laced with this type of "eye-candy". You've come here
for information on how to build web sites, but darned if I want you to
doze off while you're reading it. You'll go away and never come back, no
matter what my message is.
OK, I hope I've almost
justified my countless 
buttons, silly and not so silly animations,
page banners, and pictures, clip art galore, and pictorial examples
of 'most everything except milking a cow. My hope, if I'm doing it right,
is that you will go away carrying my messages with you, and not feeling
all that weary for the effort.
The graphic elements available to us are page backgrounds, fonts, banners and buttons, bullets for indented lists, clip art and photo images, and animations. The production and delivery vehicles for these graphics include a good image editor, graphics rendering software, clip art and photo libraries, font collections, javascript and java, and hopefully enough creativity to put it all together effectively.
Getting past the
"eye candy", we also need more serious, real-world images,
supplied by scanners and digital cameras. We still need to have images of
the client's offices, pictures of their staff, and images portraying their
products and services.
If you scan over to the navigation list on your left, the next six topics will focus upon this mission. Those exercises are intended to show by words and examples how graphics can contribute to our success. There are also suggestions on how we can create some of our graphics, even if we're 'artistically challenged', as I am.
The $1,000,000 question I'm sometimes asked is "where can I buy collections of graphics? This is truly a tough question because many of the 'clip art collections' for sale are pure garbage. You've seen them yourself, haven't you? A collection of 250,000 pieces of clip art will likely have at least 10,000 variations of things that look like this:
|
|
|
|
Make sure you can get your money back if you're not satisfied !! (Easier said than done.) I wish I could name names and at least tell you what NOT to buy. I bought around 8 collections and only liked two. I got my money back on a couple and ate the rest. Here are a few constructive suggestions.
 |
Whenever possible,
make your own. That may sound difficult but I show you in the next 6
topics that it IS possible. You may astound yourself with
what you can do. |
|
Go to a computer store like CompUSA or Best Buy and look at the graphic collections. Study the ones which show you a lot of samples on the box, find something you might like and doesn't cost too much, cross your fingers, and try it. I bought a collection from Nova Development called 'WEB Animation Explosion'. I liked a couple dozen and have used some on this site. They're obviously not for everyone but I keep them around to draw upon when I think it's appropriate. Do you remember these? |
|
|
|
|
|
|
If you see a
particular graphic on the internet that "you've just got to
have", write to the webmaster or site owner and try to obtain
permission to use it. Many people will give you their approval. |
|
You can visit these
web sites which might have something for you: "All Free Original Clip Art", "Art
Today" and "ArtByCheryl". |
All Free Original ClipArt
has a variety of graphics, plus links to other similar sites. This
is time consuming, but you may find things you like. Be careful though
because everything isn't necessarily free; check out licensing
restrictions where they apply.
Art
Today has a very large collection with some freebies. They make
their money by offering you an annual membership for $30, entitling you to
download as much as you want in a year.
ArtByCheryl
is an unusual type of art. Cheryl draws the artwork herself and scans the
images. There's a price attached but it's reasonable and you get a chance
to see the artwork first. That's where I obtained this graphic used on my
home page:
|
|
 |
 |
 |
 |
I'll present a few guideline in the use of graphics and then you'll be free to explore other topics of interest.
|
In choosing between GIF
and JPG formats, a couple decisions are made for you. If you
want transparency, it's GIF. If you need more than 256 colors, it's
JPG. If it's line art, or simple clip art, it's probably GIF. If
it's a photograph, it's probably JPG, although you may want to try
both formats and use the smaller one, assuming equal quality. When I
created a screen captured graphic for the Publishing
Your Web [Maintenance] topic, it surprisingly was 74K as
a GIF and over 120K as a JPG and to my eye they looked the same. If
you want, have a look. |
|
When using a fairly
sizable image, try not to make the user wait for it all to download
before you show it to them. An interlaced GIF and a progressive JPG
are downloaded in phases and become progressively clearer as they
continue to load. There's some immediate gratification which makes
the user more patient. This is mentioned in the Image Editing topic, but you may miss
it. |
|
When you must use
large graphics, the ones that affect download time noticeably, you
have a couple more choices to minimize annoying the reader: use the
HTML ALT="name of your graphic"
specification, and also supply a HEIGHT
and WIDTH specification. |
|
Be careful mixing
images with text; they don't go well together. Images can be placed
in the text using top, bottom, left,
and right (and other)
specifications. If you have only one medium sized graphic, place it
in the paragraph as left or right, whichever suits you. On this
page, the cereal graphic is positioned 'right' and the candy graphic
'left'. |
|
Consider using thumbnails as links to large graphics. This gives the user a chance to see a little of the picture before opting to suffer the download time for a picture that's not of interest. A good example of this is my topic Web Theme Samples. The price of downloading 67 5K thumbnails is paid back quickly to a user who wants to see a half dozen or so themes. |
, as I have, try to make it
almost the height of the text in the line and it won't look too out
of place. Adding a second