Web
Programming and Design: Images and Thumbnails
Web Programming and Design: Images and Thumbnails
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 domain registration,
hosting and website development services at http://www.ayreshost.com.
|
