 |
WEB DESIGN SKILLSModule Study Guide
|
Session 4
Optimising and adding images
On this page:
Images
Web pages with just text on them are all very well, but before long you will
want to add some pictures to brighten things up!
This is quite easy to do, but first you need to do a little housekeeping:
Any simple pages you have already created should be held in a folder somewhere, probably in your user area. We will refer to this folder as your root folder. To put pictures on to your pages, you must save the image files somewhere. You can put them into your root folder along with the web pages, but this can get confusing as your site grows. Common practice in the industry is to make a special folder inside your root folder called "images" (or something similar) into which you save all the image files you need.
So, to add an image to your page, first obtain a suitable image from somewhere. The most obvious place to get one is to download one from the internet, but you could use one you've made yourself in a drawing or painting program, or one from a digital camera.
NB: You can only use downloaded images here because this is an educational exercise carried out under the control of an educational institution. If you are creating a commercial site you CANNOT just use downloaded images from the internet without obtaining permission.
The image must be in an appropriate format, which for the web generally means either GIF or JPEG.
We can summarise the difference between these formats as follows:
GIF: uses a lossless compression technique, but only employs a limited palette (256 colours). Principally used for images which only have a restricted set of colours, such as clipart or logos. May have transparent backgrounds. Animated GIFs can also be produced.
JPEG (usual suffix .jpg): compression ratios can be high, but the technique used is lossy i.e. the compressed image is not as good as the original. Uses 24-bit colour, so is mainly used for photos. The compression ratio can be altered by the originator, to give high quality-low compression or low quality-high compression (or somewhere in between).
Optimising images using Photoshop
Images downloaded from the internet will already be in a suitable format, although you might need to change the size or crop them to fit your page. Other images, however, may need converting into an appropriate format as above. Using Photoshop this is relatively easy to do:
- Open the image in Photoshop. As Photoshop will open virtually any image format, this should present no problem.
- Crop the image if necessary using the crop tool.
- Scale the image to the size you want using 'Image>Image size'.
The important values here are the Pixel Dimensions; the Document Size numbers are irrelevant unless you are planning to print directly from Photoshop. Make sure the 'Constrain Proportions' box is ticked, as this will ensure that the picture does not get stretched or squeezed during the scaling process.
Note that although images can be re-sized using Dreamweaver, this is not good practice. Images should always be saved at the size you want them to appear on the page, to save space and download time. - You can see exactly what size this will be by selecting 'View>Actual Pixels'. If it's not right, undo the last transformation and try again.
- Once you've got it to the right size, go to 'File>Save for web'.
The main choice here is between GIF and JPEG formats. You can also make other adjustments, such as the amount of compression required in JPEG or the number of colours used in GIF. A preview enables you to see what the final version will look like. Use JPEG if you've got a colour photo and GIF if it's a drawn image such as a cartoon or logo. For JPEG, go for the maximum amount of compression you can get away with which still gives you an acceptable result. Click on 'Save'. - Make sure you save the image into the same folder that contains your HTML page(s), or a subfolder beneath that, such as 'images'.
Adding an image to the page using HTML
Let's assume you have saved an image called "picture05.jpg" in a folder called "images". To add this to your web page, insert the following code in the page:
<img src="images/picture05.jpg">
You might want to add some additional attributes to this line, such as:
<img src="images/picture05.jpg" alt="A tree in my
garden" hspace="10" vspace="5" align="left">
alt A text string which appears if the browser cannot display
the image for any reason. This attribute is a requirement if you want the page
to validate properly (see validation later
in the module).
hspace, vspace Defines the horizontal and vertical
space left around the image on the page, in pixels
align The image may be aligned left or right. Text placed after
the image will appear on the right if the image is left-aligned, and vice versa
(see below). If you want the image to appear on a line by itself, omit this
attribute. Notice that 'center' is not an option here.
Adding an image to the page using Dreamweaver
After positioning the cursor at the place you want the image to appear, look at the top of the screen. You should see a bar which looks like this:
(If the bar looks different to this, and the selected tab is not 'Common', click on 'Common' to select it.)
The 'tree' icon here represents 'insert image', so if you click on this you can select the image you want to use.
With the image selected, the 'Properties' box looks like this:
You can add the 'Alt' text here. You can also insert V Space and H Space values and adjust the alignment.
Getting text to flow around an image
By
default, only one line of text is allowed alongside an image. To allow text
to flow properly around an image, as you see in newspapers and magazines, set
the alignment for the image as 'left' (image on the left, text on the right)
or 'right' (image on the right, text on the left).
Exercises
- Download some images from the internet to a suitable folder and insert them into an HTML page. View the result on a browser.
- Try varying the
vspace,hspaceandalignattributes and observe the effects. Add text to the page to see what effect thealignattribute has on it. - Using a larger image, or one that you have taken or created yourself, use Photoshop to optimise the picture for use on your web page. Insert the optimised picture as above.
