| Images are usually easy, as long as You have a good image editor and have a good understanding of graphics they will be with easy to work with. First off, every image should be used with it's size (height & width) and with alternate text being set. The reason for setting the size is so that when a page is loading the text and/or other graphics don't start shifting around while the page loads. That is usually the cause of a page distorting and reconfiguring itself as it loads. |
Some of the parameters that are used with the IMG tag include SRC = the location of the image, ALT = the text to display if the image is unavailable or the browser has them off, BORDER = the border size around the image, WIDTH = the width (in pixels) of the image, and HEIGHT= the height (in pixels) of the image |
| MailBox Example Image: |
 |
| MailBox Example Source Code: |
<IMG SRC="../images/mail_box.gif" WIDTH="50" HEIGHT="60" ALT="Mail Box Image"> |
|
When an image is displayed without the BORDER tag set it will default to "0", but if the graphic is being used as a hyperlink it will default to "2" |
Using Thumbnail Images |
| When making thumbnail images try keeping their file size at a minimum that is the whole reason for using thumbnails, have them load up fast so the person viewing th page dosen't have to wait for large graphics to load before they continue browsing. |
| I make thumbnails by opening the image in my graphics editor, resizing to the size I want, reducing the colors (if necessary), and saving the file with a different name. Most of the time I keep the name the same but add "_s" to the file's name. For example if the image was named "image.jpg" and I made a thumbnail I would call it something like "image_s.jpg" or "image_s.gif" |
| The most important part is keeping the file size low, try the different formats (gif, jpg, etc.), although I have seen it done try and not use bmp on the net, most browsers can't view them like a jpg or gif. |
| In the following example I will use a thumbnail as a link to a page containing the full size image from that page You can click the full size image and return to this page. The image is a jpg that is also used in my image map example. |
|
|
| Other Image types |