Protect Your Images (With No JavaScript)
Published on the 30th of January 2005
Skip to the Table of ContentsIf you have an art gallery or some other form of graphics site then you probably wont want people to be stealing your images. I am going to take you through ways you can protect them.
Note: The measures here will only protect images so much. People with the right knowledge can still get them quite easily but methods are as good as the JavaScript methods.
Measure 1 - Disable Highlight
One way that people can steal images is to highlight them in the browser and simply drag them into a word document. To stop this you can simple add a few parameters to the <body> tag.
XHTML
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
Well with that there one problem is fixed.
Measure 2 - Disable the Very Annoying IE 6.0 Image Toolbar
Well this is the most annoying part of IE if you want to protect your images. All people have to do is hover there mouse over your image for a second or two and then press the save button, no right click involved. This is also the easiest to solve; simply add this code to the header (<head></head>) area of your page, and it will be no more.
XHTML
<meta http-equiv="imagetoolbar" content="no">
Simple or what?
Measure 3 - Images As Background
This is another simple one. To stop people right clicking on your image and saving it you could just use a JavaScript right click stopper script. The only problem is that all browser's have a function to turn off JavaScript and there for leave your images unprotected. There is an easy way to achieve the same thing. Simply set your images as the background of a cell and have a transparent gif or png in the cell. Therefore when they click save as they get a blank image. Here is an example for you:
XHTML
<table>
<tr>
<td background="mum.jpg">
<img src="blank.gif" height="700" width="500">
</td>
</tr>
</table>
blank.gif is the transparent image and mum.jpg is the picture you want to protect. Because it's 500×700 blank.gif is set to that so the cell is the right size. You can use div's instead of tables if you need to.
