When to interlace an image?

Question

As a general rule of thumb when is it appropriate to make a gif interlaced, a png interlaced and a jpeg progressive?

Especially when publishing the image on the web.

Solution 1

• JPEG: YES — use progressive scan. It makes files smaller (each pass gets its own Huffman table), and partial rendering looks quite good.

• GIF: NO — it's unlikely to make the file smaller, partial rendering is poor, and it's pointless for animGIFs. It's best not to use GIF at all (yes, even for anims).

• PNG: NO — it hurts compression (as data from each pass is statistically quite different). If the image is large, use high-quality JPEG or lossy PNG if possible, as these may load quicker than a pixelated preview of a large lossless PNG.

ImageOptim will automatically change progressive/interlaced formats when it makes files smaller.

---

Disclaimers for nitpickers:

• In case of small and medium-sized images the progressive preview of each image is not going to be visible long enough for the user to appreciate it. Some browsers don't even bother rendering anything until the whole file is downloaded, so it's better to focus on saving bandwidth to get the whole page loaded ASAP.
• Non-progressive JPEG is a bit more efficient when the files are tiny (small thumbnails), but then the savings are tiny, too.
• iOS Safari has a higher maximum allowed image size for baseline JPEG than progressive, but the right solution there is to serve images at sizes reasonable for mobile in the first place.

Solution 2

My general rule of thumb: don't ever use interlacing. Interlaced formats typically occupy more space, have (slightly) more complexity and less support in decoders, and the alleged advantages for the user experience are at least debatable. Some arguments for PNG, and in general.

Some people like interlaced or "progressive" images, which load gradually. The theory behind these formats is that the user can at least look at a fuzzy full-size proxy for the image while all the bits are loading. In practice, the user is forced to look at a fuzzy full-size proxy for the image while all the bits are loading. Is it done? Well, it looks kind of fuzzy. Oh wait, the top of the image seems to be getting a little more detail. Maybe it is done now. It is still kind of fuzzy, though. Maybe the photographer wasn't using a tripod. Oh wait, it seems to be clearing up now ...

Solution 3

Interlaced images are slightly less efficient, but show up after shorter delay on the client side when transported over the network. IMHO they should be used when the expected download time for the image is long enough to be perceived by the user (say, above 1 second). The difference in file size is really quite small, so it's better to be too-cautious and use interlacing too much rather than too little.

In common broadband internet as of 2012, I'd just use it for every image > 100kb.

Solution 4

These points must be useful.

Interlacing (more generally, progressive display) is a method of displaying images on a monitor. When to use it? Your decision should be base on these factors:

•> Non-interlaced images are smaller than interlaced images.
•> Interlaced images cause less flickering than non-interlaced ones
•> Interlaced images are much more easily view-able.

The interlace lets you see the picture before all the data has been transmitted (makes them appear faster and better-looking) and gives you the "feeling" that it is being downloaded faster.

TIP: Interlacing is not recommended for small images but is a must if the viewer uses a slow connection

This is just a copy from Y answers i thought could help to understand. Original answer could be find at: https://answers.yahoo.com/question/index?qid=20090211121956AAz7Xz8

Solution 5

Just to throw my twopenneth into the argument: Interlacing was introduced years ago when internet speeds were slow, the idea being that the image would present itself in a gradually more defined manner, still giving an overall look and feel to an image without having to wait for the entire thing to load.

Interlacing, today, is basically unnecessary and should be used based on the overall size of the image being transferred.

Progressive scans on JPEG images images do provide a more refined image while attempting to reduce the overall file size (i.e. is an actual compression mode rather than a streaming method for the bits making up the image).

PNGs use a more complex algorithm than GIF.

View more solutions

Comments

[Timo Huovinen]

@ewanm89 could you rephrase your sentence? I have no idea what you said.

[Ivan Kuckir]

You should interlace images if you live in 90s (i.e. your viewers have the connection speed under 100 kB/s).

[Kitanga Nday]

@IvanKuckir you mean those in third world countries, because experiencing below 100 kb/s internet is the norm here (I live in a third world country)

[Kornel]

That's not true about JPEG. Progressive JPEG compresses better, as each pass gets its own Huffman coefficients.

[Timo Huovinen]

Also it depends on the size of the image

[kumarharsh]

I <3 Concise answers +1

[Buttle Butkus]

+1 for user confusion about whether image is fully loaded yet. That happens to me all the time.

[TorranceScott]

I disagree entirely. If this question were about storage, this answer would be correct, but it's about the best publishing for images on the web. I would say always progressive/interlace an image since the user gets feedback about the entire image much faster than without. Users won't care about a 10% increased load time for a perfect image if they can see a decent image 60% faster.

[Kornel]

@TorranceScott on the net, storage size is same as transfer speed. If image is small, there's too little time to notice. If image contains text and/or it's a comic, it's better to load it from top to bottom. In case of PNG the compression difference in compression may be so large that a non-interlacved image may load almost as quickly as its pixelated preview would.

[TorranceScott]

@Kornel I agree with those particular exceptions. I haven't seen the the png compression threshold you mentioned though so I don't know where that occurs, if at all. From a computer's perspective it's pretty accurate to relate file size and transfer speed. However, the time to get some of the data to your eye can be greatly reduced by progressive/interlace and that's the whole point I was getting at. The user has data to work with faster and can decide to wait for full load if they anticipate that adding value to the experience.

[saurabheights]

@Kornel:- There is no alternative for animated GIF as far as I know. Animated PNG never got adopted, WEBP does support animation but is not adopted by Firefox. Is there any other alternative besides making video of the GIF file.

[saurabheights]

Correction: MNG never got adopted and APNG is adopted/created by firefox.

[Timo Huovinen]

So what's the recommended alternative to animated GIFs as of now?

[Kornel]

@TimoHuovinen Currently the best, at least from compression perspective, is to use H.264 (and/or VP9 or AV1 as an option if you want to be nice) and serve it using <video> tag. I know <video> is a massive PITA, but Chrome is refusing to make it easier. In Safari <img src=clip.mp4> works!