Protecting images from "unauthorised" download and re-use is impossible1:
- Images have to be downloaded to be seen in the browser.
- Downloaded images are stored in the browser cache, from which they can be copied.
- In most cases, the images may be saved to disc using File->Save as->Web Page Complete (IE) or File->Save Page As->Web Page Complete (FireFox). This method does not save images specified as background images in CSS, but the CSS files are saved - and those will have the paths to the images.
So, it is impossible to protect images.
It is possible to make it harder to obtain images from web pages though the images are STILL in the browser cache waiting to be copied. There is the infamous "no right click" script - very easy to overcome in many ways, with several disadvantages, such as:
- FireFox can be configured to ignore scripts that change, stop or hide the right-click context menu.
- Where the script does stop the context menu, it also stops choosing the menu options that can bookmark the page.
- With some mouse drivers, stopping the right button on a mouse that has the buttons reversed (for left handed users) stops all the functionality that right handed users have on the left button - and the context menu continues to work!
- The normal menu on the browser is not affected at all - and all the right click functions are on the menu...
Or there is the method outlined below and described in subsequent pages. This method provides the same (lack of) protection as the no right click script, but has the advantage that the right click context menu still appears, but the menu is that for right clicking on text, not for an image. None of the above disadvantages apply. However, the image can still be obtained from the browser cache, or the path to the image obtained using other browser tools. The method described here does three things:
- Makes the "protected" images background images.
- Covers the background image with a transparent gif. If the user right-clicks the image to save it they will save the transparent gif, not the protected image.
- Provide a reminder that images are copyrighted.
The example page shows three images that have been "protected" in this manner.
The code used for the image "protection" is in three parts:
None of the images in these examples are really secure - they can be easily downloaded from the server using the Firefox web developer addin:
Tools->Web Developer->Images->View Image Information, and the Developer Tools in IE8 show the image paths (but no clickable links). The images can also be found in the browser cache.
 There is one method of image protection that has a chance of success - this is using a combination of:
- Low quality, small images
- Add a visible watermark across the centre of the image
- Using Digimarc or similar to trace images after they are "stolen"