Images should.. Images should not..
  • Support and break up copy.
  • Illustrate a point and add interest to a page.
  • Replace text or be the only source of important information. Visually impared users will not be able to use your site if the content is in images.

Despite fast broadband speeds, images should still be lightweight. Mobile devices have slower internet speeds and charge a premium for downloads. No one likes to wait for a web page to load and images are usually the largest files on a page.

To create images for the web you need to make sure they are the are the correct height and width dimensions for how the image will be displayed on the page. These dimensions are measured in pixels. You should also ensure that the file size is not too large. This is the amount of data that makes up the file and is measured in kilobytes (kb) and megabytes (mb). Taking an image directly off a digital camera will be far too large to put on a web page.

File format

Save images as either .jpg .gif or .png format when using on the web. These are compressed formats so the file size isn't too large and are commonly accessible so users don't need special software to view them.

.jpg images need to be in the RGB colour format to display in a web browser. If you use the Save for Web option in Photoshop then your images will be RGB. The CYMK colour format is only for Print and will not display in a web browser such as Internet Explorer or Firefox.

File size

Try to keep images under 200kb each. For most supporting images or a banner a file size between 50kb - 120kb is optimal. If an image is 1mb or over then it is likely larger than the screen you are viewing it on and so there is a lot of wasted data being downloaded.

Image dimensions

  • Banners along the top of a page should be 700 x 200px.
  • Additional media url images should be 215 x 250px. The height is not so important as the width for these images. As long as the width is 215px the image will fit well with the content.

Software to edit images

Images should be resized to the correct dimensions using software such as Adobe Photoshop (available through ITS) or GIMP (free).