A number of times I have come across advice on the internet regarding the insertion of graphics in web pages, which stresses the need to ‘Constrain’ images in order that they download faster! …… WHAT! … Of course this maybe a case of misplaced terminology and what the bearer of the advice may in fact mean is ‘Compress’ images which of course may be an option and indeed will shorten download time.
Let us look at the whole area of electronic imagery and the internet, and how we can improve both download time as well as page layout while retaining an acceptable image quality. In easy to understand terms, an electronic image file consists of data relating to the positioning and colour of pixels (picture elements), or dots within a picture, when read by software like a graphics editor or a browser. This raw data is arranged into position so that we can view the image as a ‘picture’.
WHAT DOES ‘CONSTRAINING AN IMAGE’ MEAN?
Constraining an image (in relation to web pages), basically means that instructions are placed in the code of the web page (HTML) that ask the browser software to change the basic screen display dimensions of the image to a particular size, (physical screen dimensions), other than the original size. The image file itself (raw data), does NOT change one bit, it is still the same size (exactly the same file with the same number of bytes), therefore it will still download in exactly the same time, actually the image is still downloaded in it’s original format. – All that has changed is its appearance on the screen! In other words it has been squashed into a restricted space by the viewers browser software on arrival, and the quality of the viewed image generally suffers.
WHAT DOES ‘COMPRESSING AN IMAGE’ MEAN?
An Image is generally compressed at the time of its creation, and is normally done with graphics editing software like Photoshop or Paintshop Pro (or the hundreds of other packages available), the software achieves this by using a complex predefined algorithm depending on what file type is required (jpg, gif, png, etc.). This process DOES reduce the size of the file, (it’s the whole idea of these types of files). This of course does indeed reduce the time required to transmit the same graphic across the internet. However there is a trade off! When the image is compressed the quality is compromised, so there is a fine balance between the degree of compression and the quality required to achieve the desired effect in the web document that it is intended for. (Visit: http://bytesandbites.is.dreaming.org/4free/page3b.htm for a complete description of different graphics filetypes, and editing software)
WHY CONSTRAIN?
I dunno … there maybe a case for using the same image in different pages on the same site, but some of the instances of the image may be required to be displayed smaller, so instead of creating a new image that is a smaller size, it may be more efficient to use an image that has already been downloaded for a previous page (already in the browsers cache), and constrain it. Using this method the download time of the second instance will be reduced to the initial handshake between the browser and the server where the browser is instructed that it already has the file available, (no download at all). In which case the overall download time of both “sized” images is less. A more common and efficient use of the constraining facility is for layout purposes, … a reasonably common practise is to create a small 1 x 1 pixel ‘.gif’ file and make it transparent, (so it can’t be seen on a browsed web page), this file takes almost no time at all to download, and can be used to space text, graphics or other html elements, (like table boundaries), by stretching the dimensions of that graphic to virtually any required size (constraining is good when used properly eh?). Otherwise I’d trash constraining altogether in web pages, as it doesn’t achieve much else. In general terms it is better to create the file the size and quality required to do the job at the outset.
Owen Lamb – Lecturer, Computer Aided Design and Architectural
Technologies. Special interests; Internet and Web Site Design.
His
site is jam packed with TOTALLY FREE Advice, Tutorials, Tools
and Articles on Web Site Design and Deployment:
http://bytesandbites.is.dreaming.org email: bytes@ihug.co.nz
