Tuesday, October 09, 2007

Protecting Images on a Web Site

Ultimately, anything that displays on a digital screen can be copied, but here are a few tips that I picked up for protecting images on a website.

1) Use javascript right click disablers. I won't list the code here, but do a search on web sites like dynamic drive and they are pretty easy to find.

2) Wrap images in anchor <a> tags. Even if the don't point anywhere, it will stop people from dragging images off your site to the desktop.

3) Put your image as a background of a div or place another div over your image. This also prevents right click and drag.

4) You can use an overlapping div with a see through image as water mark to protect people from screen shotting images (or at least if they do they will have to get rid of the water mark somehow).

5) Lastly, and this is the technique that I'm working on right now, is to use AJAX to dynamically load javascript that in turn dynamically loads image URL's. This will cause the image URL's to not show up in your view source.

Some webmasters go so far as to use stenography/cryptography techniques to embed a digital signature into images as well, so that if images are copied the digital signature will give the thief away. A good idea, but once images are even slightly edited, that signature goes away so I think this might be going a bit far.

Ultimately, there is no full proof way to protect images, but using any one or a combination of the above five methods will cut down on image loss and make your users who want to post photo galleries on sites that you run feel more secure about their images. For legal reasons though, as well as setting realistic limitations, I would make users understand that nothing is full proof.

No comments: