Alucard Inchoate Ltd Alucard Inchoate Ltd

What do I Need to Know

There are 4 golden rules with images in web pages, and you have already encountered the first. They are:

  1. Use the correct file format for the image, true colour to JPEG, 256 colours or less to GIF.
  2. Add size information into the image tag in your HTML, using the height and width commands.
  3. Size the image to the correct size in your paint program not in the browser.
  4. Reuse your images where you can.

Use the correct format

Okay, you know to use JPEG for photographs! What else do you need to know?

How to make each format work for you. The main tip with JPEG is to create the image, and make all of the changes in a format that suffers no losses, such as TIFF. The losses in JPEG are cumulative, if you save the file with one level of compression, and then open and save it again, with the same level of compression, the algorithm is applied twice, and the image quality degrades very rapidly indeed. If, however the file is saved as TIFF, no quality is lost during saving, and so the image can be saved numerous times during editing without compromising the image quality. When you are happy, save the final version as a TIFF, and then export the image as a JPEG.

Working with compression. If you use a paint package that will give a preview image as you save, use it. This is available in a lot of packages, and allows you to judge the quality of the final image before you save it. Changes in the compression levels applied to the JPEG file can then be optimised by eye, giving the best possible output with the minimum file size.

The big tip with GIF files is the colour depth. By default, GIF images are assumed to be 256 colours, and so a 256 colour palette is saved with the file. If the image only contains 123 different colours, then saving this with a 256 colour palette is just adding additional, unnecessary information. This is truer when a file has only a few colours. Try adjusting the colour depth of the image to 16 or less colours, keeping an eye on the quality of the output. Watch the difference in file size when you save with a smaller colour palette.

Use browser height and width commands with images.

This is something which is easy to miss, but can save time when a page is being downloaded due to the way that browsers work. Most browsers maintain more than one connection to the web server when pages are being downloaded. The first file to be downloaded is the HTML file, with all linked and embedded files following afterwards. Typically the browser will manage four web server requests at any one time, and will not make a further request until one item has been cleared.

By specifying height and width information, the browser knows how much space to leave in the web page for the documents, and so can complete the HTML page request at the bottom of the document. If you do not specify height and width information for your images the HTML file will not be closed until all of the images have been downloaded. So one of the channels is closed to your images, increasing the wait time for the page too fully load.

This is one of the most simple to achieve performance enhancements, and it costs next to nothing.

Size the image to the correct size in the paint program, not the browser.

Having added your height and width information to your image tags, you now need to make sure you don’t abuse them. Browsers will allow you to add any height and width combination you want, and the browser will fit your image to the box. This may sound perfect, but it will only slow your page loading time down, or reduce the quality of your images – apart from one specific application.

This problem usually occurs when a large image is squeezed in the browser to fit into a smaller gap. Point 1 – you will de downloading more information than is required for the size of the image, resulting in worse performance. Point 2 – the browser has to render the information in a different way to that stored in the file, resulting in another performance hit. Point 3 – your paint program will be much better at producing the scaling than your browser, so the image quality will be worse. Not doing it properly is laziness, and the performance hit could just lose you business.

The other manifestation of this is to expand a small image. Digital size enhancement is not very good in a paint package designed to do it, and it is much worse in a browser. Make the image the right size in the first place, or suffer the smaller than desired, but decent quality image. If you must expand a picture, do it in the paint program, the results will be better.

What about this one specific application? Look at the lines bordering this page. They are simple shades of one colour, and so to save on download time, the file loaded is a single pixel GIF file. This single pixel is then sized by the browser to our required dimensions. There is no loss in quality, and the single pixel is tiny, so this is a winner.

Reuse your images.

Every time you download an image, it takes time. But here you’re the browser will help, If its is configured correctly. Once an image is downloaded it is stored on the users computer for a period of time. While the image is stored locally, this version is used if the image is called again. Loading from the local disk is vastly faster than loading through a modem, so these locally stored images seem to arrive instantly.

Make use of this, reuse images. You get a performance hit the first time the image is downloaded, but each subsequent time it is required it appears as if by magic. Think about this in the design phase. You can design complex images in small parts, building the final image from the sum of the parts. But some of these parts can be repeated files, or possibly be areas of a single colour. These would be ideal candidates for single, sized pixels, and for reused image files.

Previous - Images in my Pages Next - Web Design
You may contact us by telephone on +44 (0)1942 723111 or by post to
Alucard House, Willowfield Grove, Ashton, Wigan, WN4 9NN, England.

Home | Software | Products & Services | Hosting Plans | Hosted Sites | Design Help | Lessons
Alucard Inchoate Ltd, developers of PC Solutions since 1979.