|
Web Programming and Design: Images and Thumbnails
By
Sergio Roth
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. |
