Home > Information > Visual Design – Interlaced Images

Visual Design – Interlaced Images

We talked previously about content delivery systems as a means to alleviate bandwidth strains on your server, but in smaller environments, a CDN may not be necessary. However, you should still be concerned about bandwidth at all times. Any website, no matter how big or small can see increase usages over time as traffic conditions fluctuate. One great way to help with the loading time of a graphic-intensive website is to create it using interlaced images.

Interlaced and non-interlaced images

These images look and function almost the same way as a non-interlaced image with one exception–how it appears to load to your visitor. If you have a large image on your site and someone with a slower Internet connection comes to view that image, a non-interlaced image will simply be blank until the data transfers and then slowly it will appear from top to bottom.

An interlaced image will appear completely, but it will be highly pixelated. As the data transfers, the picture will begin to get clearer and clearer until the full resolution becomes apparent. A perfect example of the different between the two can be seen below:

Interlaced and non-interlaced imagesInterlaced and non-interlaced images

Interlacing is supported by all the top image formats: PNG, GIF, JPEG, JPEG 2000, JPEG XR and PGF. To create an interlaced image, all you need to do is make the correct setting change when saving your document. You should take note that interlacing an image does add a little more to the filesize of the image as compared to a standard progressive-scan image.

Site benefits

People don’t like waiting. Today, even 5 seconds is a long time! The advantage of an interlaced image is that a viewer can start seeing the image as a whole (although not clear) from the very start of the page load. Believe it or not, even though both types of images load at about the same speed, the perception is that the interlaced image loads faster! This can mean the difference between a visitor hitting the back button or just waiting out the load.

As a web developer, you have to always been looking for the edge when it comes to visitor retention and even the littlest of tricks can give you that edge.

Overall, you should be careful about putting high-resolution images on your website, if not for bandwidth considerations, at least for your visitor’s benefit. However, interlacing these images will provide your users with something other than a blank screen while they wait for your content to load.


Categories: Information Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: