Optimizing Design: Interlacing

Optimizing Design: Interlacing

nterlacing is a technique for loading graphic files in a non-contiguous manner.

GIF files can be saved in two ways, consecutive and interlaced. Consecutive GIFs are displayed on the screen line-by-line starting at the top of the image. The effect is of the image “pouring” into the page.

Interlaced GIFs display on the screen in a non-contiguous manner, painting every 8th row of the image first. The effect created is one of a low-resolution version of the graphic appearing very quickly. Once the first set of rows have loaded, every 4th row is added and the image appears to gradually come into focus. Next, every 2nd row and finally every row is displayed and the whole image is visible at full resolution.

On a fast connection, this will be a moot point?the image will display quickly and your users won’t notice whether it is interlaced or not. On a modem, especially with larger files and slower connections, interlacing becomes a more important decision.

Interlaced file displaying every 8th row; this is how the file first loads.Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.

Interlacing can give the readers the illusion of higher bandwidth, because they have something to look at while the rest of the file is downloading. When the viewer sees the low quality image they can wait for the image to improve, or they can skip over the image by clicking to another page.

However, interlacing can also be a frustrating feature, making readers feel as if they are waiting longer to see details in, for example, a large image map.

In addition, some people (us included) just aren’t that fond of the general effect it produces.

Another thing to note about interlacing it that it adds slightly to file size. For example, the image above is 21.9K in non-interlaced form and 24.4K in interlaced form.

Try saving a GIF in interlaced form, take a look at the effect as it loads on your test page, and judge for yourself whether or not it works on your pages. And remember, if you are looking at a small file on a fast connection, you won’t notice the effect at all?the image will load quickly enough that interlacing is rendered moot.

Interlacing increases file size slightly. If you like the interlacing effect, apply it to large GIFs (>20K) where the file size difference will be less noticeable.

Do not interlace background graphics as it will slow the page dramatically.

On a high-speed connection with smaller files, interlacing won’t be visible; the file will just load quickly and be complete.


About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist