Stop People Stealing Your Pictures!

It's easy for a visitor to copy a picture from your web page. In Internet Explorer, for example, a right-click on the picture opens a menu offering the options to Save Picture As..., Copy, and even Set As Wallpaper. The other major browsers have similar options. But what can you do if you don't want people using your pictures?

Various different approaches have been used but none are foolproof. A knowledgeable user can dig the image file out of the cache (IE calls it the Temporary Internet Files folder). So you can stop the files going into the cache in the first place with the appropriate command in your meta tags. Your clever user will then ask IE to save the page then they will fish the picture file out of the folder that IE creates. Face up to it... if they really want your pictures they are going to get them!

Don't give up! Most surfers have never heard of the cache, let alone know where to find it, and wouldn't know what to look for when they got there. Those same people probably don't know that you can save a page, and wouldn't realise that they can then easily retrieve the pictures with Windows Explorer.

So lets assume that we are going to protect your pictures from copying by the "average user". Take a look at these two lovely pictures of me...

Unprotected picture

Right-click on the left-hand one... the usual menu appears and you can save it if you like. Now right-click on the right-hand picture. No menu! Instead a friendly message.

First, here's the regular code for the picture:

<img border="0" src="../images/me_lg.jpg">

Now the code for the protected picture:

<img border="0" onmousedown="nocopy()" src="../images/me_lg.jpg">

The onMousedown event of the image is used to call a JavaScript function that I have called nocopy(). This function has been placed in the <head> section of the document's code. It looks like this:

<script language=javascript type="text/javascript">
<!--
function nocopy() {
if (event.button==2) {alert ("Sorry! You can't copy this picture."); }
} 
-->
</script>

The onMousedown event happens when the user clicks the mouse. We are using the onMousedown event of the image we want to protect, so this protection applies specifically to that image and nothing else. If the onMousedown event of that image happens, the nocopy() function runs. It checks to see which mouse button the user clicked. If it was the secondary button (button 2 - the right-button if the user is right-handed) they get a message instead of the usual menu. In effect, we have disabled the context menu for this image.

Graphics theft, and infringement of intellectual copyright is a big problem for business. This method isn't foolproof, but it's going to deter the casual user. As for me... if it's here, you can have it (just credit the author please!).

^ top

Hit Counter