Resizing Images

Images need to be optimised before we put them up on the web. 

When adding an image to your content type, you can either

  1. Click the ‘Upload’ button if your image ISN’T already in the Media Library - this will load the 'UC Image Cropper ToolOR
  2. Click the ‘Select media’ button if your image IS already in the Media Library

The 'UC Image Cropper Tool' optimses and resize your image automatically, upload it to the Media Library and add it to the content type all at the same time. 

Images can also be added to T4 via the Media Library, make sure the images are optimised first before doing so, Irfanview is available to resize your images before uploading to the Media Library.

The best tool to resize images for our website is the ‘UC Image Cropper’ Tool in T4. Use this tool to resize your images, upload them to the Media Library and add them to your content type all at the same time.

When adding an image, the ‘UC Image Cropper’ Tool is available from clicking on the ‘Upload’ button.

  1. Click the ‘Upload’ button
  2. The ‘UC Image Cropper’ window will appear
  3. Click the ‘Import Image’ button, browse to and select the image you want to use from your computer. The image will load and display in the Cropper window
  4. Select the appropriate Aspect Ratio (By default, 3:2 is selected, mouse over the different aspect ratios to help you decide which to choose)
  5. Move and resize the Crop Area as needed. The Preview window on the right shows the cropped area only. The Width and Height text box shows the dimension of the cropped area. Please make sure that the Width is NOT less than 1050px
  6. Add a Name. It should provide information about the image, be relevant, short, catchy and concise. This is important as the name is also used for alt text to provide information about images to users with visual impairments, people using screen readers and those who have low-bandwidth connections
  7. Add a Description. The description element is used to store copyright and licensing information for media files
    1. Images sourced externally: for example from stock image libraries, you should check the copyright notice instructions on their website to make sure you are using the correct format, for example, © Depositphotos.com/Name or Nickname of the contributor. Page 46 of 51
    2. Internal images created by UC: On images created by staff or images created by photographers or agencies that the University has paid for use © Restricted/University of Canterbury
  8. Add Keywords. Add synonyms, for example, both sofa and couch, or boy, male child, child, childhood and kid. Make sure that you are precisely describing the picture. Adding keywords to images makes it easy to find a particular image in the future and increases search engine optimisation
  9. Select the image Location. This is where your image will be saved in the Media Library
  10. Click the ‘Upload to Media Library’ button
  11. A thumbnail of your image will be displayed beside the ‘Upload’ button
  12. Preview to make sure you are happy with the result
  13. Click ‘Save changes’ or ‘Save and Approve’ to publish

Resizing images

The easiest tool to resize images for our website is Irfanview. Follow the instructions below to resize your image without stretching or squashing.

Install Irfanview

  1. Click Start > All Programs > Software Center.
  2. Search IrfanView
  3. Select IrfanView 4.4.4
  4. Click Install

Resize the image

  1. Click Ctrl R to resize the image.
  2. The image may not be the right shape, so first resize so that either the height or width is correct, and then use cropping to remove the excess from the other dimension.
  3. Example: If the image is 5459px x 2609px and you want it to be 724px x 484px for a normal content page, try entering 724 in the Width field. This makes the height too small, so try entering 484 in the Height field. The image is now the right height, and you can crop off the extra width.

Crop the image

Place your cursor on the image, hold down the left mouse button, which will change the cursor to a + sign, and drag diagonally, downward. Keep dragging the box until the numbers in the top bar say 724 x 484.

IrfanView crop selection

Once you have your selection box sized the way you want it, click Ctrl Y to crop the image to your selection.

Save the image and upload it to the media library.