Using Graphics

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.

Pretty Graphics Help Sell ProductsConsider 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.

Eye-CandyMy 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 Show Me 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:

Great graphic, eh?

Awesome button ... NOT!

I think I'm a penguin,

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? 

Bright idea!


Don't take my JAVA!

This isn't really Sam Gerber.


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".

Free Original ClipArt 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 TodayArt 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.
Art By CherylArtByCheryl
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:

Yes, my name is Sam Gerber.

Print ShopPrintShop Deluxe Version 11: I've been a fan of PrintShop for many years. This particular version excels in its diversity of clipart and photo images. They claim 185,000 pieces. Included is a selection of web graphics which includes many animations and backgrounds. Their clip art and photos can be exported. I copy them to the clipboard and bring them into PaintShop Pro where I may diddle with them (resample, crop, etc.)  make them transparent if desired, and save them as JPG or GIF. What's really nice about PrintShop is that they offer a search feature by keywords and show you all the 'hits' using thumbnails. When you make a selection, you'll have to insert 1 of 5 image CDs. In my view this package is an absolute bargain! And the search feature is terrific; no catalogues to look through or libraries to browse. Many PrintShop items are on this site. Here are a few. Do you remember?

PS Sample 1 PS Sample 2 PS Sample 3 PS Sample 4

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. FrontPage Thumbnail

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.
The HEIGHT and WIDTH parameters enable the browser to lay out the page in advance, making for a faster download. Also, the empty block representing the graphic will bear a name provided by ALT= so that the user will know ahead of time what it is. If it's a link, s/he can take it without waiting for the graphic to fill in. A second benefit of ALT= is providing a description of the graphic after it's loaded. I frequently forget to do this, as do many. Mouse over some of the graphics on this page and see what they say.

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'.
If you have multiple graphics, use a table to 'bind' them together and provide proper separation, one from the other. The PrintShop sample graphics above are bound by a table.
If you want to blend a graphic like this , 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 to the same paragraph of text will also be OK. These graphics are aligned 'top' and 'bottom', respectively, in this paragraph. Notice that 'bottom' didn't work out very well and caused line spacing. You need to experiment.

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.