Protect Images Using a Transparent GIF or PNG

This technique uses a transparent "cover" to protect your web page images. Here's what you need to do:

1. Place your image on the web page, preferably inside its own layer (div).
2. Create a transparent gif or png file. This can be the same size as your image but it doesn't have to be. For example, you could create a single 1-pixel transparent gif to use as covers for all your images — you just need to specify the width and height in your HTML.
3. Place the transparent image alongside the original image, but use CSS to position them in the same place (position:absolute).
4. Use CSS to make the transparent image appear on a layer above the original image.

The end result is that when a visitor right-clicks the image to save it, they're actually right-clicking and saving the transparent image instead of the real one. Try it with the photo on the right.

Here's the code I used, which you should be able to adapt to your situation:

<div style="width:180px;height:186px;">
<img src="kids.jpg" width="180" height="186" alt="" style="z-index:0;position:absolute;" />
<img src="cover.gif" width="180" height="186" alt="My Kids"" style="z-index:1;position:absolute;" />
</div>

Please remember that there is no such thing as a fool-proof way to prevent people from downloading your image. Although this technique will deter casual thieves, anyone with basic HTML knowledge will be able to figure it out and still steal the original image.