How to manipulate images for the web

Using Microsoft FrontPage and Microsoft Photo Editor

(Note for County Council staff: MS Photo Editor is only available to staff with access to Microsoft FrontPage.)

How to insert an image  | Alternative text and referencing for images  |  Creating a thumbnail image  |  Resizing images  |  Optimising for the web  |  Cropping an image

Inserting an image

From the toolbar select Insert then from the drop down menu select Picture from next menu select From File and browse for the image you want to include. Click on the file name and select the OK button this will insert the image onto the page.

pumpkins and squash vegetables in baskets at market

If an image is too big it takes too long to download into a page.  There are a number of options open to reducing image files for the web.  Hantsweb guidelines for image sizes are that total images on a single web page should not exceed 30KB (excluding Hantsweb corporate images such as logos and navigational icons.) 

Alternative text and referencing images

All images used on the web must be referenced correctly and given alternative text.  

Place you cursor over the image and right click.  From the menu select Picture Properties.  

Under Alternative representations type in the Text field you alternative text for your image.  Alternative text for images is one of the Corporate Web Standards.  All images must have alt text, those images which add no information value to page such as bullets (Hampshire Rose or navigational icons) can be given space in the alternative text " " signifying that it is an image but that there is no relevant information attached to this image.  This does not mean not filling in the Alternative text option in Picture Properties - you must go into the Picture Properties and add a space into the alternative text field.

Please ensure that any image used on the internet has the owner's permission and is referenced correctly. Copyright should be indicated either in the alternative text or on the web page.

Creating a thumbnail image 

For information, this thumbnail procedure will not work if you are publishing your webpages using Transit Central

A thumbnail is a small version of your image which can be linked to the original larger image. It is recommended that you inform viewers of the file size of the larger image giving a choice as to whether it be downloaded or not.

On the image toolbar click on the Auto Thumbnail button

The image will automatically resize to thumbnail size this is usually 100 pixels wide. small image of pumpkins in a basket A full size image can be viewed here 40KB.

Resize an Image using Microsoft Photo Editor

Place you cursor over the image and double click this will open Photo Editor in a new window.  Microsoft Photo Editor is an image manipulation software that comes with FrontPage.  On the Photo Editor toolbar select Image then from the menu select Resize 

Image demonstrating re-sizing process Text instruction of how to resize an image
To resize an image so that image stays in proportion do not put any ticks in Allow distortion or Smooth.

You can resize the image in cm, inches or pixels (100 pixels is approximately 1 inch or 2.5cm) just fill in the information in the width and height field. 

When you are happy with the size of your image from the toolbar select File from the drop down menu select Save As.

Give you image a meaningful name in lower case with no spaces or punctuation.  Save as either a jpeg (.jpg - good for photographs) or gif (.gif - good for logos and simple images).

Optimising image file sizes

Certain images can take more compression than others depending on the complexity of the image.  

When saving an image in Photo Editor select the button named More >> 

Save as

This will open another window as shown below.

You have the choice to Convert to: True Color [24 bit] or Grey Scale 8 bit (black and white only).  

For jpegs only use the sliding scale at the bottom of the window to choose between quality and file size.  You may need to experiment a few times in order strike a good balance.  If a photograph file has been compressed too much it will appear broken up and very flat.  

Cropping Images

You might consider cropping images so that you resize the image by taking out any extraneous background.  You should do this in Photo Editor.

Place your cursor over the image and double click to start Photo Editor.  In the toolbar select the Select command - this is represented by a box with broken lines.

Place you cursor over the image and with the left button on your mouse depressed constantly drag across the area you want to keep.  When you are happy with the area release the left button of the mouse.  A box with a dotted line will appear, you can adjust your area by dragging the corners of the box if you need to.

Right click within the dotted lines and from the pop up window select crop.  Your image will now appear cropped if you have made a mistake you can undo your work by select the undo option from the toolbar.

Now save your image - you will now have to reinsert your image on to the page.

cropped version of pumpkins and other squash vegetables for sale at the market.

 

Top of this page  |  How to guide home page  |  Corporate web standards home page  |  Hantsweb home page