BigMarv's How I Did That

Keep People From Copying Your Images

There are a variety of reasons you might want to prevent someone from copying the images displayed on your website. The reasons are yours, whatever they are. But here's the cold hard reality: There is no way to prevent someone from copying the images they see on your website to their computer or elsewhere.

Let me repeat that with some emphasis: If someone is intent on copying the images shown on your website, they'll do it. There really isn't anything you can do to stop them -- well, short of simply not putting your images on your website. (But Pamela and Tommy will tell you even THAT isn't fool-proof.)

What you need to decide is How important is it that no one be able to copy the images from your website? Here are some possible answers to that question, with some possible strategies.

Concern: It's absolutely critical to me that absolutely no one copy my images.
Resolution: Don't put your images on the web. If your web browser can display an image, that image is in your computer. That means that one way or another, that image can be captured, either from the cache, or by using the Print Screen button, or even by video taping the output from a users video card. There's always a way.
Concern: I'd just like to keep other webmasters from linking from my site to their site, thereby stealing my bandwidth.
Resolution: Your system administrator can make changes to your web server to prevent this kind of linking. Also, you should frequently check your logs for links from other sites, or the over use of certain passwords.
Concern: I'd like to limit the copying of my images whereever possible. I realize some will ultimately get out, but want to limit the distribution.
Resolution: There are a variety of techniques you can use to make it more difficult for the casual brower to save images from your site. This page documents a few of those techniques.

Shrink Wrap 'Em

My own favorite technique for protecting images is to "shrink wrap" the images. How does one do this? Simple: You put a transparent image in front of the image you're trying to protect. The effect is that the user can see the image clearly, but right clicking on the image only lets them save the transparent image.

Why is this my favorite technique? Simple. It's simple to implement, it's supported by every browser I can think of, and it doesn't use any Javascript or Java tricks. In the end, the only way to defeat this technique is to browse the cache of the machine or to parse the actual source of the web site, and either of those two ways is tedious.

In short, here's what you do to make this technique work.

Create an .gif image that is completely transparent. It doesn't matter what size this image is because we'll be resizing it in each web page. In fact, you can make it a single pixel image to save bandwidth. We'll stretch it to fix.
Create a table with a cell that is the same size as the image you're trying to protect. Make the background of this table cell the image you're trying to protect.
Now put the transparent image we created in the cell of the table using the <IMG> tag. Set the dimensions of the transparent image to WIDTH=100% and HEIGHT=100%.

And that's it! Not too tough, huh? And here's an example of how it looks and works. Go ahead and try and save the blue image.

And here's a code snippet to illustrate what we've done. We made the image names relate to their purpose for this example, but you won't want to do that on your web site.

<TABLE WIDTH="400" HEIGHT="600" BORDER="0">

<TR>
   <TD BACKGROUND="protectme.jpg">
   <IMG SRC="shrinkwrap.gif" WIDTH="100%" HEIGHT="100%">
</TR>

</TABLE>

But unless you're devious, your scheme will be figured out quickly. So here's some suggestions on how to tweak this idea.

First, don't call your transparent .gif file "transparent.gif" or anything like that. The first time someone tries to save this image, they'll be given the file name suggestion of "transparent.gif" and the jig will be up. I suggest having lots of transparent image files, one for each image. If the image you're trying to protect is "bigmarv.jpg" then make a copy of your transparent .gif file and call it "bigmarv.gif". That way the suggested file name that the copier is given will look somewhat plausible. Even the saviest browser will probably be baffled by this for a little while.

Second, name your files in a way that makes it more difficult for some sort of automated tool to grab them easily. For example, don't call all your images t1001.jpg, t1002.jpg, t1003.jpg, etc. You're making it too easy for someone to write a program to pull all the images off your page. (Of course they might just use a program to grab the entire site, which leads us back to reasons for not putting your pictures on the web.)

If you use an "image" directory, make sure that you have a "default" web page in that directory, otherwise the user may be present with a nice, convenient list of image files if and when he goes to browse that directory.

JavaScript Rollovers

Coming soon...

Java Foo

Another techique is to use some sort of Java image viewing applet to display each image. More to come on this later.

Back to Index