Create image thumbnails to increase speed and visitor experience

We all know that large file download takes extra time for web visitors and increases bandwidth bill for your blog or web site. It’s imperative to keep down the image size and offer large image thumbnails in-preview mode rather than calling image directly with IMG SRC tag. Let’s do some simple bandwidth and load time calculation with a large image and much smaller thumbnail image.

Web visitor count: 50.000
Thumbnail image: 64KB
Large image: 640KB
Visitor with low speed connection: 256Kbps (download speed)
Visitor with fast speed connection: 2Mbps (download speed)

If all 50,000 visitors will fetch your large image (640KB in size) then your web site will burn around 30.5GB of traffic.

For low speed connectivity users with average download speed of 256Kbps to fetch a 640KB large image will take around 20 seconds (we do not count TCP/IP protocol handshake and connection establishment time that is usually in very low milliseconds and we do not measure browser rendering and image displaying time in the browser), however, to load thumbnail image (64 KB in size) for the same user will require only 2 seconds.

For 2Mbps download speed web visitor, a 640KB size image will fully load in around 2,5 seconds, but thumbnail image (64KB size) will fully load in 0,25 seconds.

The more large images and external files your web site calls – the slower the site will be for the web visitors to load. So use your favorite photo editing software you are familiar with, re-size the original images down to the size that’s acceptable and that it fits into your site design and use a href tag to link to the large image.

Some web browsers use only 2 parallel connections to fetch content from one host, so the less images your site has the faster it will load. The same applies to any external files like Javascript, Ajax calls, cascading style sheets and others.

Always remember: never resize large image to be displayed smaller in the web browser using lower values in IMG SRC tags WIDTH and HEIGHT. It’s mandatory to use existing image real WIDTH and HEIGHT values in the IMG SRC tag.

Leave a Reply