Screenshot-proof images via temporal dithering

You can check out "font dithering" if you look at the Gotham fonts used on Obama's site.

It actually uses two fonts, each with a random half the characters, and missing the other random half. The "font-face" CSS declaration lists both of them, so when a character in one isn't present, it falls back to the other.

Everything looks perfect to the user, but it basically renders the fonts worthless for anything except web use, since system tools or Photoshop can't use character-based font fallbacks the way browsers can. Pretty clever, really.

It's amazing how well my eyes reconstruct the original image from the demo http://persistent.info/web-experiments/temporal-dithering/ I had to blink (to capture a "screenshot" in my eyes) to see that the distorted frames were really there.

Now, obviously, the way my eyes do it is temporal averaging. Thus, a camera with a sufficiently long exposure would capture it just the same. What it does prevent is screenshots, taken internally by the device - which generally don't do averaging or have a concept of "exposure". Of course, that could be implemented, but it's not standard at present.

He mentions using more than two frames - a less precise approach is to just add massive random noise over an indefinite number of frames (a noisy video of a static image), and instead of taking care that they cancel out, just rely on statistical convergence. Depending on how much noise is added, it gets more difficult to see the original.

I guess there's a risk that only a little noise is added in some frames, revealing the person. So perhaps instead of adding random noise, you use offsets of a legitimate face. This would make either single frame actively misleading, and perhaps not obviously distorted. Your eyes wouldn't be deceived (I think...), because they average the pixels, like a long exposure.

Also, one could selectively apply the technique - as google street-view blurs out people's faces, but nothing else. This might reduce the flicker.

Really cool concept. While it wouldn't phase someone actively trying to retrieve the source image (i.e., I'm sure someone could write a screenshotting service for Android) that could get around this pretty readily, I'm sure that this would phase all the basic screenshotting functionality on mobile (and otherwise) currently.

I wonder if there's a way to obscure the source image even more though; while the details aren't clear the the source positive and negative frames, it's still pretty clear that it's an image of a face. Perhaps the addition of some sort of noise that could be cancelled out would work.

It would also be interesting to see this applied to video streams in addition to just static images.

EDIT: A very simple workaround that would be easy for the general public is to just take a picture of the screen with another device. Example: http://i.imgur.com/ZLdpp.jpg

This is about a good idea as DRM. To those who want to get around it, it's easily surmountable. To everybody else, it's a nauseating pain in the ass.

Direct link to his proof of concept: http://persistent.info/web-experiments/temporal-dithering/

(It took me a moment to locate it since I wasn't reading carefully.)

The flickering was highly noticeable on my MacBook Air until I lowered the screen brightness. An interesting side-effect of the rapid switching is that whenever I blink, I could see the artifacts. Or when rapidly moving my head. I figure persistence of vision and peripheral vision might have something to do with it. Also smaller tile size appears to reduce flickering.

This is an interesting idea, but since the client ultimately gets both halves one can just recombine them out-of-band. (If each half is displayed 50% of the time, it shouldn't require many screenshots to get both. And that assumes you have a 100% secure runtime / SSL chain for delivering the images to the app, which is highly unlikely.)

Could this have a negative side-effect on people with photosensitive epilepsy? https://en.wikipedia.org/wiki/Photosensitive_epilepsy#Bucha_...

The first time I heard the term "dithering" it was on my Amiga. They were referring to this kind of temporal dithering, not the kind of we all think about now. The point back then was to display more than 4096 colors on the screen at once. I believe the loaded up 2 hardware screen buffers with the 2 images and then page flipped back and forth as fast as possible.

I don't remember there being as much flicker, but since the goal was to get more subtle colors the images were probably much closer to each other than this demo.

You can also use this technique to get more dynamic range in intensity (and avoid normal HDR compromises).

I went ahead and used SimpleCV/python to defeat this. Perhaps when I get more time tonight I will have it automatically capture the screen shots. Creating variations on this method could be really fun. I bet someone could bake something like this into SimpleCV.js (https://demo.simplecv.org/).

Source: https://gist.github.com/4360664

Results: http://imgur.com/a/hBMed

An interesting technique, I think it's cool.

I doubt any technical control will solve the ephemeral picture problem because of the analog hole.

For this specific technique, if a photo of the screen doesn't defeat the dithering (in my quick tests the photos were worse than what I could see on the screen but better than either of the component frames [1]) you could reconstruct the image from a movie fairly quickly.

[1] http://imgur.com/jA5f6

It's really cool how you can reconstruct the original image in your browser by dragging one of the frames on top of the other. At least it works for me in Firefox on Ubuntu where the image I drag becomes see-through.

On my iPhone the flashing alternating images were extremely visible. I'll have to try it on my computer later. One thing is for sure this won't work well on slower computers or mobile devices.

For me the flicker gets better by reducing the block size and it's imperceptible at 1px - there is the occasional run of negatives or positives but that can be fixed with vsync

This is nice but does not prevent somebody using another smartphone to take a picture or video clip.

Mission Impossible had the best one and with that once you have read the message your phones battery could catch fire. Even then you could not garantee anybody else filming it.

Still nice idea and it does hinder screenshots, though they could just take a few and grab both frames to combine.

Obviously, it's easy to circumvent, a normal user would just record the screen instead of capturing one frame.

The hack is cool anyway.

Does not work well on my phone (Galaxy S2 running CM10 nightlies) using Chrome. Animation is just not fast enough, or possibly the AMOLED screen is too quick to respond compared to an LCD. Maybe a combination of these. Anyway it's unusable (as is the HN comment text box but that's a different story)

I just took 3 screenshots of the page, and by layering them together you get the exact same image as the left one. I don't really think it's a solution. As long as the eye can see it, you can't prevent recording anyways. http://imgur.com/ab1gk

It looks really cool as a concept, but I've found that playing around with the values and since closing the tab my eyes are really messed up now.

I would hate to see this on a film, it'd do my eyes in completely.

Still, really nice concept.

I love the comments on the page itself. They just whine about the issues, rather than compliment the author for being creative.

I for one really like the proof of concept for its creativity. I haven't seen this earlier.

This doesn't work at all on a Retina MBP in Safari. First image didn't animate at all, "Lenna" image flickered but at a rate that didn't make it really visible.

Not trying to troll, but doesn't this all boil down to DRM? Why not simply create a DRM-enabled jpeg format that mobile devices support and be done with it?

Hmm - is there any way to implement a version of this effect which uses more than two images, or even one which generates a new random image for each frame?

First, I must say that this is some awesome tech. Though, I think people should not be sharing images that would require them to use a tech like this. Moreover, if this is applied to display sensitive information then the person who intends to steal it will not be dithered by something like this. They would certainly look at means to circumvent it. It's like limiting people to right click and save an image or copy some text. Those who want to do it, can always grab the source code and load images directly from their links or copy text from the source code.

I've thought of this before, but it's just too easy to get around, and it looks horrible. We'd need much higher screen refresh rates.

Works impressively well in Chrome.

Fails because ow my eyes are bleeding.

could you use this same technique to enhance the apparent resolution of a screen?

This is quite awesome.

“It seems odd that at the beginning of the Internet everyone decided everything should stick around forever,”

No. It doesn't.

That's how it goes. The split-second something transits on the Internet there are countless copies on servers, caches, proxies, etc. In addition to that TFA mentioned the loophole that, well, once something can be seen it can be recorded using lots and lots of endless external means.

Oh, and that "everything sticks around forever" is not just for stuff on the Internet: it's much worse than that.

It's that "anything that is on any device connected to the Internet" can potentially stick around forever.

Ask Scarlett Johannson how it worked for her private pic in her smartphone...

People saying that "our pics are never saved anywhere" are using deception to lure clueless people in.

This would look way better on actual canvas; right now the demo is just a IMG tag that changes it's z-Index really fast; not an smart way to do it.