Resizing and cropping images

Images should always be optimized before being included in a web page. This means:

  • Cropping the image to show only relevant areas
  • Resizing the original image to the size you wish to display it on your page
  • Ensuring the image is saved in an appropriate file format

Standard sizes

Right hand column

Right column image example

Images for the right hand column area need to be 218 pixels wide.

There is no height restriction.

Middle column, full width (CMS only)

Middle column image example

Full width images for the middle column need to be 505 pixels wide.

The height should be between 150 and 200 pixels.

Full width (CMS only)

Full width image example

Full width images need to be 720 pixels wide.

The height should be between 175 and 225 pixels.

Image optimization tools

You could use an application installed on your computer, such as Photoshop or PaintShop Pro, to edit images. However, these applications have lots of additional capabilities which make them complex and in many cases expensive.

For basic image editing, there are online tools which are quicker and easier to use than desktop alternatives. One option is Picnik, which the rest of this page describes.

Using Picnik

Available for free at picnik.com, Picnik makes image processing easy. It's so simple that a tutorial isn't really necessary, but the key steps are described below.

  1. Upload your image


    The 'file upload' button on the Picnik main screen

    Once you know which image you want to use and have a copy saved on your computer (not in your web account yet, just somewhere you can find it), go to picnik.com, press the Get started! button to load the main application and upload an image using the button on the main screen.

  2. Cropping



    Using the Picnik cropping box to select a region of an image to crop to

    As soon as you choose your image, it will automatically open and be ready for editing.

    If your image contains only one thing of interest but with lots of surrounding distractions, you can crop it so that only the interesting bit remains.

    Press the Crop button to highlight a portion of your image to be kept. You can drag this box around your image and resize it so that only the portion of the image that you wish to keep is highlighted.

    Once you have chosen the area of your image to keep, either double-click the highlighted region or press the 'OK' button on the crop toolbar and the rest of the image will disappear.

  3. Saving and resizing



    Saving and resizing a photo in a single step with Picnik

    You can resize and save your image in a single step using Picnik. Click the Save and share tab at the top of the application to show the options you need.

    Enter the width you need and Picnik will automatically adujst the height to keep the proportions of the image correct (you can disable this by clicking the green chainlink button between the height and width boxes, but you probably won't ever want to).

    Leave all the other options as they are and press Save photo. A dialog box will display asking you what to do with the file. What this box looks like depends on your type of computer and which web browser you use, but make sure you save the image to a location where you will be able to find it again!

Things to remember

  • You can always undo your actions - just press the Undo button.
  • Be careful not to browse to another web page in the middle of editing an image - your changes could be lost.

Who to contact

Paul Kelly, Web Content and Design Officer
01904 324578
paul.kelly@york.ac.uk