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.
Sergio Roth is an experienced freelance web programmer. You
can contact him for hosting and website development services
at
http://www.ayreshost.com
