Prevent Image Theft : Total Guide
Last Sunday I was @ the Bangalore BarCamp 4 where I gave a presentation on 'Security of Photographs in Webpages'. I wanted the presentation to be interactive and it really turned out to be totally that. Almost everybody had something to share and in all the gung-ho, I felt that no body understood the importance of the issue and how to achieve that. Arun was finding the whole discussion pointless.
When the web is full of plagiarism, you surely need to protect your site's content. Otherwise, your hours' creativity is stolen by some crook in seconds. How about someone visiting your website, stealing some astounding photograph that U had clicked, putting it up in his own site, taking credit for it and if possible, making money out of it.... That's just like stealing of music - which is quite rampant in Bollywood music industry these days. What with 'Ya Ali' , 'Zehrili Ratein' and several such songs raging a storm of controversy.
This is just one possible misuse. There are perverts who download pic of girls from Orkut album pages et al and morph the face onto some naked model pic. to create certain 'College gal su****g' kind of pics for the blooming porn industry. U surely don't wanna see your face in that. So, better gear up.
"Why would we need to secure the photograph....?? If someone wants to download a pic from your site, let them. What harm can it cause you .....??"I exactly don't remember what points he brought about, but gradually he was making sense. But I must say that his arguments apply only to a tiny part of the big bad net.
When the web is full of plagiarism, you surely need to protect your site's content. Otherwise, your hours' creativity is stolen by some crook in seconds. How about someone visiting your website, stealing some astounding photograph that U had clicked, putting it up in his own site, taking credit for it and if possible, making money out of it.... That's just like stealing of music - which is quite rampant in Bollywood music industry these days. What with 'Ya Ali' , 'Zehrili Ratein' and several such songs raging a storm of controversy.
This is just one possible misuse. There are perverts who download pic of girls from Orkut album pages et al and morph the face onto some naked model pic. to create certain 'College gal su****g' kind of pics for the blooming porn industry. U surely don't wanna see your face in that. So, better gear up.
Disclaimer : Lemme tell you here very clearly that if U upload any pic on your website for display, there's no way you can secure it 100%. If someone is hell bent on getting a pic from your website, he surely can. Aside from some easily surmountable technical tricks, there is no way to prevent an image from being stolen from a website. The best that can be done is to make it not worth the effort. And if you don't wanna sacrifice even that, better don't upload it.
Now, let's get down to business. Lemme show you some tricks to secure a pic a little bit, at least from not-so intel casual browsers. You must be comfortable with html to follow these tricks.
1 . Right Click :
The most common way to download a pic is to right click on the image and select 'Save Image As...' from the context menu. This can be prevented by disabling the right click function on your page. To do that, replace the <body> tag of your page with <body oncontextmenu='return false'>. Sometimes, this doesn't work on IE browser. For that, paste the following javasrcipt code just before the </head> tag of your page.
The most common way to steal a photo, it's most common way to prevent, has the most common way to surmount. One can easily disable javascript support on his browser and right click on the page.
2 . Transparent Layer :
2nd trick in my kitty is to use a layer of transparent image over the actual image you want to protect. To do that, paste the following piece of code just after your actual image code.
U can use any 1x1 px transparent gif image to create the transparent layer. This trick provides a protective layer over the image in its background. This trick is quite effective as compared to the 1st trick. There's no visible difference and the mouse cursor over the image interacts with the spaceball.gif image. Someone trying to 'Save Image As...' might not understand that all he's saving is an 1x1 transparent gif image. Try this on the image in this page. See that page's source code to understand how to do it.
This trick is being used on profile photo of 'Orkut' and Album pages of 'Flickr Pro' where the user opts for it.
3 . LightBox :
There's a 3rd option of using LightBox to display your full resolution image. See it in action at my photoblog Leonardo. For instructions on how to implement it, check the LightBox instruction page
All these 3 'obstacles' can be overcome in a single shot.There's always the option to 'View Page Source' from where the image URL can be obtained and the image downloaded.
4 . Use Flash :
These loophole can be blocked by embedding the image in a flash file. Several tools are available for that such as Slideshow maker. Create a flash slideshow using your images and use this flash file to display your images on your website. Right clicking on this display will generate only flash specific menu which don't have a 'Save' option. And, the 'View Page Source' won't reveal the URL of the image, as there's actually no image, but the flash file.
But then, the whole flash file can be saved, if the user knows how to do that. There are tools that can extract individual images from a flash file. And of course, there's the 'Cache' of the browser. And above all, which breaks all possible tricks - Screen-shots.
5 . Watermark :
These were the tricks if you don't want the user to download an image from your site at all. But if you're not that damn adamant and simply want your ownership of the image to be evident wherever the image is used, U can use watermark - a simple logo of your identity. U can write a simple text declaring your ownership of the image on the border of the image. Click the image on right for example.
U might want to use this option if you don't wanna deface the image. But as U can see, this text line can be easily cropped out. Alternatively, you can place your logo on some prominent area of the image. Just like the santabanta places logo on their wallpapers. If U don't do it tastefully like them, U'll just deface the image.
Anyway, the logo can possibly be omitted from the image using 'layer' manipulation tools of Photoshop. Am not too sure of it but I think it's possible to do that.
6 . Copyright :
And if you are a professional photographer or artist, or anyway are damn too serious about your photographs, U can opt for legal protection of your photographs. Simplest option here is to upload your photographs with Creative Commons license. This way U can allow non-commercial, limited use of your photograph, but strictly no commercial use. Or you can opt for more stringent copyright policies to cover your image.
U can use the fingerprinting service of some vendors like PicScout. A unique code is embedded into your image and if the image is used by anyone else, it can be tracked with this unique code.
Now, to wrap it up, which method you use is up to U. U cans surely combine multiple tricks for greater security. But at the end of the day, as I said at the very start, all these just delays the process of download. Your pics are still not safe. So, be aware of what you're upload on net. Lemme know if you have any other tricks to share. Take care.
Now, let's get down to business. Lemme show you some tricks to secure a pic a little bit, at least from not-so intel casual browsers. You must be comfortable with html to follow these tricks.
1 . Right Click :
The most common way to download a pic is to right click on the image and select 'Save Image As...' from the context menu. This can be prevented by disabling the right click function on your page. To do that, replace the <body> tag of your page with <body oncontextmenu='return false'>. Sometimes, this doesn't work on IE browser. For that, paste the following javasrcipt code just before the </head> tag of your page.
<script type="text/javascript">This will disable right clicking on your page and hence the user won't get the 'Save Image As...' option for the image. See it in action on this page . But use this trick only if you are OK with the frustration of your site's genuine visitors. Not getting a right click context menu when they want usually irks the visitor. For example, they might simply want to 'Open Link in New Window' but will not get the option. Very first reaction then would be 'What the hell ...!!' and they might just close your page and never visit again. So, be aware of the consequences and take the plunge only if you're sure.
/*
No rightclick script v.2.5
Script provided by Bikram Agarwal
http://geniousatplay.blogspot.com
Don't delete this header!
*/
var message="Right Click is DISABLEDnn COPYRIGHT;2006 "
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
</script>
The most common way to steal a photo, it's most common way to prevent, has the most common way to surmount. One can easily disable javascript support on his browser and right click on the page.
2 . Transparent Layer :
2nd trick in my kitty is to use a layer of transparent image over the actual image you want to protect. To do that, paste the following piece of code just after your actual image code.
<img style="position:relative; top:-(X+4)px; margin-bottom:-(X+4)px; display:block;" src="spaceball.gif" width="Y" height="X"/>Replace X and Y with the height and width of the actual image you want to protect.
U can use any 1x1 px transparent gif image to create the transparent layer. This trick provides a protective layer over the image in its background. This trick is quite effective as compared to the 1st trick. There's no visible difference and the mouse cursor over the image interacts with the spaceball.gif image. Someone trying to 'Save Image As...' might not understand that all he's saving is an 1x1 transparent gif image. Try this on the image in this page. See that page's source code to understand how to do it.
This trick is being used on profile photo of 'Orkut' and Album pages of 'Flickr Pro' where the user opts for it.
3 . LightBox :
There's a 3rd option of using LightBox to display your full resolution image. See it in action at my photoblog Leonardo. For instructions on how to implement it, check the LightBox instruction page
All these 3 'obstacles' can be overcome in a single shot.There's always the option to 'View Page Source' from where the image URL can be obtained and the image downloaded.
4 . Use Flash :
These loophole can be blocked by embedding the image in a flash file. Several tools are available for that such as Slideshow maker. Create a flash slideshow using your images and use this flash file to display your images on your website. Right clicking on this display will generate only flash specific menu which don't have a 'Save' option. And, the 'View Page Source' won't reveal the URL of the image, as there's actually no image, but the flash file.
But then, the whole flash file can be saved, if the user knows how to do that. There are tools that can extract individual images from a flash file. And of course, there's the 'Cache' of the browser. And above all, which breaks all possible tricks - Screen-shots.
5 . Watermark :
These were the tricks if you don't want the user to download an image from your site at all. But if you're not that damn adamant and simply want your ownership of the image to be evident wherever the image is used, U can use watermark - a simple logo of your identity. U can write a simple text declaring your ownership of the image on the border of the image. Click the image on right for example.
U might want to use this option if you don't wanna deface the image. But as U can see, this text line can be easily cropped out. Alternatively, you can place your logo on some prominent area of the image. Just like the santabanta places logo on their wallpapers. If U don't do it tastefully like them, U'll just deface the image.
Anyway, the logo can possibly be omitted from the image using 'layer' manipulation tools of Photoshop. Am not too sure of it but I think it's possible to do that.
6 . Copyright :
And if you are a professional photographer or artist, or anyway are damn too serious about your photographs, U can opt for legal protection of your photographs. Simplest option here is to upload your photographs with Creative Commons license. This way U can allow non-commercial, limited use of your photograph, but strictly no commercial use. Or you can opt for more stringent copyright policies to cover your image.
U can use the fingerprinting service of some vendors like PicScout. A unique code is embedded into your image and if the image is used by anyone else, it can be tracked with this unique code.
Now, to wrap it up, which method you use is up to U. U cans surely combine multiple tricks for greater security. But at the end of the day, as I said at the very start, all these just delays the process of download. Your pics are still not safe. So, be aware of what you're upload on net. Lemme know if you have any other tricks to share. Take care.
Labels: Guide
posted by kjnb @ August 02, 2007
0 Comments
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home