Magic PNG Thumbnails | Hacker News Reader

Magic PNG Thumbnails

thume.ca

111 pointstrishume41 comments

I saw an excellent use of this recently here:

https://mobile.twitter.com/SciencePorn/status/63454773027106...

This example is much more compelling than the ones in the source article—very cool!

Probably because I can't illustrate! Feeding good illustrations like this through my tool should produce equally good results.

I see no difference.

I didn't either, but interestingly on this image and the ones on the OP, if I tilt my laptop screen (Macbook Air) such that I'm looking at it very obliquely I can see the other image..

Someone in the twitter thread said that the image looks different on a black background. When I click the image it shows with a white background, so maybe it looks different on mobile? I put the image on a black background manually and here is what it looks like: http://i.imgur.com/91qsoKy.jpg

Try the non-mobile link: https://twitter.com/SciencePorn/status/634547730271064064

The "Ze first image" looks the same whether displayed in Firefox or with the default "Windows Photo Viewer" on Win 8.1. I did have an apple/peach image that did display differently on the same machine about a year ago.

Funny to see the comments on the Tweet stating it is a transparent png ;)

When I opened it with ImageMagick it appears to be a transparent PNG. Very clever trick, as it seems to use Twitters black background when viewing an image to achieve the effect.

So it's unrelated to the gamma trick in this article?

Yes, it is.

In that case, how does the room disappear?

The room is drawn with translucent black pixels that show up on any light background. The stars are drawn with translucent white pixels that show up on any dark background.

look closely --- it's still there.

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

The mobile link works fine for me.

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.

Huh, Firefox works fine, but Chrome doesn't.

God I hate the trend of putting "Porn" into the title of stuff like this.. stupid

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?

Not OP but I also find it annoying. It triggers my internal NSFW filter. I'm not going to make that risky click at work.

Yes, sorry about that. Unfortunately I've left it too long to edit, so your link will be most appropriate in the thread.

That's a different effect. It exploits transparency and the fact that Twitter uses a white background for tweets, but a black background for lightbox images.

This uses transparency, not gamma correction. A completely different trick.

Could someone explain why this image is flickering on my MacBook Air screen?

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.

Also happening in Firefox on Arch Linux.

I expect this is due to a Moiré pattern between your monitor's pixel grid and the "dots" in the image.

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

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.

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.

Here's a page with a test and a potential explanation http://www.lagom.nl/lcd-test/inversion.php

More detailed explanations:

http://www.mvkonnik.info/2009/04/brief-note-about-lcd-displa...

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.

I've wondered if it's a DisplayPort bandwidth thing.

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.

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

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.

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/

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.

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

as seen on 4chan

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/13...

Reply on news.ycombinator.com