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?

Answer 1

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.

Answer 2

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/

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

2. Add a big copyright to your image, then crop it out on your own site.

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