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.

Share the Post:
data observability

Data Observability Explained

Data is the lifeblood of any successful business, as it is the driving force behind critical decision-making, insight generation, and strategic development. However, due to its intricate nature, ensuring the

Heading photo, Metadata.

What is Metadata?

What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

XDR solutions

The Benefits of Using XDR Solutions

Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved