For those concerned about picture stealing

Some time ago, I had a problem with people stealing the pictures I put online and using them on their own web pages without permission. I have to say it annoyed me a great deal. I wasn't sure what to do to fix the problem, so as a temporary solution, I closed off access to my photo gallery online. I didn't want to use watermarks, as I wanted to detract from the photos as little as possible. If you are interested in my ranting and raving about the problem, you can read it on my weblog.

In any event, I finally found a solution that I thought I'd share with all of you, as I'm sure this is a problem you've had to deal with. The goal was simple: prevent people from being able to right-click and save my pictures. I didn't want to use some Javascript solution, as there are ways around them and scripts that change the default behavior of buttons can be annoying. The solution I discovered uses CSS (Cascading Style Sheets) to "hide" the picture. I think some online photo gallery systems use this technique.

The following is a description for the HTML and CSS-inclined. Normally, one would have a picture on a web page with a simple img command:

<img src="myphoto.jpg" width="300" height="200" />.

Instead of this, what one can do is tell the image to be blank and make the background of the picture the image you want. This looks more like:

<img style="background:url(​myphoto.jpg)" src="blank.gif" width="300" height="200" />.

The blank.gif image should be a 1x1 pixel transparent gif file. This way, the image in the background is visible. If someone right clicks and tries to store the picture, though, they will only get blank.gif. The other step you have to take is to have hotlinking disabled on your web server and/or photo gallery. Otherwise, someone could look at the HTML for your page, find the name of the picture, and then type in the address directly.

I've now implemented this method in my online photo gallery by altering the Gallery code to put photos in the CSS background style. If anyone wants copies of the altered files for their own use, let me know and I can provide them. Note that this method will not prevent someone from using the print screen button to capture a picture. I figure, though, that the print screen option is one only the most determined of web users will use; my goal was to stop the Myspace and Xanga teenagers who didn't respect my rights to my pictures.

In any event, I hope some of you find this helpful for your own online photo galleries! If you have an comments (or find a way to break this technique), I'd love to hear them.

I am a computer idiott but what yu have discribes makes alot of sense....but cant someone steel backgrounds as well?

Man of 1000 Ages wrote in post #2235156
The other step you have to take is to have hotlinking disabled on your web server and/or photo gallery. Otherwise, someone could look at the HTML for your page, find the name of the picture, and then type in the address directly.

As far as I know, disabling hotlinking doesn't prevent a browser from displaying a site's HTML. I was going to visit your site to see if I could break your image protection scheme by viewing the HTML, but the site has not been responding for several minutes.

Have you heard of print screen ?

If the user can see the photo it can be stolen.

Hmmm...how odd, the page seems to be working for me. It is true that one can view the HTML and see the names of the picture files. However, what disallowing hotlinking prevents is the ability of people to copy the URL of a photo and paste it into the address bar of their web browser to get to the photo itself. Normally, this is how one would steal a background image. This is why disabling hotlinking is vital for the method to work.

tommykjensen wrote in post #2235357
Have you heard of print screen ?

If the user can see the photo it can be stolen.

From my original posting: "Note that this method will not prevent someone from using the print screen button to capture a picture. I figure, though, that the print screen option is one only the most determined of web users will use; my goal was to stop the Myspace and Xanga teenagers who didn't respect my rights to my pictures."

Man of 1000 Ages wrote in post #2235368
From my original posting: "Note that this method will not prevent someone from using the print screen button to capture a picture. I figure, though, that the print screen option is one only the most determined of web users will use; my goal was to stop the Myspace and Xanga teenagers who didn't respect my rights to my pictures."

Oops sorry. So it is just hotlinking you are talking about here.

Man of 1000 Ages wrote in post #2235359
Hmmm...how odd, the page seems to be working for me. It is true that one can view the HTML and see the names of the picture files. However, what disallowing hotlinking prevents is the ability of people to copy the URL of a photo and paste it into the address bar of their web browser to get to the photo itself. Normally, this is how one would steal a background image. This is why disabling hotlinking is vital for the method to work.

I think he clicked on the link to menalto gallery on not yours. I did the same and menalto did not respond (at least not within my limit of patience)

tommykjensen wrote in post #2235372
Oops sorry. So it is just hotlinking you are talking about here.

Well, it is a little more than hotlinking that is being prevented. People cannot right click on the picture to download it thanks to the CSS. If they do so, all they will get is a transparent 1x1 pixel gif. So basically, it stops everything except the print screen button and looking through one's cache to find the picture. I figure 99% of people aren't going to go through this trouble.

you can always get an image from a website if you know your way around html and can see where the images are "hidden", by reading the source code. I don't think there's any safe way unless you use flash or similar... but then you can always hack that too.

Just make the images small enough so they aren't worth stealing.

CyberPet wrote in post #2235932
you can always get an image from a website if you know your way around html and can see where the images are "hidden", by reading the source code.

Actually, that isn't true. A web server can be set up to deny access to image files (or any other kinds of files) based on specific conditions. For instance, you can set up your website to only allow access to your pictures from pages on your website; even if people do have the name and location of the file from the source code, they would get a "forbidden" error if they try to access the picture. This is what a .htaccess file does. I haven't tried out the script, but this page details how to prevent hotlinking with the .htaccess file. This should also cover direct linking, i.e., typing the address of a picture directly into the address bar.

It took me three minutes to figure out how to download any image I want from your gallery.

I took the contents of the background url, fixed it into the web site's url, pasted that into an html "img" tag, saved the file to my hard drive, opened it to see your image, and I can right click the image directly from your site. I'm not going to go to the trouble of streamlining the process as I don't want to steal your images. However, I have to say that the process took me a little longer than I usually take because I couldn't just paste the contents of the background url into the web address and let Internet Explorer just show me the image. I actually had to create a text file to download the image.

I do like the trick, however.

Oh, and I found a free program that allows me to download, save, and decompile flash programs into their individual components of code, images, and web addresses. It was a security test I did for someone who swore they had secured their data. Not.

okay folks, you have to figure out that if you arnt willing to use watermarks, or file sizes that are too small to be useful there is NO WAY to stop someone from stealing your pictures. non right click solutions are useless. 1. they dont work on some browsers. 2. on most of the other browsers its very easy to get around, and 3. if worst comes to worst you can hit print screen and crop the image out in photoshop. if you really want your pictures to be secure on the net you have to watermark them, even if it ditracts from the image.

that said most 13 yr old girls wouldnt know that, so since you were concerned with myspace, thats probably not going to be much of a problem anymore.

File > Save As> Done.

A cure for the common cold hasn't been found. But if you embed you image in a flash file it takes a pretty savvy person to bust apart a swf file.

Billginthekeys wrote in post #2236141
non right click solutions are useless. 1. they dont work on some browsers. 2. on most of the other browsers its very easy to get around, and

True of Javascript-based solutions, but not CSS-based solutions. Older web browsers that do not support CSS simply will not display the picture period. You'd have to go back to a pretty old version of a browser to find one that doesn't support the necessary CSS, too (Netscape < 6.0 and IE < 4.0).

cosworth wrote in post #2236197
File > Save As> Done.

This only works if you can type the name and location of the file in directly to the address bar, which can be prevented, as described in the link I give above.