Editing Your Photos for Web – No 2!
Posted on 21/11/2007 in eCommerce, Photo Editing, The Basics

In our last blog posting on this topic, I wrote about some free software you can use to edit your images for web. In this article, I want to focus more on the practicalities of image size – why it is so important that your images are optimised, and what the real difference in image size means.

A couple of important rules of thumb for you to remember:

1. Image size – between 4kb and 20kb per image (depending on the no of images per page)

2. Page size – each page on your site should be a maximum of 50-80kb in total (though I reckon in these days of broadband that going to 150-200kb is probably acceptable).

3. Stickability – 50% of people leave the average website within 30 seconds! If your website hasn’t even loaded after 30 seconds, how many people will hang around?

I have recently had some clients who have experienced some challenges from this issue of image size – both clients I am thinking of have shopping cart (or ecommerce) websites. One of them had product images that were about 50kb and the other had product images in the order of 400kb!

Now, just having one image that is that much bigger than standard (4k to 20k in size) is not going to be a huge issue. But in shopping carts, you might have a page with 30 of these images showing at a time! 30 images at 400kb each is a whopping 12,000kb (12 MB) per page! Even at 40kb per image you are still looking at 1200kb (1.2MB) per page.

How long does it take to fully load a web page that is 1.2Mb or 12Mb in size? Lets check the Download Speed Calculator :

Page Size – 50kb

  • 7 secs – Dial Up – At 56kb (which is quicker than people on Dial Up usually get)
  • 1 sec – Very Slow Broadband (256KB)
  • Instantly – Slow Broadband (512kb)
  • Instantly – Medium Broadband (1500kb)

OK Page Size (150kb)

  • 21 secs – Dial Up – At 56kb (which is quicker than people on Dial Up usually get)
  • 4 secs – Very Slow Broadband (256KB)
  • 2 secs – Slow Broadband (512kb)
  • Instantly – Medium Broadband (1500kb)

Huge Page Size (1200kb)

  • 2 mins 55 secs – Dial Up – At 56kb (which is slightly quicker than actual Dial Up speed)
  • 36 secs – Very Slow Broadband (256KB)
  • 18 secs – Slow Broadband (512kb)
  • 9 secs – Medium Broadband (1500kb)

Massive Page Size (12,000kb)

  • 29 mins 15 secs – Dial Up – At 56kb (which is slightly quicker than actual Dial Up speed)
  • 6 mins – Very Slow Broadband (256KB)
  • 3 mins – Slow Broadband (512kb)
  • 1 min – Medium Broadband (1500kb)

So – you can see the problem with large image files!

From a speed perspective there is no question that you want small file sizes. So why would anyone want to use large image files? To preserve image size (ie the physical dimensions of the image) and image quality (low-resolution, medium-resolution, high resolution, very high resolution). If you are selling products (or services for that matter), you want the customer to be able to see the product in its best light – the image needs to be clear (not blurry) and large enough to see all the detail.

So, it comes down to a choice between SPEED & CLARITY!

The great thing about the way images display on the web, is that usually you can look at a fairly low resolution image and it looks pretty similar to a much higher resolution image. Have a look at the series of 300 x 200 pixel images below:

Original Image (164kb)


Cherries - Original


Very High Resolution (32kb – 19.5% of original size)


Cherries - Very High


High Resolution (20kb – 12% of original size)


Cherries High


Medium Resolution (12kb – 7.3% of original size)

Cherries Medium


Low Resolution (4kb – 2.4% of original size)

Cherries Low

Now, you may have much better eyesight than I have, but all of these optimised images except for the low resolution (4kb) image look pretty good to me! If it were my site and size was getting tight (ie needed to count every kb!) I would opt for the medium resolution (12kb) image. Which one would you go for?

If we had 30 products on our page and each product had one image, then using the 12kb image, we would be looking at a page total of 360kb – still twice as much as recommended. If we used the original 32kb image though – our page total would be a whopping 960kb! Do you think the high resolution (32kb) image is 3 times as good as the 12kb image? Is it worth the 300% longer it will take the page to load? How many potential customers might you lose while the page is taking the extra time to load?

The other option to changing the resolution (or quality of the image) is to reduce the physical size of the image. So – if you just have thumbnail images on your page, use a suitable size image – say 40×40. Do not load a 400×400 pixel image as a thumbnail – it will take 10x as long to load and it is only going to display at thumbnail size anyhow! Here is an example of that image as a high resolution thumbnail (60×40):

High resolution (4kb)

Cherries Thumbnail

Of course, a much better thumbnail would be a single cherry like this:

High resolution (4kb)

Single Cherry Thumbnail

If you need help with editing your photos, contact us at WebCare. We can give you a quote on processing your image files to a suitable resolution to save on the web.



Tags: , ,

Comments are closed.