CSS Cookbook, 2nd Edition

2017-07-07 02:10:07

Problem

You want to make it difficult for people to copy your images from your web page.

Solution

Using a single pixel transparent GIF as a place marker, wrap a div element around the img tag:

Then bring in the image into the web page by using the background-property and making sure to set the width and height of the image in both the div and img elements:

div.slide { width: 500px; height: 468px; background-image: url(face.jpg); background-repeat: no-repeat; } .slide img { width: 500px; height: 468px; }

Discussion

Having the single-pixel GIF as a placeholder is not necessary for the intended image to be displayed; in fact, you can do away with the img element altogether and still have the source image be displayed:

The purpose of the transparent image is to be used as a feint. The users will think they are downloading the image they desire, when in fact they are downloading an innocuous image.

Microsoft's Image toolbar

In Internet Explorer 6 for Windows, Microsoft includes a feature called the Image toolbar.

With this feature, a visitor to your site can easily email, download, or print your image with merely a click of the mouse. To keep the image toolbar from appearing on your web pages, add the following meta tags between the head elements:

It's a slight a pain for developers to add code to their web page to keep someone else's product from stealing your images, but there is not much a developer can do since Microsoft produces the most popular browser.

No images are safe

Even with the solution and Image toolbar workaround implemented in your web page, no image is safe from being copied from your web site to a user's computer.

First, images are automatically stored by the visitor's browser and kept in temporary folder for quick reloading of web pages. These cached images are routinely deleted after a fixed amount of time or whenever a user clears their browser's cache.

However, the browser often renames these images automatically and most visitors don't even know where the cached files are located on their computer.

The most direct route a user can take is to simply take a screen capture of their desktop with your image displayed on a browser. With the screen capture taken, they can take the screenshot to their favorite digital imaging software application and crop the image.

Although these hindering methods may block out some visitors, they are not solutions that will work all the time.