Images can add colour and excitement to your web page.
Sunset Dominican Republic
and also be used as site navigation tools
When starting out you either want to get or create images in 2 compressed file types (as almost all graphic browsers can use them irrespective of operating system)
.jpeg (or .jpg)
Like our sunset picture above .jpeg files are the best for photos as they can handle in excess of 15 million colours as they use 24 bit "true colour".
The compression routine ("lossy") used is great for preserving colour but not so good at edges. Noise is create around the edges as the compression is increased. Hence .jpegs are not good for line diagrams or simple block colour icons
.gif
If you're wanting a simple image with homogenous colour or line diagram then .gif is hard to beat. Images produced by .gif compression do not create the "noise" that you get with .jpeg.
However as it can only at maximum handle 8 bit colour (256 different colours top - most of the time just 216 is recommended) it is not so good for pics or complex textures.
However .gifs can also be animated like this
Composer will convert some other file formats for you such as .bmp, pcx. But be wary.
Getting Images
You can either create your own images by using a scanner for photos or use graphic packages.
Or you can get discs of prepared images. You can often get free images from many computer magazines cover disc or you can buy one of the several web art images discs commercially available. As always check copyright instructions.
Alternatively, there are several sites on the net offer free or by condition .gif and .jpegs (a list of some of these is on our link page).
To get image from a web site using most browsers, right click image and select "save picture as". You can rename it but remember to send it to the folder your web page is on. Always check the copyright notices before taking an image off the web and never pinch an image as some will take legal action if their images are used.
IF you're using composer from Netscape 6.0 or higher we'd recommend you save whatever image you use into your web site directory
Inserting Images in Composer
Simple. Click cursor where you want image. Either click image icon or click insert -> image
With Netscape 6 you get the following
If you click the (A) tag you get a range of options we'll explain later
With earlier version (before 6), you get something like this which has all these other options
In the (A) image location box either type in your image name (e.g. myimage.gif) or use the "choose file" button to find it.
With newer versions (6.0 onwards) it is vital that you save the image file in your webfolder first. Click the URL is relative to page location tag otherwise the HTML code will point to an absolute URL address relative on your hard drive (others won't see it)
With older versions (4.8 or less), you don't need to be so picky. If you want to import the image file into your web folder just leave the leave your image at the original position unticked and the image file will be moved to the same directory. If you set aside a second folder on your site for a graphics bin, you can tick to leave your image at the original position as the older version of composer points via a relative URL method
Altering Images
Basics
Images can be cut, copied and pasted just as text
Shape
You can also alter the shape of a picture.
With earlier versions of composer (before 6.0) If you click on the corner of picture and hold down you can alter the size as we've done here
Or by clicking on a side you can stretch a picture
e.g.
You can also do this via the (C) the dimensions box on the image properties menu (just right click on your image and select image properties)
Changing the position of images relative to text
You can alter how images appears in relation to text.
This can be done when you first insert the image or later if you want by right clicking on your image and select image properties.
You have a list of alignment options (B) . You should try to limit yourself to top, middle, bottom, left and right (these are the only one complying to the HTML v4.0 standard. The rest potentially could markedly alter your site on another browser)
e.g.
this image is set at top whereas this
on is at bottom however note the text doesn't wrap around these images (it becomes just like a line in the text)
If you want text to wrap around an object as it does here you need the left and right alignments. The image on the left is set to left and text wraps round on its right side (vice versa for right alignment)
BORDER SIZE
You can also set an border size for an image via the the spacing/space around image (D) area. All values are set in pixels
This can be visible using the border option
e.g. 0 pixels
2 pixels
15 pixels
or an invisible border both horizontally like here (set 20 pixels) or vertically like the image below
Which has 30 pixels top and bottom
ADDING AN ALTERNATIVE MESSAGE
Not all browsers support images and people with impaired vision who surf using talking browsers can't see images so it is a good idea to put in alternative message (This also coolly pops up when most people pass their cursor over them - try the any of the pics above)
On Image properties click (E) Alt text/low res or Alternative text options