Creating Website Pictures Editing your pictures for web use
©2002 A. Duncan 
Sunset Dominican Republic Aug 1997. Image ©2002 A. Duncan
However you decide to take your pictures you will need them in a digital format to publish on the web. The key format used for photographs is .jpeg (or .jpg) on the web. Most digital cameras will save your pictures in this format. But if scanning your pics you may actually save the file in a different format (often .tiff) Most Photoediting software will be able to save (try save, save as or export option) your files in .jpeg format. Most digital cameras and scanners come with basic photo editing software. Alternatively you can often pick up free photoediting software from computer magazine cover discs or in the budget software areas in computer software shops that will be equally adequate when starting out. Also check out download sites like tucows for free versions or software company sites for time limited trial versions (adobe & Serif are good places to start). Serif at the time of writing was offering PhotoPlus 5 as a free download We'd advise you to back up your original picture files before fiddling. Lets get started ! Now .jpeg is the key format used for photographic images on the web, so could you just use your picture straight? You could but this will cause several problems. Take this web ready picture of the Isle of Barra in the Scottish Outer Hebrides 
Isle Of Barra Sept 2002 (9K)
This picture you see is only 9KB in size but the original shot was a 1600x1200 (~2 megapixel) and file size was 375k in size (i.e. would take at least 40 times as long to load. So how do we make it smaller without losing quality Well we need to consider 2 factors size & compression, but the most key concept involved is resolution. As we've said before in photo terms the resolution can be thought of the graininess of an image and limits how much you can enlarge an image In web terms however resolution the more important factor to consider is the resolution of the monitor you are viewing it on. This web page is only 600 pixels wide. If you used your original picture without controlling it's size it would occupy 2.5X the width of this page (if you want to see this click here to see a 1600X1200 image of barra - 97k in size - we used compression to make the file 3 times smaller than the actual taken pic) Now you could just use that picture and set the width and height properties so it was made smaller but note the file size 97K!!!. How did we get a similar picture for 9K 
2 images of Isle Of Barra Sept 2002 Look at the above images of the Isle of Barra. Pretty identical aren't they. Both are equally sharp & detailed. Both occupy an area of 150 x 113 pixel on your screen. The one on your left is the same 9 Kb image file as the larger image at the top of the page is. The other is only 150 x115 in size in native size but only occupies 4.8KB of space. If you want to use a picture in native Although the picture on the left has higher native resolution it is forced into the smaller area. It can only be display in the same total number of pixels (150 x 113)> this is exactly the same number of pixels as the other image half it's size. If you reverse the situation and use both images at 300x225
Isle Of Barra Sept 2002 (9K)
Isle Of Barra Sept 2002 (4.8K) enlarged
The second image becomes grainier & poorer. So the first step is reduce your image's size down to the either the size it's needed for or just above . Make sure you don't subsequently try and enlarge that web based image or it will look poor Most photo editing software will have something like an image resize option or menu to do this This is also why even the most basic digital cameras (640x480 or less) will produce adequate web images. You might also want to use the crop & rotate tools if your photo was off centre, squint or your subject appears too far away. For example say we want a tighter shot the hills
Isle Of Barra Sept 2002 (9K)
We cropped our original picture first and the resized the image to 300 pixels wide 
Isle Of Barra Sept 2002 (9K)
Look for crop tools or menu options Now resizing and cropping an image is one way of reducing graphic files but there is another important piece of technology with .jpeg files called compression. Take this pic of a Caribbean sunset. It was made from a 20 megapixel scan of a 7x5 picture!!. The original image was huge in both in pixel and file size. Cutting it down to a 300x204 image reduced this further a 48K size but that was still too high. We used compression to get this 18K file
Sunset Dominican Republic Aug 1997. Image ©2002 A. Duncan
You can compress it further 
Sunset Dominican Republic Aug 1997. Image ©2002 A. Duncan
It has lost only slight detail but is now a mere 8 Kb in size. Compression allows you to make files smaller. When .jpeg files were developed, they were designed to undergo complex mathematical compression to reduce image size with only minimal effect on the image quality. Usually you'll be given a compression option often at the time of saving your file. Find out how to do it on your machine but be careful you don't do it too much!! 
Sunset Dominican Republic Aug 1997. Image ©2002 A. Duncan
Once you get the hang of your software you can do fun things with your editing software like this 
Sunset Dominican Republic Aug 1997. Image ©2002 A. Duncan
Make sure you save your image into to your webspace folder. PAGE 2 |  |  | PAGE 4 |
(Disclaimer- we don't recommend, endorse or take any responsibility for the downloading, installation or running or use of any software or hardware or other products referred to on this site and any subsequent damage or problems that the program or item may cause. Nor do we take responsibility for the accuracy of information on this site. You should always read the manufacturers instructions, warranties and disclaimers and our legal notices) | 
