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.

@ewanm89 could you rephrase your sentence? I have no idea what you said. — Timo Huovinen, Aug 27 '15 at 05:56
You should interlace images if you live in 90s (i.e. your viewers have the connection speed under 100 kB/s). — Ivan Kuckir, Mar 28 '17 at 11:18
@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) — Kitanga Nday, Jun 28 '17 at 15:17

Kornel · Accepted Answer · 2017-04-13T14:15:16.743

101

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.

edited Apr 13 '17 at 14:15

answered Jan 02 '13 at 15:12

Kornel

91,239
30
200
278

Also it depends on the size of the image – Timo Huovinen Sep 07 '13 at 18:38
1

I <3 Concise answers +1 – kumarharsh Nov 01 '13 at 17:52
19

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. – TorranceScott Jun 05 '14 at 18:24
8

@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. – Kornel Feb 09 '16 at 21:34
2

@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. – TorranceScott Apr 04 '16 at 17:32
@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 Apr 13 '17 at 09:28
Correction: MNG never got adopted and APNG is adopted/created by firefox. – saurabheights Apr 13 '17 at 12:07

leonbloy · Answer 2 · 2012-11-20T18:37:06.573

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

That's not true about JPEG. Progressive JPEG compresses better, as each pass gets its own Huffman coefficients. — Kornel, Jan 02 '13 at 15:08
+1 for user confusion about whether image is fully loaded yet. That happens to me all the time. — Buttle Butkus, May 13 '14 at 06:20

score 6 · Answer 3 · answered Nov 19 '12 at 07:40

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.

score 3 · Answer 4 · answered Apr 27 '14 at 07:48

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

score 3 · Answer 5 · answered Dec 30 '15 at 14:42

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.

score 1 · Answer 6 · edited Apr 13 '17 at 12:33

There is an interesting related post on webmasters

https://webmasters.stackexchange.com/questions/574/progressive-jpeg-why-do-many-web-sites-avoid-rendering-jpegs-that-way-pros

Untimately it depends on how they are going to be used.

The post suggests that there is limited - genuine - support for progressive images. And sometimes they may cause issues with plugins which don't support the progressive format.

Hope that helps.

When to interlace an image?

6 Answers6

Linked