10 ms·

Magic PNG Thumbnails

111 points by trishume 11y ago

pygy_ 11y ago
Could someone explain why this image is flickering on my MacBook Air screen? http://thume.ca/assets/postassets/doubleVision/out.png http://thume.ca/assets/postassets/doubleVision/out.png Especially "ze first" image as seen in FF and Chrome. I suppose it is related to how monitors use temporal dithering to fake 24 bit colors when they really have 18 bits per pixel, but why is it more apparent on this kind of picture? Is it a perceptual issue or a technical one? It is also apparent when using Windows XP under virtualization. Some windows have checkerboard patterns that flicker.
- heinrich5991 11y ago
  Also happening in Firefox on Arch Linux.
- Kronopath 11y ago
  I expect this is due to a Moiré pattern between your monitor's pixel grid and the "dots" in the image.
- trishume 11y ago
  Yah this happens because the image is based on a grid. You can see it on any monitor if you open it up in an image viewer and zoom in an out. As another commenter mentioned these effects are called Moiré patterns: https://en.wikipedia.org/wiki/Moir%C3%A9_pattern https://en.wikipedia.org/wiki/Moir%C3%A9_pattern They may be more or less apparent depending on the scaling on the image and the scaling algorithm being applied. Some scaling algorithms apply filters that can make the effect even more weird than normal.
  - userbinator 11y ago
    It's not Moiré. If it's displayed 1:1 as the image is designed to be, there won't be any, and even if it isn't and the patterns appear, those patterns shouldn't flicker on a properly adjusted monitor.
- sp332 11y ago
  Here's a page with a test and a potential explanation http://www.lagom.nl/lcd-test/inversion.php http://www.lagom.nl/lcd-test/inversion.php
  - userbinator 11y ago
    More detailed explanations: http://www.mvkonnik.info/2009/04/brief-note-about-lcd-displays.html http://www.mvkonnik.info/2009/04/brief-note-about-lcd-displa... http://www.solomon-systech.com/files/ck/files/Application%20Notes/TFT%20Flickering%20Application%20Note_1.1.pdf http://www.solomon-systech.com/files/ck/files/Application%20... tl;dr: the liquid crystals in LCDs need to be driven with AC voltage to prevent electrolysis degradation. This is known as "inversion" and there are different patterns used. If the magnitude of the + voltage is different from the - voltage, i.e. the "common" voltage Vcom is not exactly in the middle, the subpixels change brightness slightly on each cycle and this causes flicker. The flickering becomes much more noticeable if the pattern displayed in the image matches the inversion pattern. Neither of my (nearly 10 years old now... but still working well) LCD monitors flicker on all the images, so this is something that shouldn't be occurring on a good monitor. I suppose manufacturers now are relaxing the tolerances to save cost, justifying it by the fact that flickering is not observable on "most" (debatable) content.
- TazeTSchnitzel 11y ago
  I've wondered if it's a DisplayPort bandwidth thing.
- pygy_ 11y ago
  Thanks everyone for the details. I don't think it's a moire pattern because the image is displayed at native resolution. So it is a low level calibration issue. Disappointing to see this on a Mac.
danso 11y ago
Someone needs to apply this to the photo of the white-gold/blue-black dress image to really fuck with the Internet.
martin-adams 11y ago
I saw an excellent use of this recently here: https://mobile.twitter.com/SciencePorn/status/634547730271064064?s=09 https://mobile.twitter.com/SciencePorn/status/63454773027106...
- Frozenlock 11y ago
  You should edit your post and remove the "mobile" part from the URL. Meanwhile, for everyone not seeing what the fuss is about, here's the correct link: https://twitter.com/SciencePorn/status/634547730271064064?s=09 https://twitter.com/SciencePorn/status/634547730271064064?s=...
  - sp332 11y ago
    The mobile link works fine for me.
    - tokenizerrr 11y ago
      It doesn't actually do the thing when expanding (for me on Chrome on Windows). Compare what happens when clicking the image between the two.
      - sp332 11y ago
        Huh, Firefox works fine, but Chrome doesn't.
  - bobbles 11y ago
    God I hate the trend of putting "Porn" into the title of stuff like this.. stupid
    - scrollaway 11y ago
      Does it trigger your work firewalls? Are your government's internet filters too aggressive? Or do you just have nothing else in life to complain about?
thedufer 11y ago
I saw someone do something similar in ye olde days of Gravatar. It abused their resizing algorithm to get different images at different scales. It was very simple (and probably couldn't have worked if it was much more complicated) - just the text `i++` on a noisy background. But when scaled it turned into `i--`. In both cases, it was very readable.
qnaal 11y ago
as seen on 4chan
- userbinator 11y ago
  I also saw it on 4chan first, a long time ago, but I'd bet this trick has been around for many years before that. The gamma of 0.023 also seems to have been the de-facto way to do this. Here's a good illustration that shows how the pixel values of the 2 images have been "compressed" into two separate ranges: https://archive.rebeccablacktech.com/boards/g/img/0244/57/1335397543121.jpg https://archive.rebeccablacktech.com/boards/g/img/0244/57/13...
est 11y ago
Anyone else remember an old libpng hack that distinguish IE, Firefox and WinXP? exact one PNG file, viewed differently on each. Sorry my Google-fu failed and I can't find the link.
- geographomics 11y ago
  Not exactly what you mentioned, but reminded me of this: https://www.reddit.com/r/glitch_art/comments/1buu5k/this_jpeg_glitches_differently_in_each_web/ https://www.reddit.com/r/glitch_art/comments/1buu5k/this_jpe...
TorKlingberg 11y ago
It is really an unfortunate over-engineering in the PNG format to include gamma correction. So many problems would have been avoided if PNGs just stored RGB values and let the renderer/OS/driver/screen decide how to display it. Trying to do gamma correction based on various guesses about screens just lead to jarring color inconsistencies. Here is great article about it. It is a few years old, so some of the problems are fixed now. https://hsivonen.fi/png-gamma/ https://hsivonen.fi/png-gamma/

111 points by trishume 11y ago

pygy_ 11y ago

Could someone explain why this image is flickering on my MacBook Air screen? http://thume.ca/assets/postassets/doubleVision/out.png http://thume.ca/assets/postassets/doubleVision/out.png Especially "ze first" image as seen in FF and Chrome. I suppose it is related to how monitors use temporal dithering to fake 24 bit colors when they really have 18 bits per pixel, but why is it more apparent on this kind of picture? Is it a perceptual issue or a technical one? It is also apparent when using Windows XP under virtualization. Some windows have checkerboard patterns that flicker.

heinrich5991 11y ago
Also happening in Firefox on Arch Linux.
Kronopath 11y ago
I expect this is due to a Moiré pattern between your monitor's pixel grid and the "dots" in the image.
trishume 11y ago
Yah this happens because the image is based on a grid. You can see it on any monitor if you open it up in an image viewer and zoom in an out. As another commenter mentioned these effects are called Moiré patterns: https://en.wikipedia.org/wiki/Moir%C3%A9_pattern https://en.wikipedia.org/wiki/Moir%C3%A9_pattern They may be more or less apparent depending on the scaling on the image and the scaling algorithm being applied. Some scaling algorithms apply filters that can make the effect even more weird than normal.
- userbinator 11y ago
  It's not Moiré. If it's displayed 1:1 as the image is designed to be, there won't be any, and even if it isn't and the patterns appear, those patterns shouldn't flicker on a properly adjusted monitor.
sp332 11y ago
Here's a page with a test and a potential explanation http://www.lagom.nl/lcd-test/inversion.php http://www.lagom.nl/lcd-test/inversion.php
- userbinator 11y ago
  More detailed explanations: http://www.mvkonnik.info/2009/04/brief-note-about-lcd-displays.html http://www.mvkonnik.info/2009/04/brief-note-about-lcd-displa... http://www.solomon-systech.com/files/ck/files/Application%20Notes/TFT%20Flickering%20Application%20Note_1.1.pdf http://www.solomon-systech.com/files/ck/files/Application%20... tl;dr: the liquid crystals in LCDs need to be driven with AC voltage to prevent electrolysis degradation. This is known as "inversion" and there are different patterns used. If the magnitude of the + voltage is different from the - voltage, i.e. the "common" voltage Vcom is not exactly in the middle, the subpixels change brightness slightly on each cycle and this causes flicker. The flickering becomes much more noticeable if the pattern displayed in the image matches the inversion pattern. Neither of my (nearly 10 years old now... but still working well) LCD monitors flicker on all the images, so this is something that shouldn't be occurring on a good monitor. I suppose manufacturers now are relaxing the tolerances to save cost, justifying it by the fact that flickering is not observable on "most" (debatable) content.
TazeTSchnitzel 11y ago
I've wondered if it's a DisplayPort bandwidth thing.
pygy_ 11y ago
Thanks everyone for the details. I don't think it's a moire pattern because the image is displayed at native resolution. So it is a low level calibration issue. Disappointing to see this on a Mac.

danso 11y ago

Someone needs to apply this to the photo of the white-gold/blue-black dress image to really fuck with the Internet.

martin-adams 11y ago

I saw an excellent use of this recently here: https://mobile.twitter.com/SciencePorn/status/634547730271064064?s=09 https://mobile.twitter.com/SciencePorn/status/63454773027106...

Frozenlock 11y ago
You should edit your post and remove the "mobile" part from the URL. Meanwhile, for everyone not seeing what the fuss is about, here's the correct link: https://twitter.com/SciencePorn/status/634547730271064064?s=09 https://twitter.com/SciencePorn/status/634547730271064064?s=...
- sp332 11y ago
  The mobile link works fine for me.
  - tokenizerrr 11y ago
    It doesn't actually do the thing when expanding (for me on Chrome on Windows). Compare what happens when clicking the image between the two.
    - sp332 11y ago
      Huh, Firefox works fine, but Chrome doesn't.
- bobbles 11y ago
  God I hate the trend of putting "Porn" into the title of stuff like this.. stupid
  - scrollaway 11y ago
    Does it trigger your work firewalls? Are your government's internet filters too aggressive? Or do you just have nothing else in life to complain about?

thedufer 11y ago

I saw someone do something similar in ye olde days of Gravatar. It abused their resizing algorithm to get different images at different scales. It was very simple (and probably couldn't have worked if it was much more complicated) - just the text `i++` on a noisy background. But when scaled it turned into `i--`. In both cases, it was very readable.

qnaal 11y ago

as seen on 4chan

userbinator 11y ago
I also saw it on 4chan first, a long time ago, but I'd bet this trick has been around for many years before that. The gamma of 0.023 also seems to have been the de-facto way to do this. Here's a good illustration that shows how the pixel values of the 2 images have been "compressed" into two separate ranges: https://archive.rebeccablacktech.com/boards/g/img/0244/57/1335397543121.jpg https://archive.rebeccablacktech.com/boards/g/img/0244/57/13...

est 11y ago

Anyone else remember an old libpng hack that distinguish IE, Firefox and WinXP? exact one PNG file, viewed differently on each. Sorry my Google-fu failed and I can't find the link.

geographomics 11y ago
Not exactly what you mentioned, but reminded me of this: https://www.reddit.com/r/glitch_art/comments/1buu5k/this_jpeg_glitches_differently_in_each_web/ https://www.reddit.com/r/glitch_art/comments/1buu5k/this_jpe...

TorKlingberg 11y ago

It is really an unfortunate over-engineering in the PNG format to include gamma correction. So many problems would have been avoided if PNGs just stored RGB values and let the renderer/OS/driver/screen decide how to display it. Trying to do gamma correction based on various guesses about screens just lead to jarring color inconsistencies. Here is great article about it. It is a few years old, so some of the problems are fixed now. https://hsivonen.fi/png-gamma/ https://hsivonen.fi/png-gamma/