What does the interlaced option in Photoshop do?

55

21

There is this options box shown when saving a PNG image from Adobe Photoshop. I always choose 'None'.

What does the 'Interlaced' option do?

enter image description here

Lazer

Posted 2012-03-24T16:00:30.940

Reputation: 394

Would just add (as a web designer) PNG's were the format of choice for web - interlace option is largely mute these days unless you are working for an audience on dial up modems. Originally interlace was a good option as it would load part of the image quickly to soften the user experience i.e. the long wait for page delivery over 56K. This is no longer an issue. And on mobile, you should be avoiding bitmaps and using vectors - which have minimal file size / load in split second/ scale more effectively. And compile them as a font if you can - even better.Applefanboy 2017-07-31T16:05:44.843

Answers

71

Interlaced image loads an early degraded version of the whole image as soon as possible and then progressively renders the image to clear state.

Non-interlaced image will load up in tiles showing clear image in each tile as it progresses to load in the image.


  • .gif follows the same idea.
  • For .jpg the interlaced = progressive and not interlaced = baseline.

enter image description here enter image description here

Joonas

Posted 2012-03-24T16:00:30.940

Reputation: 11 514

3Is there a disadvantage of the interlaced approach, e.g. a larger file size?Jan-Philip Gehrcke 2015-04-09T12:39:44.783

2@Jan-Philip Gehrcke Interlacing does increase the filesize a bit. What you should do is first go with personal preference or use case ( It isn't going to do much on print work ). Then check if interlacing adds too much to the file size and act accordingly. Jpeg progressive is way more efficient and doesn't really affect file size as much.Joonas 2015-04-09T13:01:12.707

12

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

Lauren Ipsum

Posted 2012-03-24T16:00:30.940

Reputation: 18 313

@Amphiteót I believe there was a user by the name of Lollero who did a really nice graphic illustrating the concept, but that answer has since been deleted.Lauren Ipsum 2014-11-01T01:08:41.477