Tips & Links

optimising your images further

Here are a two techniques you could use to edit your photos in preparation for online presentation, followed by some great tools to take your optimisation even further.

full colour vs black & white

One contributing factor to the weight of your image full is the amount of colour within. A full colour image will always be heavier than a desaturated version with limited colour.

In our example here, looking at the original file, the full-colour version is quite heavy at over 7MB. Editing the image as black & white version—even when keeping the original, large size—the result shows a dramatic difference in file size.

This is a great technique – you could experiment with full or only partial desaturation. Before editing your images however, consider whether the resulting image in its desaturated form will fit your context. Black & white photos can be very effective but will convey a different image compared to the full colour version.

Limiting colours, or using mono/duotone treatments will reduce the file size but it is essential not to alter the original intent and meaning of the image in its final context. Sepia images, for example, can add a sentimental feel, often speaking of time gone by which might not fit when presented as part of the full content.

focus & blur

Another contributing factor to heavy file sizes is the detail and focus shown within the image itself. A close-up photograph which fills the image with lots of detail, colour and shading will be quite heavy and apart from scaling down its dimensions, it can likely not be edited much.

When the image is edited to use depth of field¹, for example, blurs are added, reducing the amount of detail. This is an established and very effective technique which is primarily used for art direction purposes, and has the added advantage of reducing the file size, too.

Again, this is another technique which can alter the original image’s expression and can only be used when fitting. It is typically used for product shots, to focus on detail for promotional reasons. Depth of focus can be done during the taking of the photo, or applied afterwards in an image editor.

Not all images will benefit from the application of blur – but it can be worth experimenting a little, to edit the image which might increase its message. Returning to the first sample image – have a look at the difference between the full sharp image, and the version with blurred outer areas.

The blur now puts a stronger focus on the figure and railway and might work well. Of course, it might not be fitting its intended context at all and can therefore not be used for the sake of saving file weight alone.

optimisation tools

Once you are happy with your edited image – save the file for the web in the appropriate format². As final step in your image optimisation – there are a few tools which will compress your files further and reduce file weight without loss of quality.

JPGmini (PC/MAC/online)

JPEGmini is a patent-pending photo recompression technology — available as stand-alone application (for both PC and Mac) and online service. It significantly reduces the size of photographs without affecting their perceptual quality.

RIOT (PC)

Radical Image Optimization Tool (RIOT for short) is a free image optimizer that will let you to visually adjust compression parameters while keeping minimum filesize. Save and optimize JPEG, GIF and PNG.

imageOptim (MAC)

ImageOptim optimises images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

ImageAlpha (MAC)

Save 24-bit PNG with alpha transparency and as 8-bit PNG also with full alpha transparency – no matte colour settings required.

1. photographic technique which uses distance to focus on subject
2. see ‘preparing images for the web’ for further info