Quick web design tips: Image size and optimisation

By Matt Cornock

Optimising (or optimizing) images is one of the quickest and easiest ways to get the size of your web pages down. Not optimising images remains to be one of the most significant problems on the internet. Reducing image file size benefits all users, as well as for the increased popularity in mobile devices, making your site small in filesize will make it appear faster and more user-friendly: a better user experience after all.

Whilst squeezing every last kB of data from your image may not be the best use of your time, considering size, type, optimisation every time you use a file on your website could significantly increase site response time, and not least decrease the amount of bandwidth your site uses. Reducing bandwidth is great for your users on capped broadband (or slow connections) and great for you if your hosting provider has a limit on you too, particularly if suddenly your site gets an influx of hits.

How to reduce file size of images

  1. Resize your image. If you’ve taken a photo on on a camera you’ll have an image in the size of thousands, e.g. 3000×2000 pixels. If you want to make this available online (and what most out-the-box gallery systems do) you should create a thumbnail (100×100) and a larger preview (600×400), before linking to the original file. The drupal album photos module used on this site does just that. Although you have to hold more files on your server, your web user will only get the photo images useful to them at that time. This makes it quick for them to make decisions about the value of the image content and you’re not forcing large files upon them.
  2. Pick the right file type. The three main file types in use are: GIF, JPG (JPEG), PNG. Each has their benefits and compress images in different ways. If you find you’re getting problems of compression artefacts (noise, colour shift) with JPG (JPEG), try one of the others.
    • GIF – 256 colours maximum, permits transparency. Supported by all major browsers. Allows animation. Best for logos with limited colours or text.
    • JPG – Millions of colours (not palette based). Not good for text or high contrast patterns. The bog-standard for photos. Typically smallest file sizes for photo images achievable with JPG.
    • PNG – Any palette or maximum millions of colours. Transparency (including alpha channel useful for media productions). Now supported by major current browsers (IE6 does not support PNG transparency). Becoming more common as a one-stop-shop for images.
  3. Optimisation. When you save a file in any reputable image editing program, advanced options will allow you to set the type of optimisation (either as colour optimisation or compression control). Normally, reducing the number of colours in a palette based file-type will reduce the file size at a cost of dithering or posterising effects. Increasing the compression algorithm (reducing the ‘quality’) of the image will reduce the size at a cost of artefacts being introduced (noise, blocks, discolouration).

Latest community mutterings

As featured on the Daily Sucker’s link to 8 Excellent Tools for Optimizing Your Images and in .NET magazine, smush.it seems to be a highly recommended way of simplifying image optimisation.

Article Alley also have a good overview of how to make a site easier to use through a better page response time.

I’ll be refering a lot to some of Jakob Nielsen’s earlier articles from 1997 to see how relevant they are today. For this post see: The Need for Speed (with updates in 2000 and 2004).

Leave a Reply

Your e-mail address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.