How to prevent images from being copied from my website?

How to prevent images from being copied from my website?

Prevention of right clicks, is what I would recommend. This is because the right click produces a menu that allows users to do various options. All browsers give the option of saving the image onto the computer when the right hand mouse button is clicked on an image. The most common option is "Save Image As".

The following screen shot shows the options in browsers such as Google Chrome, Firefox and Internet Explorer. All allow saving of the respective image via this special menu. You can insert the following code to prevent the right click button.

WARNING: The code is downloaded from the internet. It may or may not work but worth giving it a try! It shows an alert box whenever the right button is pressed. This effectively cancels the context menu from appearing.

<SCRIPT LANGUAGE="JavaScript1.1">
<!– Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Sorry, you do not have permission to right click.");
return false;
}
return true;
}

document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
//  End –>
</script>

How to prevent images from being copied from my website?

Put a transparent image layer on top of your image. This technique requires JavaScript and positioning of layers. You can have a layer with a transparent gif image about the same size as the background image, with around five pixels larger around the borders.

This is like putting a "Window Frame" in front of your image. You can use the "z-index" property to set the layer ordering. 

The div tag holding the transparent image need to be "on top" of the image container. Therefore, you may need to use absolute positioning to "fit" the window. The following illustration attempts to show what I mean.

When the web user clicks on the image, he is actually clicking on the transparent image and not your actual image. Therefore when the user selects to save the image, he actually saves the transparent image and not your original image.

How to prevent images from being copied from my website?

Use CSS and put all your images as background images. This totally prevents users from saving the image using the mouse button. This is because the CSS engine paints the bitmap onto the screen and does not create a window handle like the img tag.

You will need to redo your layout as such to have the place holders the same size as the image. If you are using a table structure to hold the images, then you need to fix the width and height of the table divisions to be of the same size as the image. You then set the style attribute of each table division by using the following CSS attribute:

background-image: url(your image) no-repeat

The above code states to generate the background using the image specified by the URL and not to repeat it. This allows you to safely use your images, as a background rather than putting it in the foreground.

How to prevent images from being copied from my website?

Thank you experts for your suggestions. I have one unique problem though. I am using a off the shelf product for the website and the pages are encoded! I have no way of modifying the source code. Do I have a choice in this matter at all? The facilities available by this product is only uploading of the images and managing the subscriptions and promotions. It is really hitting the bottom line when I see my images being used in other sites.

How to prevent images from being copied from my website?

You can tag the images with properties such as author and copy write information. JPG images allows tagging of additional meta data such as location, camera type used, focus length, etc.

You can embed your information into it so that you can detect if an image used as is yours or not. However, if the image is edited, this information may be wiped out.

Therefore, I feel that the watermark solution is the best recommended method, if you only have images to play around with. You can use a  third party server side image generator engine, to automatically embed your water mark when you upload the image.

Since you are not allowed to modify the source code, you can host a background scheduler to automatically replace files with a water-mark when it detects an image without a water mark. There is another option using VRML (Virtual Reality Modeling Language) but that requires editing the source code.

How to prevent images from being copied from my website?

Using a watermark is what i choose! It requires extra time to use an image editor to embed a water-mark. But I did find a tool that will automatically set the water mark given a list of files. It is a desktop application but it does the needful! I have posted a suggestion to the company that i purchased my current website to add the automatic watermarking as a new feature in their product. Hopefully they would have it in their next version! Thank you experts for sharing your knowledge!