Optimize Your Graphics for the Web

Heavy graphics cost you money and traffic. They cost you money
because heavy graphics require both significant storage space and
bandwidth. Since your web host will usually give you a limited
amount of storage space and a maximum data transfer allowance, heavy
graphics can cause you to exceed those limits, in which case you'll
have to pay extra.

Then, heavy graphics cost you traffic: put up a web page that takes
more than 10 seconds to load, and your visitors will run away faster
than you can say "back button". If you happen to be running an e-
commerce website, you already know that traffic equals money, so
heavy graphics will make you lose both.

Fortunately, there is a solution: you can optimize your graphics for
the web. Your graphics should be in either .gif or .jpg formats
(.gif works best for logos and navigation buttons, while .jpg works
best for photographs.) The idea is to reduce the size of your
graphics so that they take as few bytes as possible while retaining
acceptable quality.

This can be done using free on-line graphics optimization tools. One
of the best ones out there is Gifbot, by Netmechanic
(http://www.netmechanic.com/GIFBot/optimize-graphic.htm ). They have
a user-friendly web-based interface that works like this: you upload
your picture, they process it, and almost instantaneously they will
give you several lighter versions of your graphic for you to chose.

Pick the image that takes the fewest bytes while still retaining and
acceptable quality level. It is not uncommon to reduce the weight of
a picture by up to 70% with no noticeable decrease in quality
(especially if the image is in .jpg format.)

Another useful tip is to use thumbnails. Thumbnails are miniature
versions of a picture that are hyperlinked to its actual size
version. The thumbnail will load fast, and by clicking on it your
visitors will be able to see the actual size version.

Also, it is very important to specify the width and the height of
your pictures in your HTML code. Since the text of your page usually
loads faster, if you don't specify the width and the height of your
pictures the browser will have to reposition the text once the
pictures load, consuming more time. If you take the time to specify
the width and heigth of your pictures, the browser will lay out the
text where it should go from the beginning, even before it loads the
pictures, saving time.

Use all these techniques and you will have a faster loading website,
while you will save more of your storage space and data transfer
allowance for that useful content your visitors are always looking
for.

----------

Mario Sanchez publishes The Internet Digest (
http://www.theinternetdigest.net ) a website and newsletter that
gives you advice on web design and Internet marketing, one free tip
at a time.

<<Back