Adding Images to Your Website

1. Always reduce the size of your images

You will occasionally come across websites where images seem to take ages to upload - you may notice that "venetian blind" or "stutter" effect where the images appear to load slat by slat, instead of appearing instantly. If you were to download a sample image to check its size, you would discover that it's something like 2 or 3MB in size, which is no doubt its original size as downloaded from a camera or phone without being processed. That's huge in terms of bandwidth used and the time it takes to upload to the site. Another image may be "only" 600KB or so, but that's still quite hefty in terms of website requirements.

So, in order to avoid (a) using up far too much bandwidth; and (b) forcing your website visitors to wait for photos to load, images need to be resized. This is all the more important if you have an ecommerce website to sell goods online - website visitors are so used to instant gratification that, when images take too long to upload, they'll simply go and look for a faster website! However, it's still important for other sites in terms of Google optimisation / ranking and visitor satisfaction.

On an Apple Mac, images open up in "Preview" where there's an inbuilt tool for resizing images. A similar tool exists in Windows Live Photo Gallery. Images can be batch-processed, so it's not a question of "having to waste time" processing them one by one. Depending on the quality of the original photo, you can reduce all photos to one or other of the built-in choices, either the smallest (320 x 240 pixels) or the next option (640 x 480 pixels). We generally like them to be around the 100KB mark, give or take a few KB.

They will still show up brilliantly on a computer screen, although they wouldn't be good enough quality for printing in a leaflet or newspaper, for example. However, the best thing to do - again, using the tools provided with your computer - is to duplicate all your images first, store the originals in a folder on your computer in case they're required for other such purposes in the future and work only with the duplicates. You can then batch or individually resize them.

The other benefit to this is that, if anyone tries to download your images, they will need to contact you for hi-res ones - this allows you to filter out any potential poachers!

2. Name your images
This helps with Google optimisation - and, thus, the ranking - of your website. Rather than have an image named, for example, "img_1234.jpg", give photos brief but recognisable names and make them relevant to the content and to your website. If you have several photos from the same event or series, batch-rename them, leave a space after the title if it ends in a number as most renaming programmes will use a 1, 2, 3,.... renaming system and it is done automatically. An example would be, "ECDL Training Session at the IT Centre Anytown 1"; "ECDL Training Session at the IT Centre Anytown 2"; etc.

3. Alt tags
Once you've uploaded your images to the control panel of your website and start placing them, you must use the Alt Tag function. Hover over an image in Websitebuilder and left-click which opens up a menu on the left-hand side. There are various options where, for example, you can centre each image in its column, or link it to another page. However, a very important option here is "Alt attribute" which has a dual function. The main one is to provide text for poorly sighted or blind people who visit your site and use a computer reader to "describe" the image to them. If you have correctly added an alt tag, the computer will read out to them your description of each particular image - say, "An apple tree in flower in the Joe Bloggs' garden centre", or "Three happy clients in the XYZ hairdressing salon Anytown". Try to make this relatively short and sweet, but descriptive.

The other purpose of alt tags is to act as keywords for Search Engine Optimisation. You should use tags that include your business name, its acronym where applicable, place names and important words that relate to your business, its location and so on that will help people find the website.