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:
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.
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.