Working with Images

Use the Jump Links in the top table to move about in this document

How to prepare an image

Layout of your image

Changing an image

Using an image as a background

How to prepare an image
The idea is to make browsing fast for your customers To do this you want small image files for loading. Large ones take a long time, causing delays for non-broadband users. Many customers will give up on your site if they experience large delays. To prepare an image/picture you need some graphics software that has the ability to resize an image. Thumbnail images should be between 1 and 15kB, while full size images should be around the 20 to 50kB size Re-size your image in your graphics software until it is exactly the size you want it to be seen by your customers. THE SECRET to doing this is to make sure your are viewing it at 100% zoom. Save your image as a gif or jpeg file.

How to prepare an image

The idea is to make browsing fast for your customers
To do this you want small image files for loading. Large ones take a long time, causing delays for non-broadband users.
Many customers will give up on your site if they experience large delays.
To prepare an image/picture you need some graphics software that has the ability to resize an image.
Thumbnail images should be between 1 and 15kB, while full size images should be around the 20 to 50kB size
Re-size your image in your graphics software until it is exactly the size you want it to be seen by your customers. THE SECRET to doing this is to make sure your are viewing it at 100% zoom.
Save your image as a gif or jpeg file.

Layout of your image
When putting an image on a page it is highly recommended that you specify its Width and Height in your code. This gives a smoother page-loading for your customer by creating space for your images on the page before they are fully loaded- this gives a less jumpy look. You need to find what the width and height of your image is. In Windows XP just hold you pointer over the file name in the images folder and the information should pop up for you. Alternatively find a Viewer Software program or Graphics program that tells you. Scroll to the bottom of this page.The code to place our advert image down there is as follows:
img src="images/rosewebrainbowpbsmall.gif" width="163" height="88"
If you do a View Source action on this page and go to the bottom of the code you will see how it looks with its command brackets around it. We have also surrounded our code with a paragraph command.

Change an existing image

There are two possibilities.

replace the existing image with another with the same name as the original
replace it with another with a different name

The Steps to take for each case

1. Same Name:	Upload the replacement image into the "images" folder on your host server. Adjust the width and height values in your page's code (see below). Remember: To access your code - Right-Click, View Source
2. New Name:	Upload the replacement image into the "images" folder on your host server. Delete the old image while you are there if not required in the future. change the name in your code to the new name Remember to use the correct file extension .jpg .gif ?? Adjust the width and height values in your page's code (see below). Remember: To access your code - Right-Click, View Source

LOOK FOR THIS CODE
img src="images/oldname.gif" width="oldWidth" height="oldHeight"

NEW CODE
img src="images/newname.gif" width="newWidth" height="newHeight"

Using an image as a background

You can learn how to do this in the Style Sheet (CSS) section

Home(RoseAlma Craft Centre) * Home(RoseWeb services) * Back to Work Area * Tutorial Index