Preventing web images from being taken

Question

I've been looking around to see if there exists a good way to prevent viewers from using their right click options to download images that I upload to my website. I know that people can look at the image url in the page source, and was wondering if you suggest a way to prevent them being taken, by disabling the save image option.

Answer 1

You can try this...

onload=function(){
document.oncontextmenu=function(){return false;}
}

This will disallow the operation of the context (right mouse button click) menu...

If a user knows what they're doing they can get around this, though.

Answer 2

If you want to make it even more difficult, do not use an IMG tag. Instead, define the image using CSS with the property 'background-image'. To make it even more tricky, define that property at runtime using JavaScript that was placed on the page using base64 encoding.

Answer 3

I suggest not doing this. It's annoying and you're not actually protecting yourself.

If you must, jQuery makes it pretty easy to disable the right click menu:

    $(document).ready(function(){
        $('img').bind("contextmenu",function(){
            return false;
        });
    });

Answer 4

This is an unsolvable problem.

As long as you actually want people to see the images, you cannot prevent them from saving them via a number of methods (e.g. screenshots). All measures you might think of will just annoy your users, without actually preventing them from doing what they want anyway. Also consider that the people watching those images will have some interest in them (otherwise they would not watch them in the first place), so there we already have a motive for them to keep a copy.

The only way to reliably prevent people from saving the images is to never let them copy them onto their computers in the first place (and remember: showing something on another computer always entails making a copy).

One solution could be to invite people into a place where they can view the image on a screen which you control, and not let them take any pictures. Think of modern cinemas where security people with night sights watch the spectators and pull out those who might have been handling any camera like device.

Answer 5

Just make your images so ugly no one would want to take them.

Seriously, what are you worried about?

Answer 6

If you use the Microsoft Ajax Seadragon Deep Zoom viewer for you images then you can present your images as lots of overlapping tiles - a real pain to stick back together, difficulty depends on images size, but for hi-resolution images it makes 'printscreen' the only option for those wanting to steal stuff.

Incidentally the contextmenu thing works on divs better than images (things bubble) and you don't have to offend people by doing no click on the whole document.

To do it by class, e.g. with Prototype:

$$('.your-image-container-class').each(function(s) {s.oncontextmenu=function(){return false;}});