What Is PNG Interlaced?
PNG interlaced is a Portable Network Graphic bitmap image that uses the optional interlaced scheme which loads incrementally. Interlaced gives users the perception that the image is downloading faster by loading multiple passes of the image before all the data has been transmitted.
That sounds great and all. But if you are like me, or most Photoshop users, the question, “should I interlace a PNG?” always comes up. The short answer to this question is simple, no. You should not interlace a PNG. At least in most cases. But when should you interlace, what are the pros and cons of using interlaced PNGs?
In this article, I will quickly answer most of the common questions around interlaced PNGs. So that once and for all, you will know the core concepts of interlacing and if/when you should them. Let’s start with how to decipher the differences between interlaced and non-interlaced PNGs.
Is Interlaced Better? – What Are The Differences?
With fast network speeds and higher bandwidth these days, you likely won’t notice if a PNG is interlaced or not. But to put it in laymen’s terms, an interlaced PNG loads a small percentage of the image first, then fills in the gaps until the whole image loads. In other words, the image looks blurry at first, then becomes more crip.
If you leave the interlaced box un-ticked, you get non-interlaced PNG’s that load progressively, from top to bottom. You’ve probably seen this when an image looks like horizontal bar shapes loading from top to bottom.
To help illustrate the difference between PNG interlaced and non-interlaced PNG, check the example below. This is a simulation of both methods being loaded on a slow, low bandwidth, connection.
Nowadays, internet connections are fast enough that images load almost instantaneously. But that wasn’t always the case. Interlacing images was a more common practice in web design during the late 90s and early 2000s.
In fact, interlaced PNGs images still use the Adam7 algorithm, which was developed in 1995. This algorithm interlaces in vertical and horizontal directions in 7 passes. Here’s a slowed down example of how the Adam7 works.
Even if we are saving images specifically for viewers that have a slow connection, the benefit of using interlaced PNGs is questionable, to say the least. The biggest problem with interlaced PNGs viewed on a slow connection is the fact that viewers often don’t know when the image is done loading. Which results in the viewer thinking the image is simply blurry. Not to mention interlaced PNGs are slightly larger in file size.
While a non-interlaced PNG will appear to load slower, at least you know what quality the image is, as it loads from top to bottom.
Should I Interlace A PNG?
In most cases nowadays, you should not interlace a PNG. Internet connections are faster with higher bandwidth resulting in quick load times for images. This means there’s no need to load images incrementally (or in multiple passes). In addition, interlaced PNG is slightly bigger in file size than not interlaced.
Interlacing a PNG should never be done on small images because they will load quickly enough. However, there are a couple of scenarios where you might consider interlacing your images, which I will cover below.
When To Use A PNG Interlaced?
You should only consider using PNG interlaced when you know viewers have a very slow internet connection. Or, if you are displaying lots of large images. In these scenarios, interlacing will give viewers the perception that your images are loading slightly quicker, with less flickering.
That said, as we touched on above, there are many downsides to interlacing your PNGs. The main thing to consider is that only users with the worst internet connections can benefit from viewing interlaced PNGs. However, that benefit comes down to the viewers’ subjective perception of a faster load. Not to mention, again, interlacing makes the file size slightly bigger, affecting compression. For these reasons, you should almost never interlace your PNG images.
Is Interlaced PNG Better?
An interlaced PNG is not better. Interlaced, or interleaving is merely a different method used to render the image to the screen. Interlacing, in the context of PNG images, is a legacy scheme that could only be considered better, for viewers who have incredibly slow internet connections. Even then, whether it’s better is more subjective.
If you prefer to see more of the image load quicker, but a low quality which incrementally improves until the completed image is done loading, then it’s interlaced. If you would rather see the full quality image load progressively from top to bottom, all be it, slightly slower, than non-interlaced would be your preference.
All of that said, this is pretty irrelevant with fast connections nowadays.
Conclusion
In summary, we covered what interlaced PNGs are, and the pros and cons of using them. Here’s the recap.
Interlaced PNGs let viewers with ultra-slow network connections download the image in multiple passes, to give the perception of a faster load. Interlaced PNGs are slightly larger in file size. With fast network connections these days, images load so quickly that using you can’t tell the difference between an interlaced PNG, and a non-interlaced PNG. The only reason to use interlaced PNGs is if you know your viewers the image have a very slow network connection. Other than this one use case, you should not interlace your PNGs.