Thinking back to the old days, are you sure the black and white image you have in mind didn't come from the "lowsrc" attribute of an img tag? Progressive jpeg is typically full colour from the start, and it does offer the progressive enhancement of resolution that you mention.
Interesting, just last week I had a use for lowsrc for the first time in years and tried to use it, only to find out it had been removed from all browsers a while back.
please be aware that w3schools is a terrible resource loaded with inaccuracies and misinformation. It's the National Enquirer of web development. I'd recommend using MDN instead: https://developer.mozilla.org/en-US/.
Here's the Mandrill test image from SIPI and Utah as a 75% progressive JPEG with just the first scan of the most significant bit of just the DC for Y only, which is a totally expected scheme for the web back in the '90s:
Back in the '90s I was doing work funded by DEC and later NSF with JPEG and one of the things I did was find an decent way to store them at a smaller size and resolution. I found that having the first scan be just the MSB of DC of Y and then later the MSBs of the other two DCs was the same as having the first be all three give or take two bytes over more than 90% of our corpus and it let something display in about half the time (when a 9600 baud modem was target).
It's been a long time but I think what I ended-up with was first scan MSB of Y DC, next six bits of Y AC. Then MSB of Cb and Cr DC, then a scan with a few bits of Cb and Cr DC and AC and finally the rest. The idea was that for a B&W, greyscale, or color thumbnail the same JPEG would be used but only the first N scans sent followed by 0xffd9 with a width and height in the img tag. Anyway, I can't be the only one that figured-out in the days of SLIP over modems that doing this trick was a good idea.
