print friendly version

How to...

Producing images for the web (Photoshop Elements)

Images scanned for the web (or indeed for sending via email) are very different from those scanned for printing. Firstly they need to be smaller - not just in height and width but also in file size. Secondly they will need to be saved as one of two or three specific formats, depending upon their content.

Download speed

Remember that not everyone will be viewing your page with a direct connection to the internet such that the University enjoys - many of your visitors will be using a 56k or slower modem. People surfing the web have a very short attention span and sometimes if a page isn't loaded within 10 seconds, they will go elsewhere.

The simplest way around this would seem to be to remove as many graphics as possible from your page - however people surfing the web also have certain expectations of what websites should be like, and if a page looks dull or text-heavy they might also try somewhere else. The trick therefore is to produce graphics files that are small but effective.

No graphics - fast download : Heavy graphics - slow download

[a href="#top">back to top]

Scanning the image

For instructions on scanning using one of the IT Services scanning PCs in Engineering 1 or Pevensey, please see the IT Services Guide Scanning on an IT Services PC.

[a href="#top">back to top]

Editing the image


marquee tool

The first question to ask yourself is whether you actually need all of the scanned image displayed on your webpage. Cropping away any un-needed parts is a useful first step towards reducing file size. To crop an image select the marquee tool (right) then click and drag on the image to select that part of the image you want to retain:

image with area selected
image cropped

Once satisifed with the area you have selected, from the Image menu select Crop. The area of the image will be reduced to the area of your selection (right):


Another way to reduce the file size is to use Photoshop Elements's resize option. From the Image menu select Image Size.... The following window will be displayed:

Image Size Window

Ensuring that the Constrain Proportions option is checked (otherwise your image will be distorted) simply enter the desired Width (or Height) of the image into the appropriate box. The corresponding Height (or Width) will be adjusted automatically. Click on OK to apply the resize.

[a href="#top">back to top]

Saving the image

Once you have edited the image to your satisfaction, you will then need to decide which image format to save it in. Which format you choose depends upon the content of the image.

GIF Format

GIF (Graphics Interchange Format) is an "8 Bit" graphics format. It uses 256 colours, supports both transparency and animation. GIF files also compress "losslessly" - in that they can take up a small amount of storage space without losing any information.

typical GIF

You should use GIF format when images contain:

  • a limited amount of colours
  • large areas of flat colour
  • intricate detail you don't want to lose
  • transparency

GIF files on the web generally tend to be logos or images of text and shapes.

JP(e)G Format

typical JPG

JP(e)G (Joint Photographics Experts Group) format is a "24 Bit" graphics format. It can use 16 million colours, and uses "lossy" compression - this means that the files can be compressed to take up a considerably smaller amount of disk space, but that information is discarded during this process.

JP(e)G does not support transparency or animation.

You should use JP(e)G format for:

  • photographic images
  • continuous tone images
  • images with a large amount of colours

A third image format, PNG (Portable Network Graphics), also exists although it is not yet in widespread use. Developed by the WWW Consortium it is patent free (unlike GIF). Most version 4+ browsers can display PNG (although sometimes inadequately). Like GIF, PNG supports lossless compression and transparency. However, PNG can be saved in 8 and 24-bit versions, allowing GIF-like and JPG-like colour ranges.

Once you have decided in which format to save your image, from the File menu in Photoshop Elements select the option Save for Web... . The following window will then be displayed:

Save for web window

The right hand pane of the window contains the controls for setting the various file format/optimisation options, allowing you to select firstly the file format and then a range of settings for that format:

file format settings jpeg settings

The centre pane contains a preview of the image optimised using the current settings, and the left hand pane the original image. Beneath the preview image are estimates of file size and download speed using the current settings:

file size and download speed

Experimentation with the various settings will allow you to reach an acceptable balance between low file size and satisfactory image quality. Once you are happy with both, click the OK button. You will then be prompted for a file name and location as in any normal Save as... dialog.

[a href="#top">back to top]

Lossless compression

Something for nothing?

At first the idea of being able to compress an image file without losing any information seems too good to be true. However, with a limited colour palette such as that used by GIF format, it can be quite straightforward.

Consider how information in an image file is stored; each pixel has to have not only its colour described but also its position. For example, a sequence of five pixels might be described thus:


However, it would be possible to describe this sequence using less information:

for how many pixels?

This is a very basic description of how lossless compression works (there are other algorithms used to detect repeating patterns and other features of the image which might save space). It can be worked out from this, that images with horizontal stripes compress further than those with vertical stripes. Apart from their orientation, the following GIF images are identical. However, the one with the horizontal stripes is less than half the file size of the one with vertical stripes:

horizontal stripes vertical stripes
216 bytes 473 bytes

[a href="#top">back to top]

created on 2010-01-01 by Chris Limb
last updated on 2010-06-30 by Claire Wallace