One of the things that makes the web informative and interesting are all the pictures you can find on it. Adding pictures to your page can really liven it up.

Getting images

There are lots of ways to get pictures to put on your site. If you have a scanner you can scan in pictures you've drawn or photos. If not, you can still get lots of great free pictures from sites on the web, se the links page for more details

GIFs and JPEGs

Most images on the web are saved as either GIFs or JPEGs.

Cartoony pictures and simple logos which don't contain many colours are best saved as GIFs. The Words - Worksheet5 - at the top of this page have actually been made into an image and were saved as a GIF file. Right click it with your mouse and choose properties to see the file name.

Photographs and drawings with lots of different shades of colour are best saved as JPEG files. JPEGs can contain millions of colours.

When you are making and saving your images think about how many colours they contain and whether they will work best as JPEGs or GIFs

Optimisation

One of the good things about JPEG and GIF files is that they let you reduce the size of your image files, (that's size in terms of memory not centimetres!), and this is good for the web, because big files take a long time to download. When you save a picture you've created, most image editing programmes will let you choose to make the file size smaller. This is called optimisation.

The only down side to optimisation is that sometimes it can spoil the quality of your picture. One thing that web designers have to get good at, is judging how small they can make an image file before it begins to look bad.

In you image editing programme, practice saving images at different levels of optimisation and see what effect this has on their quality. Practice changing the physical size, in centimetres, of the image too. You can do this by resizing the image bigger or smaller, or by trimming parts off the image. What effect does this have on the file size?

Adding images to your web page

It's easy to add images to your pages in Dreamweaver

To put pictures on your pages...
1 - Open your page in Dreamweaver, click your cursor where you want the picture or animation to go, e.g. in a table box.

2 - In the Object Palette click the first picture. The Select Image Source box appears.
If the object palette isn't visible choose it from the Window menu

3 - Make sure you are looking in your images directory, if not navigate to this directory.

4 - Find the picture you want to add and click select

Your picture or animation will be put into your web page. Press the F12 to see it as a web page

Animated GIFs

How about adding a little animated picture to your site? These are very popular but remember they can get a bit too distracting if you have lots of them moving about!

You can get loads of animated GIFs free on the web, resources will point you to some good sites.

Download your animated GIF as per the instructions on the site you are getting it from - usually just right click the image, choose save as... and give it a name. (Animated GIFs have to be saved as GIF files).
Remember to save the animation to the images directory in your web site folder.

Now just follow steps 1-4 above. That's right, adding an animated GIF is just like adding a normal picture.

Recap of Work Sheet 5

• We found out that there are many ways to get pictures for our web sites.
• We found that pictures for the web are saved as either GIFs or JPEGs and learnt the differences between the two.
• We optimised some images and saw the difference this made to their quality.
• Finally, we added images and animated GIFs to our web pages