The Difference Between Interlaced and Non-Interlaced Images

The Difference Between Interlaced and Non-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 difference between the two can be seen below:

Interlaced and non-interlaced images

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

logo

Related posts

Reduce your bandwidth without reducing your website's look

Reduce your bandwidth without reducing your website's look

Previously, I talked about image slicing and how it related closely to saving bandwidth (or how this was much more of an illusion than anything else) and it got me thinking about how important bandwidth savings can be. Most webmasters out there don't always know what it's like to reach their web...

Should you worry about slicing your web images?

Should you worry about slicing your web images?

Back in the days, the Internet was fresh and new and connections to it were rather slow. This caused quite a problem for the first websites that actually had images on them because these sites would take forever to load. A neat little trick that was invented was called image slicing and...

1 Comment

  1. Edward K. February 26, 2019
    Reply

    Exactly what is was Looking for. Thank you
    I will tell others of this site.

Leave a Reply

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