Image Coding and Optimizing
Coding
coding | thumbnails | optimizing | further reading
Here is the HTML coding for a typical image. Including all the required attributes will allow the image and page to load as quickly and efficiently as possible. The bold sections between the quotation marks should be changed to fit each image placed on a page. Quotation marks around attribute values are required.
(Note that the <img> tag is one of the few HTML tags without its own closing tag. If you are coding to XHTML specs, then the additional space and forward slash at the end of the tag will function as the required closing for it.)
<img src="kites2000detail_thumb.jpg" width="300" height="96" alt="thumbnail of kite festival-Toronto 2000" border="1" />
What does it all mean? The src spec should exactly match the name of the image, including letter case. File names on *nix servers are case sensitive. They cannot contain spaces, and the only symbols allowed are a hyphen (-) and an underscore (_). Note the difference between "kites2000detail.jpg" and "Kites2000Detail.JPG". You may find it easier to use only lowercase letters in file names.
The width and height specs should be the same as the actual image dimensions in pixels. Specifying the width and height means that the browser will reserve space on the page for the image to load, and then render the faster loading text around the space. This way, the page can still be read while the image is loading.
If the image you are putting on your page is the wrong size for your design, do not just change the numbers in the width and height attributes. Resize the actual image in your image editor to the size you want, before uploading it. (Always keep copies of the original!) It is especially important to put these width and height specs in. Your page will load much faster - and that's what it's all about in this impatient world of the internet.
The alt spec is required, for people who are sight-impaired or who use 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 who neglect to fill in this very important detail.
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.
Thumbnails
coding | thumbnails | optimizing | further reading
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.
Optimizing
coding | thumbnails | optimizing | further reading
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, on most monitors they will look virtually identical.
original image 49.0kb
optimized image 29.3kb 40% smaller in bytesize than the above image
Further Reading
coding | thumbnails | optimizing | further reading
The following pages may also be of interest:
- Ulead WebUtilities: Why Optimize?
- Netmechanic's Load Time Tip: Reuse, Optimize, and Preload Images
- Can You Over-optimize Images in HTML?
