Restrain image use

Question

I've found out multiple methods on how to prevent image theft.

Currently I stick with this one (jQuery based):

$('img').bind('contextmenu', function(e) {
    return false;
});

Which disables contextmenu on images.

There are 2 solutions I can think of right now, but don't know if it's a good way:

Prevent stealing through inspecting source-code:
Maybe there is a solution that loads the image but doesn't leave the link in source-code?
I think of an empty image tag that get's it's source loaded with jQuery.

Prevent stealing through inspecting network (from development tools) :
Maybe the image can be loaded as an base64 encrypted image?
For example: My page requests the file base64.php?i=flowers.jpg and this page returns the flowers.jpg as an base64 image.

What do you think about that?

Good luck with that. I can just look at the Network tab of my Developer Tools, find the image, and save it from there. — Niet the Dark Absol, Oct 17 '13 at 08:07
You can go through as many options as you want, but the image will be downloaded to the browser cache anyway, and be accessible to anyone who knows where to look for on the hard drive. And just like @NiettheDarkAbsol is saying, it's fairly easy to grab it using any browser developer tools. — emerson.marini, Oct 17 '13 at 08:07
A canvas-based solution would be more obfuscated than plain `` elements, then again not all browsers support ` — Frédéric Hamidi, Oct 17 '13 at 08:08
You can not “hide” something in the DOM if you want it to be part of the DOM. Besides that I might have other uses for the right click menu, apart from “stealing” your precious images – which is why I have simply set my browser up to ignore dickishness of site authors concerning the right click as the one that you show here. — CBroe, Oct 17 '13 at 08:09
heck even if u did something like render the image in a canvas a simple screenshot would foil that. — Rene Koch, Oct 17 '13 at 08:09
i think there even is a image to div-pixel converter but i cant find it — john Smith, Oct 17 '13 at 08:09
You can [try to base64-encode](http://danielmclaren.com/2008/03/embedding-base64-image-data-into-a-webpage) it, but that requires some work on the server. — sjngm, Oct 17 '13 at 08:10
a long discussion around this is here...http://stackoverflow.com/questions/1294501/how-to-prevent-downloading-images-and-video-files-from-my-website — Nikhil N, Oct 17 '13 at 08:10
IMHO best solution is to present the image as a background image instead of ``. That prevents casual copying by non-techies (can't right click->save as) and you don't piss off users by disabling standard browser functionality. — JJJ, Oct 17 '13 at 08:11
If you're using a server-side solution (ASP.Net, PHP, etc), you can stream the image from the database (where it would be stored in binary format), but that's just to make it a bit harder to copy. Not impossible. Just forget about that. — emerson.marini, Oct 17 '13 at 08:12
You could watermark your images, that way at least if they are stolen (which you wont be able to prevent) then they are ultimately linked back to your site. — DGibbs, Oct 17 '13 at 08:13
Yes. Much as I don't like watermarks much, they're a better solution than pissing off your users by changing their normal right-click behaviour. (Speaking as a programmer and a photographer...) If your business will suffer by your images being stolen from your website, change your business model, not your website. — Matt Gibson, Oct 17 '13 at 08:16
Good luck. I always use the Windows Snipping tool to do all my image robbing. I think I might not be alone. ;-) — Tim Rogers, Oct 17 '13 at 08:23
@TimRogers I guess we can find a solution for that -> When tabbing out of the window, make an overlay for the image as a watermark. — Peter, Oct 17 '13 at 10:33
@MelanciaUK I don't want to make it impossible. Just make it harder. — Peter, Oct 17 '13 at 10:34
@PeterI It's like trying to print a magazine and prevent people tearing out the pages. — Tim Rogers, Oct 17 '13 at 10:38
@Nikhil No this is not the same topic. I don't want to make it impossible. I want to restrain visitors. I know it is not completely possible. So let's talk about best restrictions :) — Peter, Oct 17 '13 at 10:57

Tats_innit · Answer 1 · 2013-10-17T08:51:58.093

Okies I have to put this as an archive: :) hope this gives you direction, let me know if this doesn't help and I will remove it.

By doing (Jquery contextmenu brute forcing) what you have mentioned in your question you are only prohibiting the rightclick approach there are many more ways to get to the source of your image.

There will not be one silver bullet solution to this.

You can always get design team to make image in pieces and then you can join them together.

Checkout image hotlinking http://www.hongkiat.com/blog/smarter-way-to-prevent-image-hotlinking-with-htaccess/

read this to start with: http://www.davidairey.com/stop-image-theft-hotlinking-htaccess/

Redirect links from external sites to your "DON'T STEAL" graphic. The technique is an addition to your .htaccess file in the root directory of your site.
Add a big copyright to your image, then crop it out on your own site.
Include the image as a CSS background-image

few tricks here

http://css-tricks.com/how-to-steal-a-websites-background-image/
1. Some AWFUL (and non-effective) techniques

Disable right-click with Javascript.

 jQuery("img#jquery_test_image").bind("contextmenu", function(e){ return false; });

or

jQuery("img#jquery_test_image").mousedown(function(e){ return false; });

Since many thieves likely use the right-click, save-as technique for grabbing your images, this might stop them for about 2 seconds. This doesn't prevent click and drags and is more annoying/harmful than anything else. Copyright / Watermark your images.
Great, I get to chose between making my image look like crap or having a tiny copyright that will get ignored or cropped off anyway?
Slice your images up into pieces and display them in a table. What is this, 1999? I know that manually adding a copyright underneath images like up in #2 is a little work too, but this is WAY too much effort for any one image.
Make your images Flash
Put A Blank File Over The Real Image

Reference

http://css-tricks.com/techniques-for-fighting-image-theft/

http://www.webresourcesdepot.com/10-ways-to-protect-images-from-being-stolen/

Ron van der Heijden · Accepted Answer · 2013-10-17T13:01:51.490

0

First rule about media on website: What you can see, You can download...

If you want to disable context menu's for images, you don't need jQuery.

It can be done easily using <img oncontextmenu="return false;" src="" />

Example: http://jsfiddle.net/GpJbU/

If you realy want to use jQuery you could use:

$('img').on('contextmenu', function(e) {
    return false;
});

$('img').on('mousedown', function(e){ 
    if( e.button == 2 ) {
      return false; 
    }
});

Example: http://jsfiddle.net/sPdn6/

Edit

Using the base64 including preventing a context menu you could look at this example: http://jsfiddle.net/WfFxb But if you hit F12 (Developers tool) and check the "Network" tab you can still download this image. Thought, it is hard for a novice.

edited Oct 17 '13 at 13:01

answered Oct 17 '13 at 10:35

Ron van der Heijden

14,803
7
58
82

This is a great information. Would you add some thoughts about my other ideas? – Peter Oct 17 '13 at 10:54
You cannot disable inspecting the source. Like I said: What you can see, You can download. Even if you use a base64 encoded style you can just open the link and rightclick that file and save it. – Ron van der Heijden Oct 17 '13 at 11:10
Sure I don't want to disable inspecting the source ^_^! But save a base64 string into an image is way harder then right-click copy image address! – Peter Oct 17 '13 at 11:28
That is not true. Try to save this red dot for example by pressing the `Save image as...` link http://jsfiddle.net/hpP45/ – Ron van der Heijden Oct 17 '13 at 11:38
No you've got me wrong. I mean if there is an overlayer on top. ;) And without contextmenu? – Peter Oct 17 '13 at 12:10
Using the base64 including preventing a context menu you could look at this example: http://jsfiddle.net/WfFxb/ But if you hit F12 (Developers tool) and check the "Network" tab you can still download this image. Thought, it is hard for a novice. – Ron van der Heijden Oct 17 '13 at 12:33
Embedding the image via data-URI does _nothing_ in preventing me from saving it via the right-click menu in my browser … – CBroe Oct 17 '13 at 12:59
It does, because you can't use your context menu. But @Bondey would you please add this to your question, then I will accept it. – Peter Oct 17 '13 at 13:00
Ok, I've added the comment to the answer. – Ron van der Heijden Oct 17 '13 at 13:04

Restrain image use

2 Answers2