Images for the web - Web Team - University of Canterbury - New Zealand

Getting started with images for online

Images are generally large and need to be reduced for the web so they are small and usable. This process is known as optimising images for the web. If you are updating or adding images on a regular basis you need to use the correct image editing software (Dreamweaver is not image editing software), understand the concepts and have the right skills.

Copyright and Privacy

It is your department's responsibility to meet all legal requirements for the content in your website. You must comply with relevant laws eg the Copyright Act 1994 and Privacy Act 1993. This includes a range of content - images, student photos and information, music, other media and written content.

Options for optimising images

  • Web Support can help with optimising images, email Please include the URL of the page you want to put the image on (this helps us know what size to resize the image).
  • Use an image editor such as Photoshop or Photoshop Elements (any version is fine).
  • Image tools within your computers operating system such as Microsoft Office Picture Manager, or other image editing software your department already has. The principles in these instructions apply to other software.
  • Mac users can use iphoto.

Steps to optimise images yourself

Step 1 - Obtain an image

Step 2 - Understanding images

Step 3 - Editing: resizing or cropping images

  • How to resize an image
    Changing the resolution and physical size of an image by resizing it. The resized image looks exactly the same, but is smaller
  • How to crop an image
    Changing the resolution and physical size of an image by cropping. The image is cropped to the size you want the final image to be, and deletes unnecessary background

Step 4 - Saving photos or images with few colours

Step 5 - Putting images on the web

  • Inserting images into your web pages using Dreamweaver

Summary: key points of preparing images for the web

A checklist of key points for preparing images for the web

Examples: file size, file types and physical size

File size and type

Examples of balancing image quality and file size, and how cropping can improve an image. The importance of using correct file types is shown.

Physical size

Recommended image sizes are shown, and suggestions for custom sizing images.