-------------------------------------------------------------------
TIME: Complete this section within 15 minutes
-------------------------------------------------------------------
Progressive and interlaced graphics appear to download a little at a time; they either start off being displayed in the Web page quite blurry, or only partially drawn, for example, and become more "complete" or clear (visible) with every passing second until they are 100% downloaded. As a result end users have something to look at as they download. Compared to non-progressive or non-interlaced graphics (which are at best drawn a little at time starting at the top and going to the bottom) progressive and interlaced graphics incrementally render across the full image (equally across the entire image) so that the end users sees a blurry or incremental version of the entire image that eventually becomes complete.
The best way to see this effect is to save a huge image (such as our monster.jpg sample image) in interlaced or progressive format, and then try to load it over a slow network connection such as a dial-up modem. Note, however, that you'll have to test it both Internet Explorer and Navigator since not all browsers support interlaced or progressive formats, in which case it'll load just like a normal image (not incrementally, but all at once instead). Also note that once cached by the browser after the 1st time it is downloaded the image no longer needs to be downloaded again and will instead be loaded off the hard drive (very fast!) each time it is subsequently viewed.
Note: Progressive download and/or interlacing are really only useful when the image otherwise takes a long time to download. Don't bother with progressive/interlacing for very small images, or background images in pages or tables. Note that progressive download and interlacing can be distracting in cases where the browser incrementally renders the background beneath text and other images.
EXERCISE: See progressive and interlacing in action view the "MonsterINTERLACED.png" and "MonsterPROGRESSIVE.jpg" images in the images area of our course resources:
1) View our Course notes Web page at
http://www.gridinstitute.com/bc/mt35101/
2) Click on the "Course Resources" link (top left-hand of page)
3) Click on the "Sample Images" link
4)
Compare "MonsterINTERLACED.png" and " MonsterPROGRESSIVE.jpg" to Monster.jpg and MonsterPNG.png, which are NOT interlaced or progressive.
Tip : Bypass the browser cache and force reload of your Web page manually (hold down SHIFT-CTRL-ALT and click on the "reload" button at the same time), or clear your cache if needed to ensure that the images are actually transmitted over the Web instead of being loaded from the cache on the hard drive.