Tips and Techniques to Protect Images on the websites

Protecting Images  
Put plain and simple: the only way to protect your images from being downloaded or stolen off a web page is to not put them online in the first place. While I put this fact out there as blunt as possible, there are several techniques we can use to make website downloads and image theft much harder. Of course, image theft can be defined in a number of ways, and its definition – and hence measures (if any) taken to prevent it – will depend upon the individual.
If you are interested in knowing whether unauthorized downloading and use is illegal: many websites will have an image use statement, and it is best and safest to ALWAYS ask the artist for permission. Ultimately, the default for image downloading and usage should ALWAYS be “All Rights Reserved” (eg don’t use without permission).

Image Protection with a Watermark
The most common, and possibly strongest, image protection technique is to place a visual copyright watermark on the image. Image watermarks come in a range of styles: from a full copyright symbol across the image to simply small text in the corner of an image containing the copyright symbol, date, and name of the copyright holder. There is a trade off with watermark size: the larger the watermark the less likely one is to download or steal the image, but the larger the watermark the more of a visual distraction it becomes.

Javascript Right Click Disable
Another measure to prevent right clicks on images is to use Javascript. These short scripts over-ride browser right clicks. Rather than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click. I will however mention that Javascript is client-side, and scripts such as these can not only effect the usability of a website, but can also readily be disabled by turning Javascript off.

Event on the HTML body element
There is a common feature of modern browsers where a user can select some text and drag it to an input field. Within the same field it causes moving of text, between different fields it does copying.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8 />
<title>Your website</title>
</head>
<body ondragstart=”return false” onmousedown=”return false”>
<header></header>
<section></section>
</body>
</html>

The ondrop event is cancelable, if it is canceled, the default action is not performed. For example, if a file has been dropped into the browser window, the default action is that the browser tries to open the file. If you want to prevent that behavior in your document, cancel the ondrop event on the body element

Comments