Resizing and Compressing images for the web
Resizing and Compressing images for the web
Optimising images for the web is a balance of filesize and picture quality that it optimal to reduce downloading times for a user friendly experience. The size of an image can refer to its dimensions in pixels e.g. 550 px width X 300 px height or it's file size e.g. 500 Kb or 5 Mb.
The following tutorials are for Photoshop which is available in the Run Advertised programs in your control panel.
Please note that images should only be added if they are directly related to the text they support. Landscape images should be no wider than 485px to correctly display in the body copy. If text is to be wrapped around the image, the recommended width for landscape is 250px and portrait is 120px.
Tips: Crop out dead space from images and dont publish images with poor lighting.
- Cropping an image in Photoshop
- Resizing an image in Photoshop
- Compressing/Optimising for Web in Photoshop
Photoshop
To crop an image
1. File > open > choose your image file
2. Select the crop tool 
from your tool palette. (If you cannot find the crop tool, Select Window > Tools, and your tool palette will appear)
3. Click to begin your selection and drag across the area you wish to crop. You can then move the selection into position and adjust the dimensions by pulling on the outer squares of the highlighted frame.
4. Double click on the area inside the box
5. You can now resize the image and optimise the image for web before saving. 
Figure 1. The crop tool
To resize an image
1. File > open > select your image
2. Image > Image Resize
The Image Size dialogue box will open – the Pixel Dimensions is the one you want to use, note that you may need to set the drop down menu on the right side to pixels rather than percent. Make sure that the check boxes below: Scale Styles, Constrain Proportions and Resample Image, are all checked.
3. Select the required width and the height will update to reflect the aspect ratio. (Check sizes explained in the introduction)
4. Select OK
5. If the image has been cropped and resized as necessary, you can optimise the image for web.
Figure 2. The resize dialogue box
To compress/optimise an image
These instructions are for photo images which need to be compressed and saved as Jpeg or gif format. Jpeg is a format developed for images with many smooth gradations of tone and colour and is therefore suitable for photographic images. GIF format is suitable for images with a small palette of colours or for flat colour images and text.
1. File open > to open your image file
2. Crop and Resize your images to the appropriate size
3. File > Save for Web & Devices
4. For photographic images select JPEG format. Reduce the quality slider as low as possible without pixelating the image or reducing essential detail. (Maximum 40Kb)
5. The file size will be displayed in the bottom left and will also show you the download times, over a variety of internet speeds. The aim is reduce this as much as possible to ensure that content is easily accessible for audiences across all ranges of internet access.
6. Select Save
Figure 3. Save for Web & Devices
