Good Image Processing (pt.3) Quality Optimisation.

Next Post

In this third part of my series on good image processing practices I delve into the world of Quality Optimisation and file formats that help you minimise your file sizes without loss of visual impact.

Quality Optimisation

When you save an image for web you can intelligently use the quality setting to get the file size down. The quality setting intelligently uses image compression to reduce the weight of the image by reducing the amount of information the saved image will store.

In the below example we’ve taken an awkward image that has a mix of photographic (cookie monster) and flat colour (the white background and his black mouth). Since it’s mostly photographic the jpeg (.jpg) file format is appropriate. 

While saving we have the option to adjust a quality slider and see a preview of how the quality affects the files weight.

image resie in progress

  1. You can see with 100% quality the images file size is 230Kb and the image is a perfect version of the original. At this size it can take a few seconds to download over the internet and much longer on slower networks and devices.

  2. With a quality of 1% the image is horribly fuzzy and lacking in detail but only 2kb in size, a fraction of the original version.

  3. At 51% the image is imperceptibly less detailed an only 8.6Kb. It has the right balance of size over quality. It will download in a fraction of a second and look great.

Bear in mind that your images can be accessed thousands of time per minute and every time a page with it on is viewed the image needs transporting to the users browser, so simple optimisation can speed up your sites delivery massively.

Feel free to experiment with saving an image in .png or jpeg format to see the trade-off in file size over how the image looks, you are always looking for the best possible presentation to the viewer’s eyes while ensuring the image arrives quickly enough for them to get to see it in the first place.

 

Size Guide

There are no hard and fast rules here and every image and website is different but here are some loose guidelines that might help.

  • For a typical inline image (i.e. and image appearing in amongst a body of text to enhance it) should be around less 40Kb

  • For a galley image (i.e. shots of landscapes, people, workplaces) around 200Kb and less than 400Kb

  • Online store products (for the catalogue) less than 15Kb each

 

Free Image Processing Programs.
Product: Paint.net
Platform: Windows
Requirements: Vista SP1 and Higher
Download: www.getpaint.net

Product: Gimpshop 2.8
Platform: Apple Mac
Requirements: OS X and Higher.
Download: www.gimpshop.com

 

Comgem has no affiliation with the providers of these applications nor does it directly support them. However we are always happy to give advice. At time of creation of this post these applications are provided without charge to the user and are free of spy/malware, we do not accept responsibility for any loss or damage that you suffer as a result of using these applications.

 

Part 4 continues with Uniformity of Presentation


By Alanna at 29 May 2014, 14:00 PM