Basics: preparing images for the web

Glossary

Welcome

Preparing images for the web isn't rocket science but nor is it an innate skill. This website includes and information, explanations and checklists to help you prepare images for the web.

Work through printable worksheets for Photoshop and/or Pixlr (free online software). Develop your critical eye when framing and assessing your image.

There's often more than one way to achieve your goal in photo manipulation, so please feel free to make suggestions in the comments boxes at the bottom of the pages... and do tell us about anything that isn't clear.

Graphics for the web checklist

1. Choose an image

Is the image large enough to work with? (Never enlarge an image beyond its original size)
Are there issues with copyright?
What size(s) - i.e. height and width - of image do you need? (Width usually takes priority.)

2. Before you start work

Make a copy of the original image.
Check the resolution is set to 72 ppi (pixels/inch) and change if necessary

3. Working with the image

Is the image framed correctly? If not, then crop.
Use layers (Layer < new) if you work with image adjustments (Image < Adjustment) like levels (not covered in this workshop). This allows you to work non-destructively.

4. Saving

Are you using the right file format/compression?
Have you got a clearly recognisable name for the file?

NOTE: You should also be aware of the University of Auckland's Web Style Guide

Contact details

Liz Ramsay: e.ramsay@auckland.ac.nz

Tony Chung: ar.chung@auckland.ac.nz

Edit page