Skip to main content

"By creating we think, by living we learn" Patrick Geddes

Main University menu


Templates Top-Level Menu

Images for the web

Images are like headlines. They draw attention to your site and catch the eye of visitors, inviting them to stop in and stay a while.

We can help you to choose suitable images, but if you'd rather hunt down your own, here are some tips to help.

Preparing your images for the web

Make sure that your images are:

  1. Relevant - make sure they correspond to the message or emotion you are conveying in the text.
  2. High quality - one high quality image has more impact than several low-quality pictures.
  3. A small file size - keep the file size as small as possible.
  4. Resizing Images - resized to the dimensions that you require.
  5. Image placement - line up your images on web pages.
  6. Image format - a suitable format for the web.
  7. In RGB mode

Taking and choosing your images

Images of people

Images of buildings

Campus shots

Back to top

High Quality Images

High quality images
Always start with a high quality image and resize once only. Never enlarge a smaller image as it will deteriorate and become blurry.

File Size and Resolution

When saving images for the web, make sure that they are compressed. Photographs should be saved as JPG files, and graphics files should be saved as 24-bit PNG files. The only exception to this is very large simple graphics files, whose file size can be significantly reduced by saving as GIF files.

  1. Smaller files load faster, reduce bandwidth and usually look just as good as high-resolution images.
  2. Create your images at no more than 72 dpi (dots per inch). Higher dpi won't noticeably improve quality and it will make the image file size larger, slowing load time. Photos taken with a digital camera are often 300 dpi. Compress any digital photos before trying to use them on a web page.

Resizing Images

An example of how to resize images and how not to resize images

When resizing, make sure to constrain proportions (this is making sure the relationship between the width and height) stays constant. Failing to do this distorts an image.

Note: never resize a GIF image. First change the mode to RGB colour and then resize. You can still save your resized image as a GIF, just do not apply resizing while the image is in the GIF mode.

Back to top

Image Placement

If an imaginary grid was placed over your page, the images should line up with the lines of the grid rather than being placed randomly.

There are two types of layout, Symmetrical and Asymmetrical. Symmetrical is usually used for website design (lining up against borders etc.)

An example of a symetrical layout

This is a symmetrical layout.

An example of asymetrical image

This is an asymmetrical layout.

Back to top

Image format

There are too many image editing programs to cover here, but here are quick guides for two - Adobe Photoshop and Paint.NET (which is on the SOE).

Paint.NET (SOE) - Save as JPG : percentage - Save as PNG : no settings - Save as GIF - play around with settings until correct file size.

If you are using Adobe Photoshop, use Save For Web And Devices in the File menu. JPG files should be saved using the "JPG High" preset, PNGs should be saved using the PNG-24 preset, and GIF files should be saved using the settings that produce files which are as small as possible while not significantly compromising image quality.

Suitable formats for the web are:

Do not use:

Back to top

Colour Mode

Definition: A common colour mode, RGB, stands for the colours of Red, Green, Blue. Colours on screen are displayed by mixing varying amounts of red, green, and blue light.

In your graphics software these numbers might look like this:

255 RED 255 GREEN 0 BLUE.
A number between 1-255 designates the amount of each RGB colour.

In order for your computer to understand these numbers we translate them into 6 digit hexadecimal numbers or triplets. 255 RED 255 GREEN 0 BLUE becomes FFFF00. The first pair (FF) is the Red, The second pair (FF) is the Green, and 00 is the Blue. FF is the hexadecimal equivalent of 255 and 00 is the hexadecimal equivalent of 0.

RGB is the most common colour mode used when creating graphics, even though graphics to be commercially printed are eventually converted to cmyk mode, the colours used in printing inks.

Keep in mind that RGB refers to an on-screen colour mode.

In creating web pages, the number of RGB values that are recommended for use is considerably reduced - first, by the fact that many displays can handle only 256 colours and, secondly, because PC and Mac Web browsers handle 40 of these 256 colours slightly differently. In order to ensure that your colours will be consistent on both browsers, a palette of the 216 colours common to both PC and Web browsers is recommended. Any colour outside of these will be approximated.

Find out more about browser safe web colours.

 RGB in a colour wheel example    RGB in spectrum mode

Back to top