Preparing Images

Due to the limitations of bandwidth on the internet, especially when using mobile networks, it's important to ensure images are prepared effectively. For this reason, we recommend you resize images for you website to their correct size to ensure they look sharp and to keep file sizes down.

Images on the web are measured in pixels and are represented with a ‘px’. Sizes are given to you with a number of pixels wide by a number of pixels high like this: 219px x 120px (width x height).

To prepare your images you will need some image editing software. We suggest a free online application called Pixlr Editor. It will help you to crop your images down to their correct pixel size. We have put together a few instructions to help you find your way around the program easily.

Using Pixlr Editor

To start using Pixlr Editor go to http://pixlr.com/editor in your web browser.

Step 1: Open Your Image

Pixlr: Open Image from Computer

When you load the Pixlr editor in your browser, you are presented with a window to open a new image. Choose to Open Image from Computer. This will allow you to select a file on your computer to resize.

Step 2: Determine the Image's Size

It is important that we only shrink an image as increasing the size will result in a poor quality, pixelated or blurred image. To make sure we don't accidentally make the image larger than the original, we need to check the image's dimensions.

Once the image is open, use the menu at the top of the screen to go to: Image > Image Size.

This will open a window displaying your image's size in pixels. Check the values and make sure both the width and the height are greater than the size you are planning to output to.

Pixlr: Image Size Panel

Step 3: Modify Your Image

Resizing Your Image

Check with your Web Designer for the best size to use for your images, then enter that size into the Image Size window.

Ensure the Constrain Proportions box is checked to keep your image in the correct scale. If you don't your image may appear squashed or stretched.

Click OK once you've decided on a new size for your image. You're now ready to Save the image.

Crop Your Image

Sometimes you may want to use just part of an image, rather than resize the whole thing. This is when you should use the crop tool.

Once you've opened your image, select the Crop Tool () from the menu on the left.

Click and drag your mouse pointer over the area you would like to include in your image. A white grid outline will appear over your image.

Pixlr: Cropping an Image

You can adjust the area included in your crop by dragging the blue squares on the corners of the grid.

To move the area included in your cropped image, click anywhere on the grid and drag it to a new location.

Once you're happy with the area included in the crop, press Enter to crop the image. You're now ready to Save the image.

Step 4: Save the Image

Once you're happy with the image size, click on File > Save.

Make sure you give the file a new name so as not to overwrite your original. You might need it later to create a different sized image.