When to interlace an image?

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.

82460 次浏览
小开

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.

小开

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.

小开

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

小开
最佳答案

  • 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.
小开

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

小开

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.


提交答案