27/04/2016

You stole my images and now youre going to die

July 11, 2014

You stole my images and now youre

going to die
Estimated reading time: 5 minutes ( save for later )

This is the accompanying article to my talk about Image Protection on the

web at Vienna.JS. You can find the slides here, but the article contains more
information.
Also, please check out my comment on HN about how I think about those
techniques
For a few minutes, lets assume things on the web should be
protected
I recently came across a thread in an online forum about photography with
the title How do you deal with image theft on the internet?. Opinions varied
from sue the hell out of them to you need to protect your property properly
Overall they seemed pretty overprotective and I thought seems like there is
a problem lets solve it for fun and profit

What is the problem?

The problem is that people on the internet copy stuff without attribution. That
pisses artists off because they worked hard and need to make a living too. (
this is not only a problem for regular artists, but also if you published code
[as code artist ;) ] and someone just stripped off your copyright notice
looking at you FIFA.com *cough* )

So how do people solve image protection currently?

Watermarks
http://www.patrick-wied.at/blog/image-protection-on-the-web

1/11

27/04/2016

You stole my images and now youre going to die

Let me ask you a question: Can you enjoy the beautiful sunset in the
image?
If youre not some kind of watermark fetishist I bet you cant.

Watermarks are not a great solution to the problem of image

protection.
I see the value for branding purposes, but thats it. Mostly they are just ugly.

The Challenge is
1. to preserve the beauty of art online AND
2. to calm down overprotective creators
So my goal was that users should be able to see the full beauty of images
but not be able to steal it.

Another commonly implemented technique to prevent users from copying

images is the following:

The Invisible Wall

This concept is very simple. Users get
the impression to save an image, but
they are clearly not saving anything
except a 1px transparent image.

Web developers achieve it by placing

an invisible overlay (stretching the 1px
to image size) over the original image.

But what if your potential thief IS a web

developer?

Try the demo.

That was too easy. We can do better!

Lets shortly sum up what parts we have to look closer into:

server response
clientside DOM

Serverside Encryption
Clientside Decryption + Invisible Wall
http://www.patrick-wied.at/blog/image-protection-on-the-web

2/11

27/04/2016

You stole my images and now youre going to die

With this technique you encrypt the image

to serve on the server (for example: swap
every nth pixel) and decode it on the client
with JavaScript and HTML Canvas.

Whenever the user saves an image with

right click he saves the 1px overlay image.
If he tried to get the image path from the
DOM (or network) he only gets an encrypted image.

But
If the user knew a few things about HTML Canvas he could get it with
canvas.toDataURL() which returns the canvas data as a base64 encoded
string.

Low hanging fruit: unset toDataURL()

This is ugly, but helps to prevent to user from getting the image with
toDataURL (be careful, this could affect the result of other scripts on your
website). Simply unset it:
1
2
3

// wrapping it to fit in this container..

HTMLCanvasElement
.prototype.toDataURL = function() {};

Try the demo

After all my optimization work I received a message from a fellow web

developer claiming to know how to bypass all my protection efforts:

I can take a screenshot and you can do nothing about it

bummer. Were all the image protection efforts really worthless?

Challenge Accepted!

Now its getting interesting

and hacky utilizing the laws of physics! :D

I thought about the problem constraints again and had an interesting idea.
Displays usually refresh at a rate of ~60 Hertz which is 60 frames per
second, or a frame every 16ms. But our eyes dont send all 60 frames a
second to our brain, they are okay with 24fps to perceive motion, so why not
trick our eyes for good :)
http://www.patrick-wied.at/blog/image-protection-on-the-web

3/11

27/04/2016

You stole my images and now youre going to die

The initial idea was to let the image blink with a very short pause interval to
increase the probability of taking a screenshot of the empty image. It kind of
worked, but it wasnt stable, and you do not want to rely on probabilty when
you protect an image. After that, I fortunately I had a nice chat with
@siegpuchbauer and he suggested another great idea:

Good Old Interlacing

With the idea of hiding the image every
nth fraction of a section in mind I built a
demo that splits up a single frame into
two frames (one with even lines, and
the other one with only odd lines).

Swapping those images with a high

refresh rate makes it look as if it
was the full image,
(even + odd lines) but its not!

If a user now tried to take a screenshot

he would get either only an image with odd lines or an image with even lines.
YAY!

Try the demo !!

Was it all worth it?

No! Although it was fun to think about the problem and kind of solve it I think
it was definitely not worth all the hassles.

IMO when you put art online you do it with an intention:

The intention to reach out to (almost) the whole world so people can
recognize you and your art. (exposure.)

Sure, there is a downside that people could copy your images, but if you
look at it from a more economic perspective the risk to get a picture stolen
every now and then is totally worth it when every time you upload an image
you increase your international reputation.

What do you think?

Do you think those techniques are worth it? Why and When? Do you know
another technique? Id love to hear in the comments!!

http://www.patrick-wied.at/blog/image-protection-on-the-web

4/11

27/04/2016

You stole my images and now youre going to die

Related Articles
This trick made visual communication easier for me
Your Portfolio: Choose Wisely
Getting physical with Productivity
How to create Audio-Visualizations with JavaScript & HTML

Leave a reply
47 Comments

Patrick Wied /blog/

Share

Recommend 4

Login

Sort by Best

Join the discussion

Fitzroy

2 years ago

Valid points. One can also easily remerge the interlaced images in Photoshop using the
'lighten' blend mode to combine the interlaced layers (assuming they're interlaced with
black).

14

Reply Share

David > Fitzroy

6 months ago

To be honest, I see no valid point in technics presented here. There's no way to

get rid of print-screen. And for god sake: that interlaced thing is ugly. Y ou can
see image flipping and it burns your CPU to hell. Even if the user is dummy
enough to not destroy this JavaScript, he could easily take 2 screenshots and deinterlace images with an image editor.

Reply Share

pa7

Mod > David 6 months ago

Hi David! have you read the section "Was it all worth it?" that's the part
most commenters missed :( I don't support using any of those
techniques. Also they don't *really* solve the challenge to protect images

SQDB

Reply Share

2 years ago

Nice thought but if I can see it I can copy it. Period. There is no way around that.
16

Reply Share

oGMo > SQDB

2 years ago

$ import file.png
*click*
Copied.

Reply Share

Lethic > oGMo

2 years ago

Did you even read the article?

http://www.patrick-wied.at/blog/image-protection-on-the-web

5/11

27/04/2016

You stole my images and now youre going to die

Did you even read the article?

11

Reply Share

Ben E > Lethic

2 years ago

Firefox on Mac: right-click, View Page Info, Media tab, save

image...
Here it is...
1

Reply Share

Guest > Ben E

2 years ago

This works perfectly.

Reply Share

Ben E > Ben E

2 years ago

Sorry:

Reply Share

oGMo > Lethic

2 years ago

Wait, you mean he was serious about the interlacing shit?

Let's put it this way: no one who has a quality image is ever
going to be caught dead using that technique, and assuming no
one gets a seizure just looking at it, everything else can be safely
ignored (or subverted reasonably trivially with PS, Gimp, or a
script).
"Did you even read the article?"
From the article: "Was it all worth it? No!"
Did you?

Reply Share

Jonathan Bernard > Lethic

2 years ago

Whoops. Just using Windows 7, Paint, and the Print Screen

button on your keyboard...

Reply Share

Jonathan Bernard > Jonathan Bernard

2 years ago

To be clear, yes, this is degraded, but not much more than what I
see with my eyes in the demo.

http://www.patrick-wied.at/blog/image-protection-on-the-web

6/11

27/04/2016

You stole my images and now youre going to die

Tyler Eaves

Reply Share

2 years ago

Gee, not that idiotic and wrong "24 fps is enough for motion" meme. It is 100% wrong.
24fps is marginally acceptable for film because you get REAL, NATURAL, motion blur.
4

Reply Share

pa7

Mod > Tyler Eaves a year ago

you're right

systemd

Reply Share

2 years ago

As an alternative to the even/odd lines, you could probably make use of CSS's new
blending-mode property and link to an image that only looks correct when it's
underneath a solid layer of black or white in a specific blending mode. Of course, that
would only allow newer browsers to view your image properly.
4

Reply Share

pa7

Mod > systemd 2 years ago

Hey! the CSS blending-mode technique sounds interesting, but I think this
would rather be an alternative to the Encryption / Decryption technique than
the Interlacing stuff because with CSS blending-mode you can still take a
screenshot
2

Adrian Sinclair

Reply Share

2 years ago

What you are looking to do here is DRM. First of all, don't do it. All the standard
arguments against DRM apply, namely: it degrades the experience for legitimate users,
poses only an obstacle to malicious users, and by necessity can always be
circumvented. But here are some ideas that might work:
Y our interlacing example flickers, there's no doubt about that. I'm not sure if that can
be avoided with javascript, since timeouts are not very accurate, but the biggest source
of flicker is that you chose 24Hz. As you said, (most) monitors refresh at 60Hz (high
end gaming monitors have 120Hz refresh rate and people using TVs as monitors will
have 30Hz). Since 60 is not evenly divisible by 24, occaisionally (every 10 frames, just
under twice per second) the interlacing will get out of sync for a frame and cause a
flicker. Y ou can solve this by using 30Hz refresh rate. For more information, look up
Vsync, which is a somewhat related technique in computer graphics for avoiding
screen tearing.
Interlacing can still be circumvented by taking multiple screenshots and then
superimposing them in an image editor.
A somewhat popular technique for preventing digital piracy of images and videos
see more

...........

Reply Share

2 years ago

Some of these techniques kill your chances of getting traffic from Google Image
Search. Depending on the person they may or may not care. In my case I use a small
subtle watermark on the smaller versions and a more prominent watermark on the
1600px and larger versions. If someone wants to protect their images I suggest they
also register the copyrights on them.
2

Reply Share

randomstuff

2 months ago

the refresh rate kitten makes my head really hurt. plus, you can see weird lines on most
monitors

Reply Share

Sandeep

2 months ago

Loved your efforts on a thing, which is almost impossible ;)

http://www.patrick-wied.at/blog/image-protection-on-the-web

7/11

27/04/2016

You stole my images and now youre going to die

Loved your efforts on a thing, which is almost impossible ;)

Helen

Reply Share

3 months ago

That's SO cool!

Maad

Reply Share

7 months ago

1. why do you upload pictures and set it visible by everyone if you don't want to share it
? seriously this is the internet !
2. that doesn't work at all, just check information on the page and take the image full
rez without photoshop edit
3. if you really want to show pictures without people can take the picture, know that's
impossible and internet wasn't thinked in that way...

Reply Share

anonymous

9 months ago

This will prevent pepole from downloading the image but they still can tame a
screeshoot of it. It's useless

Reply Share

Truth

10 months ago

If you could figure out a way for a home user to apply this to their Facebook cover
photo, which is public by default, I think it would discourage hackers (who thrive on
volume) enough to move on to more opportunistic targets.

Tushar

Reply Share

a year ago

In the first two demos I edited the HTML in Firebug and removed your overlapping
transparent image. Now I can easily access your original image on my browser
directly.
The interlacing hack only degraded the quality.
Sigh. The problem wasn't solved in the end.

Reply Share

lousy tutorial

a year ago

Y our anti-screenshot interlaced image DID NOT WORK! I snagged your image twice,
once with hypersnap using the rectangle tool and another time with the printscreen
key.

Reply Share

pa7

Mod > lousy tutorial a year ago

like almost all other commenters here you didn't get the point of the article. this
is not really a how to that should help you protect your images. It suggests that
it's ridiculous to try it because it's not worth all the hassles.

mutazhameed

Reply Share

a year ago

about screenshots, i just thought how about js key listener and when user presses PrtSc
key the listener sends to clipboard something else like "screw you" text string to override
screenshot. mmmm... but still user can use another sniping tool..

Reply Share

Michael Toner 2 years ago

http://www.patrick-wied.at/blog/image-protection-on-the-web

8/11

27/04/2016

Michael Toner

2 years ago

You stole my images and now youre going to die

I looked at the interlace pic for 5 seconds and I now have a sore head. I'm not even
joking. I used to suffer from epilepsy and that option is dangerous (remember all those
Japanese school kids that watched a flickery cartoon?).
I'm thinking about the same sort of thing and whilst there's no silver bullet just yet, it
all helps.
1. I'm gonna have a program split the image into smaller squares and produce a html
table featuring the squares. Any browser cache would be painful to assemble.
2. The possiblity of a flash control which loads the image but given that many mobiles
can't handle flash, this might be ruled out.
3. An animated gif (where 256 colors isn't an issue). The first frame would be blank and
appear for the shortest time. If they do save the image, many standard paint programs
and image viewers don't realize its animated and will only show the first frame - a
blank box.

Reply Share

Alexey Zelenkin

2 years ago

What about the following technique?

Secure publishing:
1. User encrypts the original image using his own unique key
2. User creates a preview of this image (same image of lower quality or another image
with words "protected" or whatever)
3. User combines the original image and its preview and uploads this result file to
public hosting service
4. Even if somebody copies the file, he will have access only to preview, not an original
file.
Secure sharing:
1. User encrypts the original image using his own unique key and specifies persons,
who can decrypt this image, using their unique keys.
2.User creates a preview of this image (same image of lower quality or another image
with words "protected" or whatever)
3. User combines an original photo with its preview and uploads this photo to any
public hosting
4. Then he sends link to his friends and they are able to decrypt this file and see the
original photo

Reply Share

Tchael Clark

2 years ago

Can still screenshot the cat. ;) Although that would pose an argument of whether or
not you were meant to prevent a single screenshot from capturing the image or make it
impossible to screenshot the image at all.
If you want image protection on the web, simply don't upload the image. Easiest way!
Best way to protect your art would be to have proof of ownership and use something
like Tineye or Google's reverse image search, periodically search for your own artwork
and threaten to sue people who have stolen it.

Reply Share

fede

2 years ago

Y ou didn't hear about that Pokemon episode, didn't you?

Reply Share

Thomas

2 years ago

While copying images without attribution is an issue, I'd say interfering with the
screenshot feature or the image saving feature is a big user experience no-no. Not all
users fail to cite their sources and to strip away basic browser functionality would chase
me away from a given website--even if it is counter-hack-able.

Reply Share

dbrower 2 years ago

http://www.patrick-wied.at/blog/image-protection-on-the-web

9/11

27/04/2016

You stole my images and now youre going to die

dbrower

2 years ago

I have this phone in my pocket that will take pictures of pretty much anything,
including computer screens. The efforts being made here seem a fool's errand, where
the solutions seem much worse than the asserted problem.

Joe

Reply Share

2 years ago

With a mac: Shift+command+3 screenshot.

Reply Share

chai guy

2 years ago

the problem with the last solution: 1. it flickers. yes, it really does and it is annoying.
also i wonder about the performance with larger images. and what about larger retina
pictures? 2. what about users that don't have javascript enabled?

Reply Share

Matteo Pagliazzi

2 years ago

// wrapping it to fit in this container..

HTMLCanvasElement
.prototype.toDataURL = function() {};
Y ou can use the debug functionality in most browsers to "edit" the code run on the
page so that this part is not run and you can still access toDataURL :)
(I'm having problem with your demo page and Chrome because it looks like I'm not
able to edit inline scripts but only the ones loaded from another file but I'm sure there's
a solution)
But good article, I would have never thought about everything this!

Reply Share

mattaustin

2 years ago

Great writeup and some good ideas! On the toDataURL overload the user could just
create an iframe and "barrow" a new reference to the function:

d=
document;d.body.appendChild(document.createElement("iframe")).contentWindow.HTMLCanvasElement.prototype.toDataURL.apply(d.ge
[0]);
(only tested in chrome but should work on others...)

Reply Share

Shelikhoo

2 years ago

Although this kind of technique significantly increased the difficulty of copying image
on the web. As browser can display the the image, specially designed script can do it as
well. Do exactly as browser did, excepted for export image instead of display.

asdf

Reply Share

2 years ago

Doesn't the browser render the images a lot more frequently than the monitor displays
it? So you could interlace it 400 times a second and maybe have 4 images that looked a
lot better.

Reply Share

Henri Tuhola

2 years ago

Got my laughs about your last "solution".

This seems slightly the wrong problem you're trying to solve. Assertion of authorship to
particular image is the thing that might be useful for your audience. Having a history
of the work process & similar works might allows asserting that you made the thing.
If you're going to study that angle, check some plagiarist's workflows from youtube.
The account drawfd seems to be a good spot to start. Then try find some professional
artists workflows to compare, you might notice they're using different references, in
different way. Overall you might see a difference between photocopier machine and a
creative individual.

Antonio

Reply Share

2 years ago

There is no way to prevent your images from being copied by someone determined. The

http://www.patrick-wied.at/blog/image-protection-on-the-web

10/11

27/04/2016

You stole my images and now youre going to die

There is no way to prevent your images from being copied by someone determined. The
best you can do is degrade them with watermarks. Otherwise you're just adding slight
annoyance to the person breaking your protection. No way to win that battle.

Reply Share

pa7

Mod > Antonio 2 years ago

you shouldn't even want to fight that battle, it's just not worth it!
What's on the Internet should be fully consumed by users of it. More exposure > more reputation :)

mnault

Reply Share

2 years ago

Whatever you try.. get Chrome, inspect element, then right-click the image from the
debug code and open in new tab. you got your image.

Reply Share

Jan Segre > mnault

2 years ago

It's like you didn't read it at all.

2
phaed

Reply Share

2 years ago

It's all worthless when I can take a screenshot and take the image that way.

Reply Share

pa7

Mod > phaed 2 years ago

indeed, it's all a matter of expectations :D

Reply Share

ALSO ON PATRICK WIED /BLOG/

Getting physical with productivity

2 comments 2 years ago

Fiki Firmansyah I categorized Kanban

How to create Audio-Visualizations with

JavaScript & HTML
18 comments 2 years ago

project by Color. Yellow = for Personal

Reminder/project. Blue = All About

Subscribe

Add Disqus to your site Add Disqus Add

http://www.patrick-wied.at/blog/image-protection-on-the-web

pa7 what an insightful and well phrased

comment, but I'd rather appreciate useful

feedback so I can improve and make you

Privacy

11/11