PDA

View Full Version : Web site image protection?



Rebo's_Guitarist
02-26-2007, 09:03 AM
Im putting together a site and my images are originals and quite important to me, so my question is, how can I protect them from "right click Save As"?

El Chuxter
02-26-2007, 09:38 AM
I'm not sure of the exact method, but there's a relatively simple JavaScript you can add to your pages to prevent the right-click copying. If you do a Google search, you can find several pages with ready-to-use scripts that you can just copy and paste into the header of your HTML.

It's not going to make it absolutely impossible to copy them (anyone with the know-how and time can pull up the source code to find the filename, or can even do a screen capture and drop it into PhotoShop), but it will make it a lot more difficult. I'd wager that would eliminate at least 95% of the people who'd want to copy your pics.

Slicker
02-26-2007, 10:31 AM
Here's one site that I know of that doesn't allow right-click, save as. http://www.ekstensive.com/vehicles/

Maybe you can check the source code.

I've gotten around that, like Chux said, by just doing a scree capture and then dropping it into paint and saving.

Jargo
02-26-2007, 11:06 AM
you can't stop people downloading these pics. but the best way is to watermark them. embedded meta data. or deface your own pics with some copyright information at a low opacity.
or as you build them into your page add an invisible layer over the image so a right click and save would only save the invisible layer.

but you can't stop people taking screen captures or looking in their temporary internet files for the images. whatever is put on the net is open game. if you don't want it stealing then don't put it up. it's as simple as that.

IE6 doesn't fret about the right click block because it pops up a little toolbar in the top left corner of every image with a save button right there. so that nixes the right click block.

JediTricks
02-26-2007, 04:34 PM
There are effective methods of defeating right-clicking for IE, but less so for Firefox - the message window pops up, you click ok, then it goes to the standard menu anyway. Ultimately, your best bet is to watermark your images with your URL so people know where the image was stolen from and change your htaccess so others cannot source your files on their pages (this is important as it can be a heavy drain on your bandwidth which is your money).

El Chuxter
02-26-2007, 06:03 PM
...and change your htaccess so others cannot source your files on their pages (this is important as it can be a heavy drain on your bandwidth which is your money).

How does one go about doing that? I wouldn't mind knowing that myself.

Banthaholic
02-26-2007, 09:52 PM
Go to this site:
http://www.dynamicdrive.com/dynamicindex9/noright2.htm

Add the code to your page and it'll disable the right click mouse option so they just can't just save as on your pictures.

Though if they really want them they could still get them by viewing your source code and getting the direct url to your pic and then save it. But so is the world wide web

bigbarada
02-27-2007, 02:36 AM
We've actually had this problem A LOT recently with Matt Hughes' website. People were taking the images off of his website and using them to start up fake MySpace accounts.

I've used several methods so far to try to combat this, with just HTML tricks:

1. Watermarking - (see attachment) with this method you're essentially "ruining" the image to make it less desirable. But if you have a lot of pictures that people like to steal, then it can really act as a plug for your website. I've had to put the watermarks right across the center of the images, if you put them on the bottom, side or corner, then people will just crop them out.

2. Transparent GIFs - If you click on the link below and scroll down a little bit to the over-watemarked image of Matt holding the sign with the MySpace URL on it:
http://www.matt-hughes.com/allnews.html

Right click on the image and save it, then open it up in Paint or something similar, you'll notice that it's blank. What I did was create an HTML table that is the exact dimension of my image, set cellpadding and cellspacing to "0," set the main image as the background for that cell. Then inserted a transparent GIF that is also the exact same dimensions of the image.

The code ended up looking something like this (I've removed unnecessary elements):

<table width="480" height="604" cellpadding="0" cellspacing="0">
<tr>
<td background="images/hughesmatthew.jpg" width="480" height="604">
<img src="images/hughesmatthew.gif" width="480" height="604" border="0">
</td>
</tr>
</table>

The only mistake I made was giving the main image and the transparent GIF the same name, which makes it real easy for someone to "guess" what the background image might be called.

This works pretty well, EXCEPT when someone just does a screen capture, then there is nothing you can do (which is a good argument for the watermark).

3. Slicing - this one would require Photoshop or some similar program. You're essentially cutting the photo up into pieces:
http://www.matt-hughes.com/images/mattmyspace02.html

When you try to right-click and Save As, then all you get is a small segment of the photo. The more pieces there are and the more irregularly shaped, the harder it is for someone to steal your image....

Again, unless they just do a screen grab. That's the best way to get around almost everything except watermarks.

4. Finally, I've just learned to stop being so generous with the photos. They don't all have to be wallpaper-sized and hi-res. Again, programs like Photoshop will allow you to lower the quality of images and save them out specifically for webpages.

None of these by themselves are foolproof. People will always find a way around them. Combining the methods will just make it really inconvenient for them at the worst. At best, the person will decide that it just isn't worth the effort and give up.

bigbarada
02-27-2007, 02:38 AM
Go to this site:
http://www.dynamicdrive.com/dynamicindex9/noright2.htm

Add the code to your page and it'll disable the right click mouse option so they just can't just save as on your pictures.

Though if they really want them they could still get them by viewing your source code and getting the direct url to your pic and then save it. But so is the world wide web

I'm running OSX on a Mac and I'm still able to right click and save those images to my desktop. I'm guessing the code only affects Windows browsers.

JediTricks
02-27-2007, 07:44 PM
How does one go about doing that? I wouldn't mind knowing that myself.It's been a while since I did this, but I believe the code below will cut it. But first, read this brief introduction to .htaccess so you know what it is and what it's doing:
http://www.freewebmasterhelp.com/tutorials/htaccess/1

Then, in your .htaccess file, include this code:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yoururlhere.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ http://www.replacementurlhere.com/replacementfile.gif [R,L]


Obviously you'd put your domain name where it says "yoururlhere.com" so if you owned www.chuxter.net then you'd put "chuxter.net" (the www should be left off since it's handled by the part right before that).

Also, this would redirect anybody linking into your files to another location of your choosing, whether it be a warning image or a specialty page, so replace "http://www.replacementurlhere.com/replacementfile.gif" with the file/location of your choice.



2. Transparent GIFs - If you click on the link below and scroll down a little bit to the over-watemarked image of Matt holding the sign with the MySpace URL on it:
http://www.matt-hughes.com/allnews.html

Right click on the image and save it, then open it up in Paint or something similar, you'll notice that it's blank. What I did was create an HTML table that is the exact dimension of my image, set cellpadding and cellspacing to "0," set the main image as the background for that cell. Then inserted a transparent GIF that is also the exact same dimensions of the image.

The code ended up looking something like this (I've removed unnecessary elements):

<table width="480" height="604" cellpadding="0" cellspacing="0">
<tr>
<td background="images/hughesmatthew.jpg" width="480" height="604">
<img src="images/hughesmatthew.gif" width="480" height="604" border="0">
</td>
</tr>
</table>

The only mistake I made was giving the main image and the transparent GIF the same name, which makes it real easy for someone to "guess" what the background image might be called.

This works pretty well, EXCEPT when someone just does a screen capture, then there is nothing you can do (which is a good argument for the watermark).Anybody using any Mozilla-based browser can go to Page Info and easily dig it out (it's the only background image in the media section) so you get this: http://www.matt-hughes.com/images/hughesmatthew.jpg

Alternately, I believe some versions of Mozilla-based browsers can right-click a table cell's background and go "view background image" .


3. Slicing - this one would require Photoshop or some similar program. You're essentially cutting the photo up into pieces:
http://www.matt-hughes.com/images/mattmyspace02.html

When you try to right-click and Save As, then all you get is a small segment of the photo. The more pieces there are and the more irregularly shaped, the harder it is for someone to steal your image....

Again, unless they just do a screen grab. That's the best way to get around almost everything except watermarks.Of course, if they snake your code then they've got all your slices in exactly the right shapes and locations, then they're calling multiple files at once which is a slightly bigger drag on your bandwidth. You can of course use CSS to source that code from another file, this will make them go get that file's code instead, and to prevent that you can use a piece of javascript that will mask the source file's location.


None of these by themselves are foolproof. People will always find a way around them. Combining the methods will just make it really inconvenient for them at the worst. At best, the person will decide that it just isn't worth the effort and give up.Yeah, there's no way around it, people are smart and can get through anything given enough time and effort so like you said in point 1, it's better to just watermark it with your URL so they know where it came from - though I personally think you've gone way overboard with that watermark, the one across his chest was ample enough since photoshopping it out would make it an obvious image integrity issue.



I'm running OSX on a Mac and I'm still able to right click and save those images to my desktop. I'm guessing the code only affects Windows browsers.The javascript is fairly simple, it should be working, but your browser may ignore it completely anyway. In my Firefox for WinXP it pops up the warning window, I hit "spacebar" and then it drops down the right-click menu anyway. :D

bigbarada
02-27-2007, 08:56 PM
it's better to just watermark it with your URL so they know where it came from - though I personally think you've gone way overboard with that watermark, the one across his chest was ample enough since photoshopping it out would make it an obvious image integrity issue.


Yeah, that one was kind of a special case, since the second fake MySpacer on that list had previously doctored one of these photos and he just left the watermark in place. He realized, correctly, that most people aren't going to bother to go to the URL and confirm the image's authenticity and will just take it at face value.

So that image was just my way of saying, "Screw you, jerk! Try doctoring this one!" :mad:

He basically admitted defeat and "reimagined" his MySpace as a Matt Hughes fan MySpace; but he's still got hundreds of people thinking he's the real deal.

We've learned from experience that you can provide all the evidence in the world, but it's VERY tough to get MySpace to enforce their own rules and delete imposter profiles.

We wouldn't even be on MySpace if we weren't losing tons of search engine traffic inside that site. People just type "matt hughes" into the MySpace search engine and get caught up in the fake profiles and never make it to his actual website. This profile is just a way to redirect some of that.

Anyways, I'm always looking for security loopholes. Thanks for pointing those out for me. :thumbsup: As you've probably noticed from that site, I'm more of a graphic designer than a network technician. All this code stuff is not really my thing.

LusiferSam
02-27-2007, 11:12 PM
I'm running OSX on a Mac and I'm still able to right click and save those images to my desktop. I'm guessing the code only affects Windows browsers.

Didn't stop me either. I'll try it on the Linux box I run at school tomorrow. Maybe somebody can answer this question. I never do any of this 'right click' garbage. But will drag 'n drop the image to my desktop. Does this trick work in Windows?

Slicker
02-27-2007, 11:18 PM
I can't do that. If you're talking about just seeing a picture on a sight and dragging it. If I try it just gives me the little circle with a slash basically telling me that I'm dumb and shouldn't attempt that.

bigbarada
02-27-2007, 11:39 PM
Didn't stop me either. I'll try it on the Linux box I run at school tomorrow. Maybe somebody can answer this question. I never do any of this 'right click' garbage. But will drag 'n drop the image to my desktop. Does this trick work in Windows?

Mac OS works that way. I wonder if that's a feature they added to Vista?

LusiferSam
02-28-2007, 12:44 AM
I can't do that. If you're talking about just seeing a picture on a sight and dragging it. If I try it just gives me the little circle with a slash basically telling me that I'm dumb and shouldn't attempt that.

Interesting. It's a great little trick for grabbing stuff off the web. And even better when used with Exposť (http://www.apple.com/macosx/features/expose/). I can use it on nearly every image on any web site. Maybe once or twice a year I come across a site that won't let me do that (but that's what my other tricks are for).

plasticfetish
02-28-2007, 03:22 AM
Best way? Use Flash to build your site.

Otherwise, they'll be able to pull your images somehow. Mostly you just need to get over thinking that your low-res Web based images (and I honestly don't know exactly what you're talking about) are going to be ripped off. Watermark them, and accept that people might copy them. It's no different than if you had a photo published in a magazine and someone clipped it out to save.

Now, if they're using your images to make money, then that's a different matter. But if you're not willing or able to sue them for copyright infringement, then again, try not to get too uptight about it. (Or just don't publish images that you don't want downloaded.)

El Chuxter
02-28-2007, 09:28 AM
I would advise against using Flash myself. I don't mind the odd Flash effect or application here and there, but websites that are totally built in Flash, or have navigation systems that are totally reliant upon Flash, turn me off so much that I don't visit those sites again.

KISS should be the rule of thumb in website design, and Flash has a tendency to make people do the opposite.

bigbarada
02-28-2007, 12:32 PM
I would advise against using Flash myself. I don't mind the odd Flash effect or application here and there, but websites that are totally built in Flash, or have navigation systems that are totally reliant upon Flash, turn me off so much that I don't visit those sites again.

KISS should be the rule of thumb in website design, and Flash has a tendency to make people do the opposite.

I like to avoid Flash like the plague. When you require someone to download a player just to view your site, then 90% of the time they're just going to go somewhere else. I prefer sticking to HTML because it's the most basic of all the languages and people who buy an $800 computer from Wal-Mart and still use a dial-up connection will be able to view your site without any problems.

I've checked the traffic on Matt's site and most of our visitors are still using pretty low-end computers. So I would rather cater to the lowest common denominator and not lose any business because we wanted to get all fancy.

bigbarada
02-28-2007, 12:44 PM
Best way? Use Flash to build your site.

Otherwise, they'll be able to pull your images somehow. Mostly you just need to get over thinking that your low-res Web based images (and I honestly don't know exactly what you're talking about) are going to be ripped off. Watermark them, and accept that people might copy them. It's no different than if you had a photo published in a magazine and someone clipped it out to save.

Now, if they're using your images to make money, then that's a different matter. But if you're not willing or able to sue them for copyright infringement, then again, try not to get too uptight about it. (Or just don't publish images that you don't want downloaded.)

That's the problem we're having, people will print out pictures from the site and sell them on ebay with fake autographs, or use them to set up fake MySpace and Xanga accounts. It's actually much more difficult to shut this kind of thing down than you would imagine. I'm still struggling with getting MySpace to shut the two remaining fake profiles down. Ebay requires you to fill out a bunch of legal paperwork which could take weeks to process and, in the meantime, people are still selling fake autographs.

The worst thing, though, is that someone spotted a bunch of printed out photos of Matt's 7-month old daughter sitting in some guy's truck in Matt's hometown. We have no idea who he was or what he planned to do with these pictures. The lady who spotted the photos didn't think to get a license plate number.

We had those photos posted for about 12-hours at that point, but we pulled them from the site immediately.

El Chuxter
02-28-2007, 12:49 PM
Dude... that's sick.

I tend to use Flash for an intro animation, if at all. I don't like glitzy stuff. I want to read the news, info, or fart jokes I came to see without having to wade through a morass of junk. I especially hate sites that play sounds that I didn't specifically ask for, or "books" that have to do that moronic page-turning effect.

LusiferSam
02-28-2007, 03:06 PM
Go to this site:
http://www.dynamicdrive.com/dynamicindex9/noright2.htm

Add the code to your page and it'll disable the right click mouse option so they just can't just save as on your pictures.

It worked on the Linux flavor I'm using at school, kind of. It told me I could use the right mouse button, but only if I clicked on let go of the button while over the images. If I moved the cursor off the images I could right click and save no problem.

JediTricks
02-28-2007, 04:18 PM
He basically admitted defeat and "reimagined" his MySpace as a Matt Hughes fan MySpace; but he's still got hundreds of people thinking he's the real deal.Matt should probably get a lawyer to send a Cease & Desist letter. Oh, and next time, don't have Matt hold a flat sign, those are easy to photoshop, have the sign bent in the middle or put it on a T-shirt with natural curves and wrinkles that are much more difficult to fake.


We've learned from experience that you can provide all the evidence in the world, but it's VERY tough to get MySpace to enforce their own rules and delete imposter profiles.A friend of mine was pretending to be a movie character and got a C&D letter from the movie studio directly, they went right around Myspace's stupid back.


Anyways, I'm always looking for security loopholes. Thanks for pointing those out for me. :thumbsup: As you've probably noticed from that site, I'm more of a graphic designer than a network technician. All this code stuff is not really my thing.Sure thing, good luck.



Didn't stop me either. I'll try it on the Linux box I run at school tomorrow. Maybe somebody can answer this question. I never do any of this 'right click' garbage. But will drag 'n drop the image to my desktop. Does this trick work in Windows?Yes, that works too (but I never think of it) but not when an image is the table cell's background the way BB did it, if you drag-drop that it'll just be a clear gif image instead.



I can't do that. If you're talking about just seeing a picture on a sight and dragging it. If I try it just gives me the little circle with a slash basically telling me that I'm dumb and shouldn't attempt that.That's when you drag it to the toolbar, instead what you should do is de-maximize the window to a smaller view so the desktop (or any folder) is open next to it, then drag it over to that area out of the browser. In Firefox it just does it, while in IE it asks you first if you want to do move or copy the image to that location.



Best way? Use Flash to build your site.

Otherwise, they'll be able to pull your images somehow. Mostly you just need to get over thinking that your low-res Web based images (and I honestly don't know exactly what you're talking about) are going to be ripped off. Watermark them, and accept that people might copy them. It's no different than if you had a photo published in a magazine and someone clipped it out to save.

Now, if they're using your images to make money, then that's a different matter. But if you're not willing or able to sue them for copyright infringement, then again, try not to get too uptight about it. (Or just don't publish images that you don't want downloaded.)Doesn't have to build the whole site with Flash, just get/make a piece of flash for the images he doesn't want stolen - then only screencaps (which are lower quality than originals) will be possible, and there's flash that can even overcome that I believe.

But if a user doesn't know flash well, they'll likely end up creating a site that's sole activity is crashing their surfers' browsers. Poorly-written flash can overwhelm users' RAM very easily. Plus, Flash gets much less attention and can be very annoying to surfers if it's not user-friendly enough or too big of files. And flash advertising banners get far fewer clicks than jpgs and gifs for some reason. Finally, back in the day a few years ago I was able to mine out a corporate site's images that were being served by a flash handler even though I have no flash programming experience (this was just so I could see the toys again later without having to go through their obnoxious flash site).



I like to avoid Flash like the plague. When you require someone to download a player just to view your site, then 90% of the time they're just going to go somewhere else. I prefer sticking to HTML because it's the most basic of all the languages and people who buy an $800 computer from Wal-Mart and still use a dial-up connection will be able to view your site without any problems.

I've checked the traffic on Matt's site and most of our visitors are still using pretty low-end computers. So I would rather cater to the lowest common denominator and not lose any business because we wanted to get all fancy.Most users have at least a low-end version of Flash, and if it's written correctly the Flash can end up serving images smaller than the JPGs you would otherwise be serving which is a good thing for low-end viewers. Flash can be your friend when written correctly and used in moderation - hell, in a few seconds on Google I found this free one that's not so bad at all (but it is Flash 7 required): http://www.airtightinteractive.com/simpleviewer/

Searching flash image viewer is one way, then you can limit it to "flash 4" image viewer (or whatever version of flash you think is early enough to work).


BB, for your security issues on those pictures, watermark at an angle across the chest - it doesn't have to be as bold as the watermarks you were currently using, just something that will make printing it without that impossible. Putting it diagonally across the chest will make it more work for anybody wanting to photoshop it back out. Also, consider not serving pictures big enough for people to print out.

2-1B
02-28-2007, 08:13 PM
\m/ :metal horns: \m/ to Matt Hughes on the mullet.

That is some serious Mulletude. :cool:

plasticfetish
02-28-2007, 11:53 PM
But if a user doesn't know flash well, they'll likely end up creating a site that's sole activity is crashing their surfers' browsers. Poorly-written flash can overwhelm users' RAM very easily.Exactly. Design is everything, and a simple elegant design is often best.

bigbarada
03-01-2007, 12:35 AM
Thanks for the pointers, JT! :thumbsup: I was making it a little too easy for these frauds for a while there. I think the doctored images are confusing the MySpace admin, becuase the only two who haven't been shut down yet are the ones that posted doctored MySpace "salutes."

Caesar, I'm headed up to Ohio tomorrow afternoon for Matt's fight on Saturday, I'll let him know that you approve of his mullet. :D That photo was from his senior class high school yearbook and I'm kind of the guy responsible for leaking it to the internet. :eek: Oops!

Although, I have photos of Matt that are ten times more embarrassing than that one, though. :yes:

It really only takes one bad Flash website to really turn people off to them forever. This one is for former UFC Heavyweight Champion Andrei Arlovski:
http://www.arlovski.tv/start.htm

I'm sorry but I don't like it and with a simple screen grab, I can have any of those photos.

JediTricks
03-01-2007, 05:32 PM
Maybe you should demand they tell you what hoops Matt needs to jump through to prove he's the real McCoy. If this was a URL issue he could have already sued and taken those sites down. He should say it's damaging his public reputation - maybe even threaten legal action.

That site is too busy and too noisy, but does have functionality and comes off as a commercial professional site (except for the designers' button right in the middle, that's total bullcrap). As for print-screen his photos, the flash image holder doesn't let you see all the photo at once which is super annoying on the user end but does make it that much harder to steal - you have to stitch them together from multiple screengrabs and even then it's still too small to be print-worthy.

bigbarada
03-02-2007, 12:26 AM
That might be a good idea, Matt's mother-in-law used to be a prosecuting attorney, so maybe I can ask if she could write up a very concise, professional letter that will scare the crap out of these kids. :D

Rebo's_Guitarist
03-03-2007, 07:14 AM
Hey thanks to everyones help, you guys have given a lot of great information and links. Im just going to have to decide which way to go about it.

Thanks again, you are all very helpful, as always.
Nate

JediTricks
03-03-2007, 02:32 PM
That might be a good idea, Matt's mother-in-law used to be a prosecuting attorney, so maybe I can ask if she could write up a very concise, professional letter that will scare the crap out of these kids. :DWell, if that doesn't pan out, a paralegal can draft you up some good papers for such things on the cheap.


Good luck RG!