Let's start with an example so you see where we're going to with
this article. Consider a listings type site; in this case, let's
think of a real estate website which lists properties. Each
property has a picture. You have a page where you list all
properties in a given neighborhood, about 20 properties per
page. For each property, you display a smaller version of its
picture (this is called a thumbnail), and a brief description of
the property, so site visitors can click on the property they
like to learn more about it. The problem is: this page takes
really long to display in the browser.
There is a high probability that this problem is related to the
images. You need to analyze how your site generates the
thumbnails. In many scripts, the thumbnails are just the
original pictures, but displayed in smaller width and height. If
this is the case, then each picture takes too long to load. You
should change this approach and generate real thumbnails of each
picture. You also need to change your script to work with the
images thumbnails, and not just the original big images.
There are different ways to generate the thumbnails:
1) Using a graphics program. You load the original image, and
resize it to the thumbnail size. Then you save it with a
different file name. For this approach to work, your script must
let you upload the big image for each property, and also the
thumbnail.
2) Your script can generate the thumbnails automatically when
pictures are loaded, and save them on the server. You only need
to upload the big picture. If your script is written in Php, for
example, this can be accomplished by using Php image functions,
which make use of the gd graphics library. These functions let
you generate thumbnails in different image formats like gif, jpg
and png.
3) Your script can generate the thumbnails on the fly and serve
them directly to the browser. This will save storage space in
the server, but requires a lot of server processing time. It is
not recommended if you have many images, or if your site has
many daily visits.
The important aspect to remember here is that you should not
resize original images to show them as thumbnails, especially if
you're showing several of these images on the same page. It will
not only slow the page load in the browser, but it will also use
a lot of extra bandwidth you can save.
About the author:
Sergio Roth is an experienced freelance web programmer. You can
contact him for hosting and website development services at
http://www.ayreshost.com.
