Reduction of original from digital camera

Images can be a headache for site owners. Let's take a look at what's required.

1. Size is everything

In order to load web pages quickly images need to have small files sizes. Large pictures from digital cameras can often be 2Mb or more. These are simply too large for website use. You should be aiming for images with files sizes of 50Kb and under.

You will also want your images to be of a generally consistent size, usually the same width. This gives your website a professional look.

2. Just my type

Although web browsers will display almost any kind of image, there are 3 file types suitable for images the web:
(i) JPEG (file extension .jpg). These should be used for pictures and photos (eg objects, people and scenes). Your digital camera pictures will be in this format, but probably the wrong quality and dots or pixels per inch (dpi).
(ii) GIF (file extension .gif). These should be used for images with areas of flat colour that is the same. That is no shade or change of tone (eg logos and drawings). Additionally .gif files can be animated to show movement and can have transparent background areas.
(iii) PNG (file extension .png). These have the advantages of both .jpg and .gif files as far as shade, transparency and flat areas are concerned. But .png files sizes can be larger than the equivalent .jpg or .gif and certain effects on .png files are not supported on some older web browsers (like Internet Explorer 6).

3. What we want

To keep files size small, means keeping the physical dimensions of images small too, so we will often need to select only part of an image. Then reduce the dimensions of the selected part.

.jpg images will not want to be more than 80% quality, your cameras may produce these at 99%. More than 72 dots per inch is not necessary for web use as most monitors display at 72dpi, so any higher will not improve the quality but will increase the files size.

.gif images can be optimised similarly by reducing the number of colours used.

4. How? How? How?

There are numerous programs you can either buy like Photoshop or get free like Gimp that will resize and optimise your images - and do plenty more. However, they are large and complex, take a long time to learn and a short time to forget how to use. For limited and occasional use, we recommend a free online photo sizer and optimiser like PicReSize.com or aviary.com. Here are some images showing how PicReSize allows easy selection and resizing of images uploaded from your hard drive.

Cropping photo

Set size of final image
This is a really useful and intuitive online tool, which will perform all the steps needed preparing images for website use. In a few words it lets you upload an image from your computer and then perform various task on that image to reproduce it in an optimised format as described above. It will leave the original on your hard disc untouched. The only problem is it produces ludicrously long and complicated file names, which leads us rather neatly on to:

5. What's in a name?

Adding effects to our cropped imageTo help locate your image files, logical file names are useful. They can also help improve your search engine ranking.
All images should have a relevant 'Alt' attribute: omitting this will mean the web page will not validate. 'Alt' text should be a concise and accurate description of the contents of the image.

6. Pix ready. How do I get them on the website?

We are using Joomla (a CMS= Content Management System).
First we need to upload the image(s) in 'Media Manager' (within the Administrator section). Here you will have a choice of existing folder or make a new folder (all under the 'images' folder). Where you put new images will depend on the size and potential future size of your website. As a rule it's always best to be tidy and logical. Which of course you are, so that you will know exactly where on your hard disc the image is and its file name will tell you immediately it's the correct image file.

The fianl resultOnce you have your image to the folder of your choice in Joomla's Media Manager, you will want to copy the URL to your clipboard so that it can be pasted in a web page shortly. You will see above the icons of the images in the folder the 'path' to the folder you are currently in. If you drag the image to the box to the right of the path (and left of the 'Create Folder' box, you will see the absolute URL of the image appear. Something like:
http://www.yoursite.com/images/stories/name-of-imagefile.gif
Right click and copy this to clipboard (right mouse click in Windows).

Now when we start a new page or edit an existing one (called 'Articles' in Joomla) we can use the WYSIWYG editor to insert the image(s). Don't forget the 'Alt' tag. Also you will want to consider other options such as a border round the image, horizontal and vertical distance form the text - and most important of all, whether you want the image to the right or left of the text. If this is not specified, the image will have no text round it. (See examples on this page.)