Using images on your web site
You can put images on your web site to help illustrate your articles and make them look more attractive to read.
There are four types of image suitable for using on web pages, they are GIF, JPG (or JPEG) PNG and BMP. Whilst Bitmap images (BMP) can be used they are much larger files so it is best to re-save any BMP images in another format.
GIF (Graphic Interchange Format) is the file type for vector graphics, simple images created like cartoons, that can contain up to 256 colours. They are usually used for bullets, buttons, accents, fancy lines and images featuring text (text degrades badly when saved as a JPEG file). GIF images may have transparent areas, so that they do not obscure the background image or colour of the page. The heading image on this page is a GIF image. An added bonus with GIF images is that they can be animated, like the globe below.
 |
 |
 |
 |
JPG or JPEG files (Joint Photographic Experts Group) are commonly used for photo-realistic pictures containing thousands or millions of colours. JPEG pictures are useful because you can control the file compression by changing the picture quality. The lower you set the quality, the higher the file compression will be, and as a result, the file size is decreased. See the examples below.
PNG (Portable Network Graphics) is a new format used as an alternative to GIF that supports transparency for pictures containing thousands or millions of colours. PNG images can also be animated.
JPEG Compression
The images below show the effect of compressing a JPEG file. Even at 40% compression there is very little noticeable degradation in the appearance of the image.
 |
 |
 |
 |
 |
No compression |
20% compression |
40% compression |
70% compression |
90% compression |
Where do they come from?
Lots of collections of GIF and JPG images are available for sale on CD ROM, but choose with care.
Many different collections actually contain the same images and they tend to have an American bias. You can also buy collections of web graphics that contain a variety of co-ordinated styles and designs.
There are many sources of free web images. Many ISP's provide libraries of images, but you run the risk of having the same images on your site as anyone else connected to the same ISP. Computer magazine cover discs often contain free web images, and of course you can create your own. Scan photographs and save them as JPG or JPEG files, or create images in a graphics package and save them as GIF files.
Co-ordinated Web Graphics
Corel Web Spice collection http://www.webspice.com
To create web graphics
Paint Shop Pro http://www.jasc.com/product.asp?pf_id=001
To create animated GIF images
Xara 3D http://www.xara.com/products/xara3d/
Alchemy Mindworks GIF Constructor Set http://www.mindworkshop.com/alchemy/gifcon.html
Ulead GIF Animator http://www.ulead.com/ga/runme.htm
Some web sites offer royalty free images
Realm Graphics http://www.ender-design.com/rg/
Shawn's Clipart & Webateria http://www.shawnsclipart.com/
Background tile sources
http://www.sfsu.edu/~jtolson/textures/textures.htm
http://www.best.com/~drzeus/Art/Textures/Textures.html
Putting Images in your Web Page
The images do not become part of the document like they do when you create a word processor document.
To put an image in your document place the cursor where you want your image and click on the Insert Picture button in your HTML editor. You can then specify the image name and details. As well as the name of the file you can specify the dimensions of the image. It is not a good idea to use this facility to make an image appear smaller or larger. Making the image appear smaller will not make it load more quickly. If you want the image to be smaller it is best to make a smaller copy of it in an image editing package, Microsoft Photo Editor (that comes with Microsoft Word) or Microsoft Picture It! would do. If you want the image to be larger it is best to use a larger version of the image.
You can also specify some alternative text. This text will appear in place of the image if the viewers' browser has disabled uploading images. It also appears whilst waiting for the image to load and in most browsers when the mouse pointer moves over the image. If the image is a hyperlink it is helpful to describe the target with the text. Hover your mouse pointer over the Internet Explorer image to the right to see the alternative text.
You can use an image as a hyperlink. To show it is a hyperlink it will have a border. This can be useful to let the viewer know the image is a link, but it may spoil the appearance of the page. See the page on Hyperlinks. There is also the option to specify the width of the border, if the image is a hyperlink make it zero ("0") if you do not want a border.
If you use the same image again anywhere in your document, you use the same original image. You don't need another copy of the image, so you save space.
Pixels
Dimensions are measured in pixels. 
This square is 14 pixels wide and 14 pixels high.