HTML-Lesson 6
Graphics
Introduction
The graphics tag <img> deserves a lesson to itself; not just for the tag, but also for the many attributes and for the many other ideas that need to be covered.
Preparing an Image for use on the web
Image sizes
In this day and age, where digital cameras are multi-mega-pixel, image preparation should be mentioned. Many people access the Internet using a dial-up modem. Take this into consideration when you prepare an image for publication. Try to keep your file sizes below about 40KB.
Some graphics applications allow you to compress graphics files by varying amounts. In addition, reducing the number of colours can also reduce file sizes.
Image formats
There many image formats--Paint Shop Pro lists about 40 different formats--,but only two are generally used with web Browsers. The 'gif' format works well for line drawings and clip art images while the 'jpg' format works better for photographic images. If in doubt as which is the better for your application, try both. (A new kid on the block is the '.png' format).
Image attributes
An example of an image tag is <img src="graphic.jpg" width="250" height="140" alt="Description of graphic" />. NOTE that the image tag is an empty tag. Leaving out the "/" is a common mistake.
Source of image
The first and main attribute is the location of the picture to be displayed: src="url of the image". Remember that if you have saved your images in a different folder the relative path to this folder must be included in the url. Webpagetutor.com has an excellent description of how this works!
Size
The next attributes relate to the size of the image. If these are not given, then the page cannot be displayed until is fully downloaded. The width and height attributes allow the browser to reserve space on the page before the image is downloaded.
Incidentally, you can specify a graphic as any size for that you like. However, if you specify it as smaller than it is, it still takes the full time to down load so that you are wasting the user's time. If you specify it as being larger than it is, the displayed graphic is 'blocky'.
Here are some examples; the original graphic is 13 x 13 pixels:
 |
 |
 |
 |
| 13 x 13 pixels | 26 x 26 pixels | 52 x 52 pixels | 52 x 26 pixels |
Keep the size of your images in check. Eight to ten Megapixel cameras are quite common nowadays. Even with compression, this produces image files of about two and a half Mega Bytes. At dial up download speeds this will take over eight minutes per image. Too long. Resize the image to about 240 pixels by 180 pixels. It will need some titivation: sharpening at least!
Alt attribute
This attribute contains text that describes the image. It is one of the main ways of making your web site more friendly to those with impaired eyesight. When you move your mouse pointer over the image, this is the text that is displayed. One point that needs mentioning is that the alt attribute should be included even if no text is included.
Now for the fun part. Load your template file and save it as 'index.htm'. Now add some content. E.G. Something about you. Why you want to learn web authoring and so on. Add a picture of yourself. Don't forget to use heading tags. Now send it to me as an e-mail attachment. Remember to enclose the html file, the css file and all the picture files!
