Schools Website Service user guide

3 Pictures and images

Internet browsers only generally understand three of them: jpg; gif; and png.

These are ideal for the Internet as they are compressed, which makes them smaller, so they download more quickly.

Choosing the correct type for the job

For photos - use jpg

There are different levels of compression when saving a jpg file.

Higher compression gives you a smaller file, but the picture loses quality.

Lower compression gives you better quality pictures, but at the expense of a larger file size.

In some image-editing software you can preview what the picture will look like at different compression settings before you save it.

If you have this facility, to get the best results with the smallest file sizes, increase the compression until just before the loss of quality in the picture becomes unacceptable.

For pictures with large areas of the same colour - use gif or png

For example, for pictures such as buttons, logos and cartoons you should use gif or png. The site logomust be a .gif file.

Gif files are limited to a maximum of 256 colours.

Both gif and png have the ability to set a colour to be transparent, but Internet Explorer 6 and earlier do not support alpha (32 bit) transparency in PNG files and will show a block of colour rather than a transparent background.

Refer to your image-editing software help for more details on how to use this facility.

In some image-editing software you can preview what the picture will look like with different numbers of colours before you save it.

If you have this facility, to get the best results with the smallest file sizes, decrease the number of colours until just before the loss of quality in the picture becomes unacceptable.

Please do not use .wmf files or .bmp files.

Resizing images

If you upload a large image to use on the website, but decide that you want to use a smaller version you should use the graphics wizard to resize it.

If you just use the original file but shrink it in the text wizard the web browser will still have to download the large image to display the small version of it.

If you resize the image in the graphics wizard the web browser only has to download a much smaller file and your website will be much quicker.

The maximum width image that you can upload is 600 pixels. This is to prevent the image from jumping to the bottom of the page on smaller screens and to reduce download times for large images.

Resizing tool

We have written an image resizing tool in response to common issues that users have had with uploading images of a suitable size to their websites. This should also help people struggling to add their school logos.

At the moment, it is only available internally to the HCC network at http://eddie.hants.gov.uk/sws/imageresizer/.

When you download the resized image, remember to rename it to something sensible – this will help you in the future if you need to reuse the same picture, or need to remove it for some reason.

Download times

To give you a rough idea of how slowly images download the following table shows approximate times for different size images being downloaded over a 56Kbps modem:

Image size Time to download on a 56Kbps modem

1KB <1 second

5KB 1 second

10KB 3 seconds

50KB 13 seconds

100KB 25 seconds

500KB 2 minutes

If you have 10 photos, at 50KB each (about average for a medium-sized image on a website), your page will take over 2 minutes to load for someone at home using a dial-up modem to access your site.

Upload limit

Please note - there is a 3mb file upload limit on SWS. The system will automatically block any images that are over 3mb. Therefore images that are over this limit will need to be reduced in size before they are uploaded.

Uploading new pictures

Position the cursor at the point in the text where you want to insert a picture.

Click on the ‘Insert picture’ button (to the right of the 'anchor' button on the text wizard toolbar to display the Picture popup box.

As you haven’t used the picture before, just click the ‘New’ button in the Picture popup..

You will be prompted to browse to the picture file you want to use.

Use only image files with a file extension of jpg, jpeg, gif, or png.

Click on the ‘Open’ button and the image is uploaded to your website.

If you are on a dial-up connection this may take a couple of minutes depending on the size of the image.

Once the image is uploaded you are asked to fill in some properties:

Name – pre-filled with the filename of the image you uploaded.

This may need to be changed if an image with that name already exists in the database.

Alt text –brief textual description.

Willl be used for browsers that don’t display images.

This will be saved with the image and used again if the image is reused.

Group – leave as default setting nnnn-schoolname, where nnnn is the school’s DfES number

If you change the group you may not be able to use the image.

Subtype – leave as ‘Any’.

Click ‘OK’. The picture now appears in the text wizard.

Reusing pictures

Position the cursor at the point in the text where you want to insert a picture.

Click on the ‘Insert picture’ button (to the right of the 'anchor' button) on the text wizard toolbar.

As you have already uploaded the picture,

enter the name of the image in the ‘Search text’ box

and click the ‘Search’ button.

A list of matches appears in the ‘Content’ box.

Click on the image you would like to use and click ‘OK’.

The picture now appears in the text wizard.

Best practice

Even though schools are free to create their websites in any manner they choose, there are established best-practice guidelines that will help your site load more quickly and be accessible

Relevant use of graphics:

The use of graphics should be kept to a minimum.

Avoid the use of pointless graphics that provide no relevance to the information.

Using graphics for page or section headings is bad practice and should be avoided.

Animated graphics can be distracting and can take a long time to download.

Alternative text

You must always use alternative text to briefly describe images, making it sensible and descriptive. This enables visitors with visual impairment visiting the web using a screen reader to make sense of the information.

Images as links should also be provided with a text alternative - images should never be the sole means of linking/navigation.

Graphs and charts can be produced in graphic format but this information should also be provided in text.

Avoid using an image to display text. Use of a graphic containing text may be appropriate where you're reproducing a logo - such as the school's official logo - but remember to spell the name out in the alternative text.

Size

Large graphics will cause pages to download very slowly. As a guideline try to keep the Total size of all graphics within a single web page to below 120KB. This does not include the logos that appear on all pages, as these will be cached by the browser.

If you have to use a large graphic (over 30KB) then ideally you should link to it from your web page using a reduced version known as a thumbnail.

Data protection

Under the Data Protection Act (which all schools must comply with, or risk significant fines to the school and individual members of staff) you will need to obtain explicit written consent from any (living) person who can be recognised in any photograph you use on the website. The school should retain a copy of the form. The consent normally only lasts two years.

Further details are available at http://www.hants.gov.uk/TC/cg/photoschools.html