Tricks to fight right-click image copying


An image like the one on the right (using the standard <img> tag) can easily be copied by any visitor: right-click the image and select “Save Picture As” or “Copy Image”. In cases where the author wants to protect his images from copying, there are a couple of ways to make the copying harder. Not make it impossible, just less trivial.
The fact that you can get the image by checking the HTML (“View Source”) is something that is difficult to avoid, and in any case, the vistor could always take a screen shot and trim the result to have only the image. So I’ll just focus on disabling the “Save/Copy Image” functionality.

Remark: there are ways to make all Right-Click functionality inaccessible. I think this is a bad practice (for the reasons, check jeffdav), so I will not cover these methods.

Trick #1: Table Background

You use the image as the table background: <TABLE STYLE="background-image: url(...)">. If you do just that, the “Save Picture As” option goes away, but a new “Save Background” is created. So you cover up the image by placing a transparent gif before it, in the <TD> cell.

The end effect is that is looks like you can copy or save the picture, but you will be saving the GIF file.

Remark: you have to explicitly specify the dimensions of the table, it will not autoscale to the size of the image.


Trick #2: Div Background

You can do basically the same thing with a <div>: you use the picture as the background image, and you put another <DIV> above it with the transparent GIF.

You would again need to specify the exact dimensions of the whole thing, but wait, there’s another trick: put the image in an <IMG> tag inside the second DIV and give it a visibility: hidden. This way it takes up the size of the picture without actually showing up, or appearing right-clickable.


Trick #3: Flash image

The third is a no-brainer: using a Flash object. Almost 100% of browsers have Flash built-in, so compatibility problems are limited. For the exact OBJECT and EMBED, check the HTML source of this text or the Macromedia site.
Here also, you need to give the right dimensions to the Flash object, otherwise it will take a default (square) size.

Remark: using the menu="false" option ensures that the only options showing up on a right-click are: “Settings…” (disabled) and “About Macromedia Flash Player …”.


Conclusion

It is possible to use some simple tricks to make right-click copy or save functionality impossible. I wouldn’t go as far as to call this ‘copyright protection’, but it helps. At least no one can claim they just copied it because they thought it would be OK.
I used the last option (Flash) on my Tango Steps site, to protect the images I use from my teachers, Marisa and Oliver.

Technorati:

3 thoughts on “Tricks to fight right-click image copying”

  1. Hi Peter
    I have come across one instance when trying to save the image by right-clicking grid lines appear and when the item is saved all that shows after opening it again are grid-lines. How is that possible?

  2. hmm…

    if i want an image, i’ll get it…
    why is there a source ?
    unless you use any degree of encryption, but that will slow down your server… server with rootaccess required…

    and if i am too lazy to look at the sourcecode i just save the webpage… eventually even with an opensource tool like ‘getleft’

    actually i am not intrested in images or someother non cc-content, but (s)he who wants will get it…

  3. Also, there’s another method that all of these tricks are useless against, just thought you might like to know. If the person copying, say, a picture, presses the Print Screen button on the keyboard, it will save a picture of the screen as it was, which can then be opened in a program like MS paint or photoshop.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.