This is probably the most unexpected finding we had when making this widget. It is a bizarre effect, and non-intuitive at first, at least for me. Here is my attempt to understand it.
First, I wanted to see what was happening with the bits themselves. I used a simple example of a 4x4 image assuming 12-bits per pixel. When you change this to 24-bits per pixel the total number of bits remains constant, but every pair of 12 bits gets "smooshed" together to make a new 24-bit pixel.
Next I wanted to understand why the image appears to double. There are two issues that are WEIRD. 1) why does the shape of the image stay the same, only smaller...and there are two of them? 2) What's going on with the colors?
Here's a little experiment I did with a B&W image:
1) For the geometry you can see how each row from the original, once smooshed, becomes half a row of the new image. Because it's exactly half, you effectively get two copies of the original geometry, side by side, where the geometry of the LEFT half is sort like every even row from the original and and the RIGHT half is made from every odd row.
2) For the color, in my example above you can see what happens. I used a black and white image with 12-bit colors of "FFF" and "000" only. If you smoosh two of these 12-bit sequences together the possibilities are:
- "000000" - black
- "FFFFFF" - white
- "000FFF" - blue (..ish. Blue is full intensity and there is a very small amount of green)
- "FFF000" - yellow (...ish, Red is full intensity, and there is a lot of Green as well)
In my example above, yellow is not possible because a white cell never precedes a black one. So you only get blue. Here is another example where yellow shows up. You really have to squint to see geometry preserved, but it is.
I wish I could make an animation that would show this interleaving effect - how each row from the original becomes half a row in the new one once the pixels have been smooshed together:
I'm not sure I've made this clear to anyone but myself. But it was fun to make the diagrams!