Home > Archive > Optimize Your Graphics for
a Fast Loading Site
Optimize Your Graphics for a Fast Loading Site
Heavy images cost you money and
traffic. They cost you money because they
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 youll have to pay extra.
Then, heavy images 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 images for the web. Your
images 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
image 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
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 images 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
images 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 images, the
browser will lay out the text where it should go from the beginning, even before it loads
the images, 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.
You can freely reprint this article. Just include the following resource box at
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.
To read past articles, go to our Archive.
To subscribe to our newsletter, click here.