På svenska | In English
Protecting your images online is difficult, if not impossible. The problem is that everything that is displayed in the browser window must first be downloaded as files to the local computer. As a web designer you must include paths to the image files in your HTML source code, otherwise there's no way for the browser to find them. And when someone visits your site, the files are automatically saved on his/her hard drive.
Even though protecting images on the Internet is an exercise in futility, there are some tricks that you can use to at least make it a bit more difficult for people to download your images. Personally I think that you should avoid uploading photos you don't want people to copy on public web sites.
Enough said - let's get down to business! Here's a quick summary of the methods available:
This approach seeks to intercept the right-click event in the browser using JavaScript. Once you have control over the right-click event, you can do whatever you want with it; display a dialog box, or even better: do nothing. The main goal is to prevent the browser's default right menu from appearing. Yes - visitors can circumvent this by turning off JavaScript in their browser, pick the image URLs directly from the HTML source code or simply take a screen shot of the page, but at least it makes image downloading a bit more difficult.
|
|
|
|
| Right click - nothing happens | Right click - display dialog |
In the examples above I've used the javascript library jQuery and a plug-in for jQuery called jQuery Right-click Plugin.
On flickr.com they've positioned a transparent pixel (spaceball.gif) on top of the image they want to protect. The pixel is stretched to cover the original image. When a visitor right-clicks and saves the image, he/she only saves the transparent pixel. This can of course be bypassed by checking the HTML source code and getting the URL to the underlying image. Or you could take a screen shot.
|
| Covered by a stretched transparent pixel |
An example of a protected image: http://www.flickr.com/photos/ironrodart/3806887023/
However, in the source code you find this: http://farm4.static.flickr.com/3490/3806887023_243b3b9141.jpg
This method does not make it more difficult to download an image. It's just a way to mark and subsequently identify a picture. The watermark can not be seen with the naked eye but can be read by special software.
More info: https://www.digimarc.com/ and http://www.digitalwatermarkingalliance.org/
Images that have been encapsulated in a flash file can't be downloaded by right clicking in the usual way, but you can still take a screen shots. If you really want to have the original image file, you check the source code for the URL to the flash file (swf). Then you download the flash file and run it through a decompiler that separates the graphics and other resources from the flash file. However, this not something the average person surfing the web is capable of doing. Web developers on the other hand...
Encapsulating images in flash files works best for slide shows. Encapsulating individual images in Flash just to make them harder to download is, even though it's doable, not a very practical solution.
An example: http://www.flashimagegallery.com/pics/artwork/
A decompiler for Flash: http://www.flash-decompiler.com/
This method is primarily used by stock photo agencies who want to display their images on the web. The images are marked with a large, fully visible semi-transparent logo/mark. This effectively renders the image useless for everything but sketching and mock ups. After all, nobody wants marked images on their site. This method is not practically useful for images that you actually want to look nice online, but it's very effective for protecting images that you don't want people to steal.
Stock photo site that uses this technique: http://www.istockphoto.com/file_browse.php
Do-It-Yourself guide (Photoshop): http://www.all-things-photography.com/add-a-watermark.html
If you really want to protect your graphics, there are commercial products, like Copy Safe. I have never used this kind of software myself so I don't know much about it. I guess it might be useful for photo agencies, banks, e-learning businesses or other companies that could lose a lot of money if their content is copied and redistributed on the Internet. In this case they have really brought in the the heavy artillery to ensure that what appears on the screen is impossible to reproduce in any way - not even through screen shots.
Copy Safe uses a technique that involves encryption and a domain lock. The big problem with Copy Safe is that in order to view the content you must first download and install a browser plugin. This will never work on a public website, but may be an option for intranet, extranet or special password protected web sites where people are willing to go through the trouble downloading a plug-in in order to see the content. I see this solution as cumbersome and expensive and not realistic for public web sites.
More info: http://www.artistscope.com/copysafe_web.asp
Copyright © 2009 Thomas Kahn.
