Images are an important part of your website. Used and formatted correctly, images can display your products and services, re-iterate and illustrate text on the page and enhance the design of your website.

Adding images is a three-step process; The first is to prepare the image, the second is to upload a copy of the image from your computer to your website. The third is to add the image to a page.

Preparing images for a website

You may have images already on your computer that you would like to put on your website.  If you have hard copies of images, you will need to scan them to turn them into a digital file.  Follow the tips below to do this.

Scanning tips

Everyone’s scanner has different properties, so you will need to learn how to use your scanner.  As to what size, resolution and file type to create, the best options for website content are listed below:

• Scan your image in at about 150 dpi (dots per inch), as this will allow you to edit the image later without any loss of quality.
• Make sure you are scanning in at 24 bit colour.
• Save your picture as a ‘high’ quality jpeg to give you a good quality image to work with.
• Make sure your scanner is clean and the picture you are scanning from is of good quality.  There can be problems scanning from computer printed images, as the quality tends to be poor.

Resizing and editing images

It is essential that you resize your image to the size it needs to appear on a web page before you upload it to your website.   This will ensure that your web page will download as quickly as possible for your visitor.

Most scanning or camera software packages contain simple image editing functions.

To resize a picture in your scanning or camera software:

1. Go to the Image menu or the Edit menu.  Choose a command similar to resize or resample. You might also like to crop your image to decrease its size (this means that you will delete part of the image).
2. Adjust the number of pixels or inches to adjust the size of your image.  Make sure that the image dimensions are ‘constrained’. This means that both the height and the width will be altered so that your image remains in proportion. Ensure that you are viewing your picture at 100% to get a true representation of how large your image is and how it will appear on your site.  
3. Save the image for a website (see the article Saving images for a website).

Saving images for a website

Save your images to the following specifications before uploading your image to your website:

1. Resolution:  72 dpi (dots per inch)
2. Dimensions:  The recommended maximum width for the web is 600 pixels, so that all visitors can see the image without needing to scroll across the page.  
3. File Type: Ensure that you save your image as a .jpg or .gif before you upload it to your website.  This will ensure that all visitors can view your image.

Top of page

Uploading and inserting images into a web page

Images are great ways to illustrate your services or the information that you are providing online.

After preparing and saving your images for your website, you will need to upload them and insert them onto a page using the content editor.

Insert an image

1. Go to Pages > Add/Edit Pages.
2. Click on the page that you would like to insert an image into.
   
3. In the content editor, place your cursor where you would like to insert the image.
4. Click the Insert/Edit Image button in the tool bar.
5. If your image has not yet been uploaded to your website via the Image Manager, click the Browse button to locate the image on your computer.  Select the image and then click on the green arrow to upload the image to the website. The image name will now appear in the Image Manager list.
6. Select the desired image from the Image Manager list; this will produce a full-sized preview of the image in the window on the right.  
7. Specify how you wish the image to appear on the page. You can specify:
   
   
   • Title: Enter a short name to describe your image. When a user holds their mouse over the image, a yellow box will appear with the text entered into this field. This text also helps search engines locate the image in an image search.
     
     
   • Description (also known as the ALT attribute): Enter a description of your image, it could be ten to fifteen words long and it is very important for the following reasons:  Search engines looks for keywords in image descriptions to help them index and rank your web page; Screen-readers read out the image description to assist vision-impaired visitors to access your content; Mobile phone and Internet browsers that are set to not display images will display the description text instead so that users know what the images are.
     
     
   • Alignment: If you choose to align your image to the Left or Right, the text that appears in the vicinity of the image will ‘wrap’ around the image, creating a magazine-style layout. If you leave the Alignment at Default, the image will take up the entire text line.
     
     
   • Vertical & Horizontal Spacing: Enter values to dictate how much blank space will be left around the edges of the image. This value is expressed in pixels. If this value is left at zero, text near the image will touch the edge of the image.
     
     
   • Dimension: Enter a number into either the Height or Width fields to resize the image. When you only specify one field, the other will be automatically calculated so as to avoid distorting the image.
     
     
   • Border thickness: If a number is entered into this field, a border will appear around the outside of the image. The higher the number, the thicker the border. This value is expressed in pixels. If you would like to have a border around your images, 1 pixel is the recommended border width.
8. Click OK. The image will now appear onscreen.
9. Save the page and publish the website.

Top of page

Does the content editor automatically resize images?

The content editor does not automatically resize images when it uploads them.  You are able to scale an image in the content editor when you insert it however it is not recommended to do this for more than a 10% size difference.  Visitors will need to wait for a large image to download to their browser even if it only displays on the page as a small image.

For best results resize the image in an image editing program before uploading the image to your site.

I don't have image editing software, do I need to buy some?

If you don't have your own image editing program, you can find many basic versions that will allow you to crop and scale your images for free.

Most digital cameras or scanners come with basic image editing tools and there are also many ‘freeware' versions available online. Here's a list of some that we have found to be quick and easy to use:

• Snipshot
  This is an online program where images can be edited easily. It's really user friendly and there is unlimited undo's!
  http://www.snipshot.com
  
  
• Picnik
  Another online editing program which is user friendly.
  http://www.picnik.com/
  
  
• Gimp
  This is an image editing program which is an installation on your C:\  It has quite a lot of tools and features.
  http://www.gimp.org/windows/
  
  
• Irfanview
  This image editing program requires installation on your C:\
  www.irfanview.com
  
  
• VSO Image Resizer
  http://www.vso-software.fr/products/image_resizer/

If you are thinking of buying software ‘Adobe Photoshop Elements‘ is a good quality program that is reasonably priced. See your software seller for more details.

Does the Site Builder overwrite images in the Image Manager when uploading?

The Site Builder does not overwrite images with the same name.  If you attempt to do this, you will be issued with a warning asking you to re-name your file so that you can upload the image.  If you delete the original image from the Site Builder you are able to upload another image with the same name.

Top of page