Protecting copyrighted images on the web

You can put any notice on an image you wish with this system, but it's designed primarily to discourage copying when you don' t want it. If you prefer fair use, via a Creative Commons license, for example, you can just name the photo that way.

Putting a transparent .gif in front of images you are trying to protect with a copyright reminder as the file name has a number of advantages:

The system first educates and encourages people to respect the copyright of your image, which stops many people:

1. When you right-click and save the image, the name it tries to save under is "Please no copying, copyrighted image.gif"
2. You can include the copyright symbol also, and make all this the hover text as well. (Though for hover you would probably want something descriptive of the visible image.)

If the user ignores copyright and tries to save anyway:

1. All they get is a one pixel clear gif -- although they won't know it! It seems to save normally. This is the main method of prevention -- it subtly discourages trying a screenshot, making you think you can right-click successfully.
2. If they leave and go to look at the image later, they may just give up rather than trying to figure out which website the image came from.
3. If the user figures it out while still at the website or returns, they will likely assume a mistake occurred they try again, again seeing the reminder "Please no copying, copyrighted image.gif"
4. If someone is dedicated and savvy, they will view source or cache, or use a screenshot -- and no website technology can block screenshots (other than defacing your image, such as with a watermark).
5. Regardless of scenario, they will be very clear that they are violating copyright!

It works normally in every way:

1. The image can include a hyperlink
2. It can be moved around by the designer just like a standard block element
3. It adds very minimal extra server or code load on the website.

The technology itself is simple:

1. Make the visible image the backround of a div or table,
2. Make the foreground image a 1px transparent gif sized to exactly cover the the visible image.
3. Place most properties (hyperlink, image name/title, etc.) onto the 1px gif

I use a spreadsheet with the words "real image here" when I am creating a number of these so I don't have to do any coding. If it would be helpful I would be glad to provide an example of this also.

Of course, images can always be copied as screenshots, but most folks simply try to save the picture first. If that seems to work, they go away---and only discover later *using my method) that they didn't get the correct pic!

However, always good to at least put copyright text under the image (if not actually over it as a watermark). That way people have been notified clearly of copyright.

Here's the method in a nutshell:

First, give a 1 pixel transparent gif a name that makes the person copying it think they are getting the actual image---and to give them one more notice that they shouldn't be doing so. I name the image "please_no_copying_copyrighted_image.gif" --- so when they try to save it, that's what they see it will be named.

Here is a very old sample example. (This will only work in Firefox or Opera or older versions of Internet Explorer.) Click on any image and a window will open, try to save the picture from the open window to see the effect at work.

Improvement for screen readers:

Simply add a description of the image before the copyright notice. Thanks, GeekGal!