headerphoto

Home » Support » Online Help » Managing Images » Resizing and Compressing Images

Resizing and Compressing Images

Before proceeding, it will be useful to understand some basic terminology:

Resampling refers to the calculations that the image editing software performs in order to resize images. The method used is important because it has an effect on the resized image quality. Not all software gives you a choice of resampling filters; however, if you do have a choice, select the "slowest" or "best quality" resampling filter.

Pixels are the individual dots that form an image on a computer monitor. Rather than defining image dimensions in centimetres or millimetres, computers deal with pixels. For example, instead of 13 x 10 cm on a printed page, a photo might be 640 x 480 pixels on a computer display.

Aspect Ratio refers to the ratio of the image width to its height. For example, 640 pixels wide by 480 pixels high is an aspect ratio of 4 to 3 (written as "4:3"). This is a common 'landscape' format. A portrait format of the same size would be 480 / 640 = 3:4.

Resizing/Resampling Images 

Tip: Whenever preparing images for web use, always start with the original, full-size, high-quality image files and save your resized versions in a different folder (e.g. "web-photos"). It can also be handy to include the new dimensions in the file name - e.g., "100x200_SomePhoto.jpg".

There are two basic steps to follow when resizing images: 

1. Keep the aspect ratio constant
The aspect ratio should not be changed when you resize an image or else it will be distorted. I.e., 640 x 480 pixels could be resized to 320 x 240 pixels (50% reduction in size) without any distortion, because the aspect ratio remains the same (4:3). There should be an option in your image editing software to "lock aspect ratio", "constrain proportions" or "maintain aspect ratio". Once this option is enabled, you can safely resize the image by entering a new height value or a new width value. You will notice that when you enter a new height or width value, the other dimension is automatically adjusted to keep the proportions (aspect ratio) constant.

2. Choose a new image size
The appropriate image size to use will depend on the circumstances - size of content area, amount of text, number of images on the page, etc. Some typical examples are listed below, with the pixel width and file size.

Landscape Image Examples

150 pixels wide (7kb):

200 pixels wide (11kb):

250 pixels wide (17kb):

300 pixels wide (23kb):

Portrait Image Examples

150 pixels wide (6kb):

200 pixels wide (13kb):

250 pixels wide (16kb):

300 pixels wide (22kb):

Compressing images

Images should be saved with the following settings:

  • File format: JPEG for photos; GIF or PNG for other graphics (such as logos or icons)
  • "JPEG Quality" or "JPEG Compression": around 80-90%*

*You may need to experiment to find a setting that maintains reasonable image quality while also minimising the file size.

These options are normally found in the "Save As..." or "Save for web use" dialogs.

Summary

To resize and compress an image:

  1. Check the "lock aspect ratio", "constrain proportions" or "maintain aspect ratio" option.
  2. Select the "slowest" or "best quality" resample filter, if available.
  3. Enter a new value for the width in pixels.
  4. For photos, set the JPEG compression or quality setting to around 80-90%. (For other graphics, use GIF or PNG file formats.)