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 impaired users will not be able to use your site if the content is in images.

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

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.

You should also ensure that the file size is not too large. This is the amount of data that makes up the file is measured in kilobytes (kb) or megabytes (mb), 1000kb = 1mb. Taking an image directly off a digital camera will be far too large to put on a web page.

The Image Browser has a maximum upload limit of 18MB per image, despite this we recommend your images be kept under 300kb each, where possible.

Image dimensions

To create images for the web you need to make sure they are the are the optimal height and width dimensions for how the image will be displayed on the page. These dimensions are measured in pixels.

There are image styles designed for different purposes in a website. Commonly, the biggest use would be a Tall Banner on the home page. If you intend to upload an image for Tall Banners, it should be at least the width AND height for Tall Banner; 1140px wide AND 439px high.

If you are uploading images that you know will only be used as thumbnails, the appropriate thumbnail size is 120px by 120px.

For a list of all the available image sizes, see Image Styles.

If you upload an images that is too small, and apply an image style that is bigger than the original uploaded image, the image will be stretched and may have a poor grainy appearance. It is far better that the original is big enough for the software to scale it down.

Software to edit images

You can prepare your images to have the appropriate file size and dimension by using software such as Adobe Photoshop (available through ITS) or GIMP (free).

In Adobe Photoshop

There is a video tutorial by Adobe on Save for Web

The typical settings you would need to change are:

  • File type (GIF, JPG, PNG)
  • Quality (as low as you go before it begins to appear grainy)
  • Image size