It is virtually impossible to prevent a visitor from copying and saving pictures you have displayed on your web site. Disabling the right-click menu is not effective since the browser’s Edit menu often has the same options. Also, most modern browsers allow add-on extensions or plug-ins that enhance the visitor’s browser by adding additional copying and editing features. At the very least, a visitor can always do a screen capture and crop the resulting image to suit their needs. The obvious solution is to not display images that you want to keep private. The next best option is to watermark the images to prevent their unauthorized use.

This tip provides a third option for image protection that does not require disabling the right-click menu. And while it is not foolproof, it does put an obstacle in the way to hinder browser image copying and saving options. The method presented uses a standard SiteSpinner image object and CSS.

The procedure outlined here is to use a transparent image and then render the actual image as a background image of the transparent image. This accomplishes two things:

1. While the Save Image menu option is still active, the image to be saved is the transparent image instead of your actual image, and
2. Since the transparent image “covers” the background, the browser’s Save Background feature will not “see” the background to save.

If you right-click the image below, you will be able to use the browser’s image menu options, but the image will be blank.

Before beginning, you must have a transparent image. A GIF version can often be found on the web and is usually named spacer.gif. If you have a paint program capable of producing a transparent GIF image, then you can make your own. It does not have to be big; 10 x 10 pixels is enough. If you cannot create the image yourself, a zipped version can be downloaded here.

Since the two images will be covering each other, begin by placing your real image on your work page and position the image where you want it. This will provide a visible target for the next step.

Next, place the transparent image on your work page and position it on top of your real image. Then resize the transparent image to cover the real image. It is best if the transparent image is just a tad bigger than your real image. This will prevent the real image from sticking out from under the transparent image when your project is published.

When the two images correctly overlay each other, you should lock the transparent image in place on the work page. If you do not place a border around the transparent image, it will be very hard to see, so clicking on the object could cause it to shift position. Locking it will prevent it from accidentally moving while you design the rest of the page.

You should also change the transparent image’s object name to something more descriptive. Since the object is invisible, having a standard object name makes it hard to identify in the object list. A descriptive name will make te object stand out from the other names and allow you to find it on the page by name rather than clicking where you think the invisible image is. Also, you will need to know the object name of the transparent image for the final step.

Using the Shift key+Left mouse button combination (or by selecting its object name), bring the real image to the top of your work page. You no longer need it on the work page, so delete it.

For the final step, you will need to use a custom header to add the CSS code to create a background image from your real image. CSS must be used because the SiteSpinner shading tool does not allow background images to be used with other images. Even if this were allowed, the SiteSpinner feature of rendering the background with the object would create a merged image and negate the hidden image. The CSS code to enter into the custom header is:

<style type="text/css">
#oobject_name {
  background-image:url(path_filename_to_real_image);
  background-repeat:norepeat;
}
</style>

where:

Your hidden image is now ready to be published. Because your real image is not included in your project as a SiteSpinner object, you will need to make sure it is uploaded to your web site and placed into the proper location specified in the CSS code.