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 …”.

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.


💬 internet 💬 webdev