Add Some Spice to Your Website
Article ID: KB101545
One of the easiest ways to jazz up a boring web page is to throw
in some graphics. But before you start gorging your site with
full-color, spinning, blinking, 400x500 pictures, here's a few
things you may want to consider:
Do I really need this picture?
The fewer pictures you have, the faster your page will download,
and the more likely people will stay on your site. So ask yourself
what purpose the graphic serves and how it improves your site.
Here's a note: Studies show that people ignore your navigation
elements and go straight to your content! So don't bother putting
huge, intensive navigation buttons on your site. Make them small, or
make them text.
Is this picture optimized?
There's a fine balance between image quality and file size. If
you're designing a site for the average user, remember that most
people have 28.8 to 56K modems! In FrontPage, you see how long it
will take your page to download in the bottom right-hand corner of
your screen. By playing around with image formats (FrontPage has a
few built-in conversion filters - to learn more, go to FrontPage
Help and type in Picture), you may be able to optimize your picture
so that it's as small as it can be with quality that you can live
with.
If you'll be working with lots of web sites and pictures, you may
want to invest in a more powerful graphics program, such as Adobe
Photoshop/Image Ready (they come together) or Macromedia
Fireworks. If those programs are a little too pricy for you,
consider
Adobe Photoshop Elements, which is great for amateurs but offers
most of the frequently-used tools of Photoshop for only $99.
If your picture is animated, is it helpful or distracting?
In general, most spinning, rolling, blinking, jumping, etc.
animated gifs are distracting. But in a few cases (for example,
displaying graphs), animation can add some depth and movement
without taking away from the content. Just be sure that the
animation doesn't loop for more than a few times.
About web images...
There are two main file types for web images - .gif and .jpg.
Most photo editors will have an interface that allows you to
optimize for the web.
Save an image as a .gif if it has few colors (think a cartoon or a
'flat' logo) or if you want a part of the image to be transparent.
The more colors a picture has, the larger file size it will be.
Save an image as a .jpg if there are many color gradients. There
are different quality levels (compression levels) that you can
choose. Twiddle with the settings until you find one that is a good
compromise between file size and quality.
Helpful tips for using images...
Images can help to bring visual interest to your site, even if
you don't have a need for diagrams or illustrations.
- Graphic headings or titles
Lots of site use graphics with text for headings or titles.
While some web-purists will protest, this is definitely one way
to make your site look a little more professional. Make sure
that the font you use complements your logo as well as the other
text on your site. You can make graphic headings in a photo
editor and save as a .gif.
Use color wisely.
For seamless integration, choose photographs that compliment
the color scheme or motif of your site. For example, see how
Microsoft matched the heading colors with the photos on their
Windows XP info page.- "Clickable" areas
You can often use images as a "clickable" area - almost like
a button on the page. For example, look at our home page. The
"favorites" and "product support" illustrations not only tell
you what the section is about, but also allow you to click into
those pages.
- Make your point
Use photos to illustrate a point or send a message.
Integrate or place text on a photo with some kind of tagline.
Go find it!
Not a professional photographer or artist? There are tons of
graphic libraries on the web -- some free, some not -- if you need
to find the perfect photograph or image. Here are some resources you
may find helpful:
*Note: What's the difference between "rights-managed" and
"royalty-free" images?
Rights-managed photography is priced based on the buyer's
intended use, as well as factors like the size of the photo, how
long it will be used, and the distribution of the photo. The people
who sell rights-managed photography track the usage so that they
know how the photos are being used. Rights-managed photography is
generally more expensive.
Royalty-free photography is purchased once by the buyer and can
then be used multiple times, for multiple purposes. Licensing
agreements may vary, so you should read the agreement carefully to
see what you can or can't do with the image.
Corrie Haffly, PixelMill Newsletter, Volume 1 - Issue
5 : 8/01/2001
Updated 12/4/2003
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1073/kb101545.htm
permalink to this article:
http://www.pixelmill.com/support/kb101545.htm
Back to top