CWC index .

Image Coding and Optimizing

coding . thumbnails . optimizing

thumbnail of kite festival - Toronto 2000 ©ejm/TPH 2000,2003

While images on pages add interest, if they are not fully encoded and optimized, they will cause page loading time to be excessive. This can and does result in loss of visitors to your site.


coding . thumbnails . optimizing

Here is the HTML coding for the first image on this page. This attention to detail will cause the image and page to load as quickly and efficiently as possible. The bold sections between the quotation marks in the code snippet should be changed to fit each image placed on a page. It is recommended to always include the quotation marks. (Remember to close them.)

<img src="kites2000detail_thumb.jpg" alt="thumbnail - kites" width="300" height="96" border="1" />

What does it all mean? The src spec should look exactly the same as the name of the image. Remember that names are case sensitive. Note the difference between "kites2000_detail.jpg" and "Kites2000_Detail.JPEG". You may find it easier to use lowercase letters only for file names.

The alt spec is there for people who are sight-impaired or who have browsers that do not have image support (Yes, there are still people out there with text based browsers) Be brief but descriptive. There are an inordinate number of webmasters (including highly paid ones, sadly) who neglect to fill in this very important detail

The width and height specs should be the same as the actual image size that is being loaded. Specifying the height and width means that the rest of the page only has to load once rather than resize around the image once it has loaded.

If the image you are putting on your page looks too large for the page, resize the image in your image editor to the size you want. (Always keep copies of the original!) It is especially important to put these height and width specs in. Your page will load much faster - and that's what it's all about in this impatient world of the internet.

The border is a pixel specification for the line around the picture. If you do not want a border, put border="0" The larger the number, the wider the border.


coding . thumbnails . optimizing

thumbnail of kite festival - Toronto 2000 ©ejm/TPH 2000,2003

If you wish to display a number of images on one page, it is a very good idea to make thumbnails. The thumbnail images can act as links to separate pages showing one or two larger images. Using your image editor, make copies and resize each image to the size you want for thumbnails. (Always keep separate copies of the original images!)

Because this page is not particularly image heavy, the above thumbnail links to another part of this same page. However, please bear in mind that not everyone has unlimited hours of highspeed connection. There are still many people with dialup connections at hourly rates. If your pages are too image heavy, the loadtime will be prolonged and many of your visitors will move on to another site.


coding . thumbnails . optimizing

Many images can be reduced in bytesize without really compromising the quality. The 49.0kb image is the original size; the image below it shows the bytesize reduction made at NetMechanic's Image Optimizing (free online). As you can see, there is a tiny bit of graininess in the sky, but otherwise, both images are virtually identical on most monitors.

original image 49.0kb
kite festival - Toronto 2000 ©ejm/TPH 2000,2003

optimized image 29.3kb 40% smaller in bytesize than the above image
kite festival - Toronto 2000 ©ejm/TPH 2000,2003

coding . thumbnails . optimizing

The following pages may also be of interest:


© llizard 2003

CWC reference pages . ASCII-art . illustrations and gif animations . llinks to ridiculously useless sites . home page