Jump to content
Stef's Coding Community
MadameBlack

Preventing image theft

Recommended Posts

Just wondering if there's anyone out there that knows the code to prevent someone from right clicking on an image and saving it? I'm about to attempt to make a website for my photography and I would really prefer not putting watermarks on everything if I can help it, and I've found the inability to save an image really helps!

 

Be gentle with me! I'm a bit slow so far when it comes to code and I'm just starting out. I just didnt know how to even search for this kind of information, and I'm sure I'll need more help in the future, so I figured this was my best bet. Thanks!

Share this post


Link to post
Share on other sites

If it's placed on a page with normal image code, themn I don't think there is any way to prevent someone downloading it. If they don't use the right click, then they can look at the source code for the url and download it that way.

 

I think including it in a Flash file is a possible way to protect it, but you will have to learn to code Flash. See this about Flash:-

 

http://labnol.blogspot.com/2007/08/prevent-visitors-from-downloading.html

Edited by Wickham

Share this post


Link to post
Share on other sites

There's no way prevent this. You could watermark your images, but watermarks can be removed. If you're really concerned with people stealing your images - don't put them on the web.

 

I wouldn't expend too much energy looking for a solution for this one. :)

Share this post


Link to post
Share on other sites

yeah, I know its not fool proof, but it definitely cuts down on the possibility of it happening, for those who dont know how to get around that. I'll take a look into flash and see if I can figure it out. I didnt think about that

 

I actually had to drop out of a web design class last year and they were eventually going to touch on Flash, so I'll need to get familiar with it again eventually when I retake it

Share this post


Link to post
Share on other sites

One trick and it is just a trick...

 

Create a clear GIF the exact size of the image. Place the image as the background and the clear GIF as the image over it. Give it the same name as the background (only as a GIF).

 

Now when a Fly by grabber comes by and snatches it with a right click, they get the clear gif. They can still go into the code to get the real image path... but hey, they have to remember where it was, which page and which image... so it can help sticking it to the fly by grabbers. But Flash is a better bet.

Share this post


Link to post
Share on other sites
One trick and it is just a trick...

 

Create a clear GIF the exact size of the image. Place the image as the background and the clear GIF as the image over it. Give it the same name as the background (only as a GIF).

 

Now when a Fly by grabber comes by and snatches it with a right click, they get the clear gif. They can still go into the code to get the real image path... but hey, they have to remember where it was, which page and which image... so it can help sticking it to the fly by grabbers. But Flash is a better bet.

 

I was just coding the same thing. Only, you don't even need the clear gif - a fake image will do! Basically the same thing as a no right-click script (many ways around it) but this prevents right-click "save image as" in all browsers! Ie6 needs the px height/width and overflow hidden. Otherwise, height:100% and width:100% works perfect in the others.

 


{ visibility: inherit; } Testing
<br /><!--<br />#hide {<br />float:left;<br />position:relative;<br />overflow:hidden;<br />}<br />#hide div {<br />position:absolute;<br />top:0;left:0;<br />width:999px;<br />height:999px;<br />background:url(fake.jpg);<br />}<br />--><br />











Edited by Eric

Share this post


Link to post
Share on other sites

...Almost the same that is. With mine the browser doesn't even give "save as" an option. I wonder, is that because the image does not really exist? If so, my code with a 999px clear gif (LSW's) would probably be even better. That way, one size fits all!

Edited by Eric

Share this post


Link to post
Share on other sites
...Almost the same that is. With mine the browser doesn't even give "save as" an option. I wonder, is that because the image does not really exist? If so, my code with a 999px clear gif (LSW's) would probably be even better. That way, one size fits all!

I wasn't altogether correct. Messing with it now on my computer, this is what LSW was saying. This is how to make one size fit all (sort of).

 

clear.gif
Edited by Eric

Share this post


Link to post
Share on other sites

very nice ideas, I like that! at least that way if I cant figure out Flash...which I guess is still the *best* option? I can then do that instead. I think most people that steal images for they're own use are mainly not going to put the effort into figuring all that out. I find that its a lot of people wanting profile pictures or avatars.... things of that nature.

 

Thanks!

Share this post


Link to post
Share on other sites

I forgot to mention! In my code directly above, I used a 999px by 999px clear.gif and then just sized it to fit (with inline dimensions on the img tag) for each image. So one size fits all. That's important to me.

Share this post


Link to post
Share on other sites

Eric, why not create the image just 1px by 1px and then apply whatever dimensions - wouldn't that save load time?

Share this post


Link to post
Share on other sites
Eric, why not create the image just 1px by 1px and then apply whatever dimensions - wouldn't that save load time?

Duuuhhh! Me Eric - me make fire - me smart! Yes, that's obviously better.

Edited by Eric

Share this post


Link to post
Share on other sites

Please be reminded that the http protocol includes sending the image information to the client requesting the image.

That said, there is nothing you can do that will stop a devious client from capturing the image off the page.

Disabling right click, transparent overlays, and other methods only defer the honest people. Any image on the web is available for capture. Many methods have been devised and they all fail.

As noted above, a print screen and an Image program like Photoshop or GIMP will have the image captured in a flash.

 

I appreciate that the purpose is to provide your potential clients with quality images on your Portfolio, and all that, but stopping them from 'snagging' the image in one form or another is not a valid request. Please re-consider the 'watermarking' of the images as the most effective method of deferring them from stealing the images. Another thing to consider is that you do not need to present the best quality shot on the web.

 

Rather than providing a print quality image, reducing the quality to 'web quality' might be another approach to take. Considering Monitor display quality and Bandwidth are issues as well, you can drop the quality of the print so that it diplays best at a reduced size suitable for display, but not good enough as a print.

Share this post


Link to post
Share on other sites

yes, I'll definitely be reducing image quality for all of them, that always makes them less desirable to steal. I really would hate to watermark my images, and I doubt I would. I've already got all my artwork in a gallery on DeviantART, so there's a big part of me that is perfectly fine with mass viewing and the possibility of stealing is always imminent. People do it for stupid reasons half the time that I'm sure I wouldnt care much about. I'm really pushing my photography skills though and I'm hoping to draw more attention than I have been getting in the past and I just figure that I might want to be more careful on my website.

 

I really appreciate all the responses

Share this post


Link to post
Share on other sites

My right click article under JavaScript explains about ways to beat these things... in the end the image is automatically downloaded to my hard drive when I open the page... regardless of what you do (minus Flash) I already have the image if I can see it. Just most people do not realize it and this trick is for those not computer savvy enough, hence my calling it a trick.

 

By the way, I like the Avatar Meagan.

Share this post


Link to post
Share on other sites

thank you! I get bored sometimes and get dressed up, and I didnt have a proper picture of my blue-greenish hair. I figure it works good enough :D

 

I'm definitely going to take a shot at flash, since I'm going to have to anyway sooner or later with classes, but at least there's some other really good tricks now that I wouldnt have thought of before.

Share this post


Link to post
Share on other sites

Just as a note. In Firefox, all you have to do is open the "Page Info" box, click on the "Media" tab, select the image and then "Save As...". So even the transparent GIF trick isn't going to deter many.

 

You could make your image really small, that way prints will look bad and won't be of much use on screen.

Share this post


Link to post
Share on other sites

This was a very fascinating and informative thread! I believe tpattison's last input is the ultimate answer. Make them too small to be useful!

 

There will still be people who use the images for icons and the like, but not for full quality theft of images. Interesting subject! Maybe new W3C protocols in the future?

 

Alfie

Share this post


Link to post
Share on other sites

I've just found this link:-

 

http://www.protware.com/

 

Look at the screenshots page.

 

The program encrypts html and css files and also disables right-click screen printing.

 

Has anyone tried this program? It looks as if it would deter the average Joe trying to copy images; the encryption probably works well so that just leaves the screen print as a possible way to capture an image if the disabling can be worked around. Can the disabling print screen be avoided?

 

This is an extract from protware.com about trying to use Firefox's Media Save as or any other browser's "Save image" or "Save as":-

Here comes the Image Guardian - it will split your images into pieces and will generate the appropriate code (which will be then encrypted by HTML Guardian) to display those pieces in your pages as if this is an integral, non-splitted image.

This will make image theft nearly impossible - if someone wants to get some of your images, he/she will not be able to get the entire image, only a pieces of it saved under random, meaningless names. It will be very hard to determine that a certain piece is a part of a certain image. Let's say your website has 10 images, and you configured Image Guardian to split them into 3x3=9 pieces each - this will result in 90 image pieces with random names, mixed with a lot of images from other websites visited. A determined person may still be able to find all the pieces of a certain image, but finding them and joining them together to recreate the original image will require a lot of time, knowledge and expensive image editing programs(like Photoshop and similar). In most cases, this will also lead to a seriously decreased image quality. We can say that HTML Guardian's image protection will decrease the risk of image theft with 95-98% (but not 100%).

Edited by Wickham

Share this post


Link to post
Share on other sites

The big questions here are...Is it SEO friendly? Will Google Index the pages that uses it? Will Yahoo?

 

The website that sells that software doesn't really say anything about that.

Share this post


Link to post
Share on other sites

I love that clear image on top idea. Something else you need to consider is preventing hotlinking. Some servers allow this through the control panel, otherwise it some code in the .htaccess file I think. People often steal your images AND your bandwidth at the same time and show them on their own sites.

Share this post


Link to post
Share on other sites

MadameBlack - Another idea.

 

You could use disjointed rollovers (http://meyerweb.com/eric/css/edge/popups/demo2.html). The advantage here is that as soon as the mouse is moved from the thumbnail the image vanishes... it can be beat as described above... but for the right click grabbers who do not understand what is going on it can be frustrating as it disappears when the move the mouse.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...