There is this options box shown when saving a PNG image from Adobe Photoshop. I always choose 'None'.
What does the 'Interlaced' option do?
There is this options box shown when saving a PNG image from Adobe Photoshop. I always choose 'None'.
What does the 'Interlaced' option do?
Interlaced image loads an early degraded version of the whole image as soon as possible and then progressively renders the image to clear state. Interlaced will almost always be a bit bigger in filesize.
Non-interlaced image will load up in tiles showing clear image in each tile as it progresses to load in the image.
.gif
format follows the same idea..jpg
format
progressive
is the same as interlaced
baseline
is the same as not interlaced
GIF Simulation of loading an interlaced png and a non interlaced png using Firefox.
The point of the simulation is to show how these two methods look visually when loading the image and not to compare their load times. Interlaced almost always adds a little to the filesize and therefore loads a little slower. There's also the perceived speed that is somewhat subjective. In this simulation, I used GPRS speeds (~7KB/s) and interlaced loaded 3 seconds later. Some people might say it looked like the Interlaced was faster. Some might say it's true, but it looked terrible when the image first started loading in. My personal preference is to not use interlacing.
50KiB
online comic stripimage) would still take over 15 seconds to load, so having a preview that loaded quickly was really valuable. Now it's 2019 and websites have multi-megabyte videos as entire page-backgrounds which load in an instant on my home 1Gbps cable connection. Methinks interlaced images are not long for this world - do modern formats (e.g. WebP) even support it anymore?
"Interlacing" means that it draws (I'm pulling numbers out of the air) every fifth line (line 5, 10, 15), then every fourth line (line 4, 9, 14), then every third line, etc. until the image is filled in, rather than drawing line 1, 2, 3, 4, 5, etc. in order. This allows a sketchy version of the image to come in gradually and fill in until it's completed. Drawing the lines in order means you get the image from the top down.
Lollero's visual is an excellent demonstration.