An everlasting problem in web site design is, how to protect the contents from being downloaded (especially: images). Well, there is no definitive way to prevent downloading. But there is a good method to make downloading so hard that a potential code pirate will think twice before trying it: Dynamic Images - Here you can read tow to do that.
Before we can devise effective counter measures, we should be aware that there are different ways of downloading. On quite a few web sites I found pretty ingenious contraptions to prevent direct downloading.
However, as yet (October 2003) I found nothing that could have prevented me from taking a screenshot. Then I could have extracted the image that so obviously was deemed too precious to leave it unprotected.
Such a clever anti-downloading might in effect entice unsuspecting visitors to try their hands at pirating something that seemed not meant to be accessible. (I confess, I felt that urge myself sometimes!)
So, in a sense, you should be cautious not to over-protect your web site. That could turn out quite the opposite way than expected!
Well known is direct downloading by right-clicking onto the image to be downloaded, and clicking Save image as ... in the context menu popping up now.
Another way of direct downloading is, clicking Save as ... in the browser's File menu. The complete document will be saved then, along with a new directory of the same name (plus affix - Files ). In that directory all the supporting files of the document will be saved, including the one that was meant to be downloaded.
You might wonder now, how I can I tell you all that. Well, before you are me scolding me: Look at the next section (How to Prevent Direct Download)
Under MS-Windows, any screen contents can be copied to clipboard in form of a bitmap. From there the bitmap can be imported to any graphic editor (e.g. MS-Paint , which comes along when Windows is installed). There it can be manipulated in a multitude of ways and finally saved to disk (as .jpg , .gif and in many other formats).
Even at the greatest resolution, one screen is less than 1.5 Mega pixels, i.e. will occupy only some 4.5 Mbytes - trifles for a modern PC. That's why also this way of downloading should be given some attention!
An easy way of protecting an image against direct downloading is described in my article How to Protect your Contents.
A somewhat crude method how to protect a document as a whole, disabling the context menu, is also described there.
More elegant it is to present the document in an extra window (see my article Protect your Contents - Create them Dynamically!)
Another method I found at several web sites is to divide the image you want to protect into a number of parts , with each part displayed as an image of its own. Thus, when all parts are displayed adjacently , the visitor will perceive it as a whole. Yet, when the cursor is right-clicked onto it, only the part at the cursor location will be downloaded.
Given that the whole image can easily be downloaded by a screenshot, this seems a method involving much implementation effort but yielding a poor result!
After what was said in section Downloading by Screenshot(s), a professional web site designer just should not overlook that there's another way of downloading. One you simply cannot prevent.
Physically, that is. Very well you can make sure that after downloading it is nearly useless.
To do that we should remember that an image is presented in a - what could be called
In that third dimension you can distort an image largely - the human brain will cancel out the distortions and reconstruct the image. (Remember: The very same effect you experience in a movie or when watching a TV film!)
If you do it right, you can even instigate your visitors' interest - up to a point perhaps that they are ready to shell out money for getting it undistorted.
In the following sub-sections you will see some demos:
For the following simple demo I used a picture of my own, to be sure that nobody will feel treaded on the toes what I did to his/her image.
I simply copied my picture four times side by side, and painted a white bar over each one:
You see, I made something like a "film" out of my picture - each frame of that film showing the same background, with a white bar running top-down. - click: You can do that … (+)
When you have it played repeatedly, it looks like this (click the button!):
Note that in the "film" above none of the "frames" (= individual images) is left undistorted. Therefore, code pirates would have no chance to catch one clean screenshot!
True, "code pirates would have no chance to catch one clean screenshot". But really hard-bitten pirates could decide to take two screenshots and combine them - and get a clean copy.
(Look again for the previous "film": If one screenshot catches the first image, the second one the second image - it would be simple to take the upper part from the second screenshot, combine it with the lower part from the first screenshot - and voila, you have a complete, clean image!)
So it's better to use irregular dynamic images, a "film" with unpredictable "frames". Usually this would be done by a Flash plug in. In this context, however, Flash would rather be breaking flies on the wheel. For example, look at the following:
To get that, I used the same 4-image background as for the previous "film". This time, however, but I simply sprayed white spots onto the background, using different airbrushes. Now it would be extremely hard for a code pirate to reconstruct the image, even from a great number of screenshots.
For coding details or a technical background see the previous extra window.
"Fine" you might say now, "but what does it help me, to present the logo of my company as a dynamic image? My clients will want to print out my online documents - and for printing, dynamic images are lost!"
Well, so you will have to replace the dynamic image by a static one. But only for printing, the static image should never appear on screen. A malevolent client should only get a hardcopy of the clean image (which is much harder to manipulate!).
This can be achieved by a few additional knacks, as in the following demo:
Note that you will have to quote the name of the clean image. A clever code pirate could spy on your source code, thus finding out the name, and download the image file explicitly. Not what you want!
Therefore, you should mask that name and unmask it in your file. (If you want to know more about masking a file name, see sub-section Locking in my article Protect your Contents - Create them Dynamically! There you'll find a demo using masking a file name.)
The ActiveX-object introduced in the previous sections is such a versatile tool! It's a shame that it requires so much clumsy coding. To be really usable, it should need only a 1-line command. That's why I developed a minor Javascript function that, when given some parameters, generates the respective code.
To take a look at it, click the following button and spy on the source code of the extra window popping up:
To apply it, in your coding you need only two things: