New & Notablenew & notable
e-Noticessign up for e-notices
 
Searchsearch Lucid Images
 

Side bar spacer

Copyright - Image Protection

print this article

Watermarking & Tables | Java & Perl Scripts | HTML BODY Attributes
Bandwidth Theft | Disable IE6 Image Toolbar | Meta Tags & robots.txt
Pop-Up Image Display | Encryption | Commercial Programs | Our Solution?

Like most photographers and artists, you would like to be able to display your images and prints on the Internet without the fear of your work being used commercially without your permission or knowledge. Keep in mind that anything you upload to the Internet can be taken. NO method is 100% foolproof. With this said, I would like to mention a few methods which offer various levels of protection for the images and content of your web page.

Watermarking

Both visible and invisible watermarking involve "stamping" your image in such a way that it can be identified as your image. Using a combination of the two is a very good way to make sure everyone realizes that you own the rights to your images.

Visible watermarks are easy to create in your photo editor. You can either type in the word SAMPLE or © Photographer's Name on the image itself. Make this large enough so it is readable and not easily "erased" or cropped out of the image.

Invisible watermarks, like those created by Digimarc, are usually available as a plug-in for your photo editor. The watermark, usually a personal Identification Number, are digitally embedded within the image. While these watermarks can be defeated, they offer proof of your ownership if they ever turn up in a publication without your permission.

Mouseover Copyright ExampleIn some situations, I like to create a roll-over image. This is a simple mouse-over technique which requires two images the same size. One image is your photo and the other image consists of your photo, which is set to 80% transparency, and the rest is your copyright information. If you right-click on the image, you'll only be able to grab the rollover image which contains a partially transparent image with a lot of text.

The other method I occasionally use is placing the photo as the background image in a table. The table must be set to the same dimensions as the image. Then place a null image (a blank, transparent gif image which is the same size as the photo and the table) within the table. When someone right clicks on this image, all they can grab is the null image. Of course this does not prevent someone from reading your source code and getting the link to the real image. However, it does make them have to work for it. You can also accomplish this same effect by using Cascading Style Sheets. Note: This CSS technique will only work with IE.

<span style="background: 
url(http://www.website.com/images/filename.jpg)no-repeat">
<img src="http://www.website.com/images/nullimage.gif"
width="100" height="70" border="0" alt="description"></span>

JavaScripts, Java Applets & Perl Scripts

There are a couple of methods which website designers can employ on their web sites to make it a little harder for the casual "thief" to grab images from web pages. JavaScripts should placed between the <HEAD></HEAD> tags of your HTML document.

Word of warning: JavaScript will not work if the visitor's browser is not Java enabled or they have JavaScripting turned off.

The Right-Click script, available in several variations, will create a pop-up alert window which states that the image is copyrighted and you should contact the photographer/artist for more information. The following script from Dynamic Drive DHTML disables right-clicking when attempting to save an image on this page. The right-click still works for the rest of the page.

Place this script at the end of the page right before the </body> tag.

<script language="JavaScript1.2">
/*
 Disable right click script II (on images)- By 
 Dynamicdrive.com For full source, Terms of service, 
 and 100s DTHML scripts Visit http://www.dynamicdrive.com
 */

var clickmessage="For more information on this © Copyrighted 
image, please contact INCLUDE YOUR PERSONAL INFORMATION HERE"

function disableclick(e) {
 if (document.all) {
 if (event.button==2||event.button==3) {
 if (event.srcElement.tagName=="IMG"){
 alert(clickmessage);
 return false;
 }
 }
 }
 else if (document.layers) {
 if (e.which == 3) {
 alert(clickmessage);
 return false;
 }
 }
 else if (document.getElementById){
 if (e.which==3&&e.target.tagName=="IMG"){
 alert(clickmessage)
 return false
 }
 }
 }

function associateimages(){
 for(i=0;i<document.images.length;i++)
 document.images[i].onmousedown=disableclick;
 }

if (document.all)
 document.onmousedown=disableclick
 else if (document.getElementById)
 document.onmouseup=disableclick
 else if (document.layers)
 associateimages()
 </script>

Note: Many visitors to your site use the right mouse click as a means of navigation. Enabling a script that disables the right-click has the potential of frustrating many visitors.

If you would like to be more specific and only protect certain images on your page, use the following right-click script. Place JavaScript code in the header and call the function within each image tag.

<script language="JavaScript" type="text/javascript">
<!--
function popupMsg(theMsg) {
alert(theMsg);
}
//-->
</script>

Now call the PopUp Message script from within your image tag.

<IMG SRC="images/imagename.jpg" onMouseDown="popupMsg('For
more information on this © Copyrighted image, please contact 
INCLUDE YOUR PERSONAL INFORMATION HERE')">

HTML <BODY> Attributes

If you do not want to use JavaScript and pop-up windows, there is an HTML solution that might be a good choice for a photo gallery. In order to disable Right Clicks, Dragging and Selecting for the entire page, add the following to the <BODY> tag: 

<BODY oncontextmenu="return false" onselectstart="return false"
ondragstart="return false">

Stop Bandwidth Theft & Hide Image Directory

Wildlife pictures - Bald Eagle © Jan A. AllinderSiteWizard offers a solution to one of the most annoying problems a webmaster has - Bandwidth Theft. When another website links directly to the images on your website, this is considered Bandwidth Theft. Talk about adding insult to injury! First they steal your image and then they hit your pocketbook by using up your bandwidth.

CHImageGuard is a simple, yet elegent PHP script. Once you've downloaded this free script, you need to edit (in your favorite text editor) the following variables:

  • $validprefixes - your domain or domains (www.domainname.com)
  • $homepage - (www.domainname.com)
  • $imagedir - the exact location of your images (i.e. "/users/yourname/www/imagedirectory/")
  • $email (optional, if you would like to be notifed when someone has attempted to call up the script on their website)

$validprefixes
CHImage checks to see if the referring url/domain (the place where the image is being called from) matches any of the domains you've entered. If it doesn't, visitors using your script will be taken to your home page ($homepage).

$imagedir
Once the referring url has been verified, the script goes to the named image directory and grabs the image. Your image directory is hidden from view in the source code, which means the visitor cannot use the direct url to your image because it is not shown.

 <img src="chimage.php?image=imagename.jpg" alt="Image 
Description" width="300" height="200">

It's a good idea to name your images directory something not as obvious as "images" or "pictures". Use an obscure name that only you know about.

The SiteWizard provides detailed instructions on how to set up this script as well as the other scripts on their website. In addition to PHP scripts, The SiteWizard offers numerous tips and suggestions for webmasters. I suggest you read their article "Preventing Bandwith Theft with .htaccess".

Disable Internet Explorer 6's Image Toolbar

IE6 Image ToolbarIn IE 6, whenever your mouse hovers over an image the Image Toolbar pops up. This toolbar will allow you to print or save the image. To prevent this, insert the following between the <HEAD></HEAD> tags to disable the Image Toolbar for the entire page.

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

To disable for individual images, place 

GALLERYIMG="no"

in your IMAGE tag. 

<img src="images/filename.jpg GALLERYIMG="no"
alt="ImageName">

Meta Tags & robots.txt

While I really don't have a problem with search engines indexing our web sites, I don't want the images indexed or cached on their servers. By including meta tags within the head tags <head></head> of your web page and adding robots.txt to the root directory of your web site, you add a little more security to your site.

The content of the Robots meta tag includes to directives: [NO]INDEX and [NO]FOLLOW. The INDEX directive specifies whether a robot should index the page and the FOLLOW directive specifies whether a robot should follow links on the page. If you DO NOT want the robots to either index or follow links on your page, you would include the following between the <head></head> tags of your web page: <meta name="robots" content="noindex,nofollow">.

Since search engines look for a robots.txt file as soon their spiders or bots arrive on your site, we can list the directories that we do not want them to crawl. "robots.txt" is a simple text file, which you can create in Notepad or any text editor. NOTE: The name of the tag and the content are not case sensitive.

The robots.txt file needs to be saved in the root directory of your site where your home page is located. The following robots.txt file bans all search engines from indexing or caching the cgi-bin and images directories. It also prohibits the indexing and caching of all multimedia files from specific image spiders (AltaVista, Ditto, Google & Picsearch).

User-agent: *
 Disallow: /cgi-bin/
 Disallow: /images/

User-agent: vscooter
User-agent: DittoSpyder
User-Agent: Googlebot-Image
User-Agent: psbot 
 Disallow: /

For more information about meta tags and robots.txt visit Spider Hunter and The Web Robots Pages.

Pop-up Image Display

Northern Sea OtterWe use Macromedia Dreamweaver MX. There are many free short-cuts or extensions available from Macromedia. One particular script, JustSo Picture Window 3 by E. Michael Brandt is ideal for photographers. The extension creates a JavaScript which calls up a larger image in its own pop-up window. You are also given the option to encrypt the link to the larger image. When viewed, any click will close the popup window. This is not only an easy way to link a thumbnail (or text) to a larger image, it makes it a lot more difficult for someone to grab the image. Highly recommended!

Encryption

Encrypting your source code is one way to make it more difficult for someone to find the location of your images. The easiest way to disguise your source code is to use an URL-encoded format (converting all hexadecimal sequences to ASCII characters). Dynamic Drive has a free source code encrypter which you can use to encrypt your source code.

Before:

<h2><a name="watermarking"></a>Watermarking</h2>
 <p>Both visible and invisible watermarking involve &quot;
 stamping&quot; your image in such a way that it can be 
 identified as your image. Using a combination of the two is
 a very good way to make sure everyone realizes that you own
 the rights to your images.</p>

After:

<script>
 <!--
 document.write(unescape("%3Ch2%3E%3Ca%20name%3D%22
 watermarking%22%3E%3C/a%3EWatermarking%3C/h2%3E%0D
 %0A%20%3Cp%3EBoth%20visible%20and%20invisible%20
 watermarking%20involve%20%26quot%3Bstamping%26quot%
 3B%0D%0A%20your%20image%20in%20such%20a%20way%20that
 %20it%20can%20be%20identified%20as%20your%20image.
 %20Using%20a%20%0D%0A%20combination%20of%20the%20
 two%20is%20a%20 very%20good%20way%20to%20make%20
 sure%20everyone%20realizes%20that%20%0D%0A%20you%
 20own%20the%20rights%20to%20your%20images.%3C/p%3E"));
 //-->
 </script>

As you can see, it makes the source code a little harder to read. As with any image protection method, this only makes it more difficult for someone to grab your images. It does not actually prevent them from taking an image.

Commercial Programs

There are a few commercial scripts available which help prevent people from downloading your images. They do not require any downloads, plug-ins or readers. The following programs are a good, cost-effective solution for image protection. These programs require programming skills.

Protec

Protec by Invisitec (requires basic CGI programming skills) - License pricing starts at $49 for up to 125 images.

Secure Image

ArtistScope's Secure Image with prices starting at $15 is somewhat of a hybrid between scripting and encryption. Secure Image is easy to use. Your images can only be viewed from your website or folder. Secure Image Pro ($85) offers more flexibility. You are able to control various image display properties and batch process several images at once.

CopySafe

Artistscope Image Protection protects images and other content from saving, printing and capturing. A free plug-in viewer is required to display the image in your browser. Images & content can be displayed from any normal web page on any server. With careful setup, CopySafe can help protect all of your web pages including images, text and other page content. Prices start at $400.

With the CopySafe PBV version, ArtistScope's server hosts your encrypted images. Your images are protected not only from downloading, but also from printing and screen capture. The CopySafe PBV system can be installed to any website that has FrontPage extensions installed. Prices vary according to the number of image/page views you purchase.

Note: While CopySafe offers a great solution to image and content protection, there one feature that really annoys me. Once you have a CopySafe protected image or content displayed in your browser, all of your other Windows programs are disabled.

What's Our Solution?

We use Cascading Style Sheets & the IE 6 Image Toolbar META tag on of all our web pages. We add a visible copyright and an invisible watermark to all of our images. In addition to this, we use robots.txt and prevent anyone from hot-linking to our images (check with your hosting service). However, we do not use any special techniques, JavaScripts or programs to protect our images. Why? If someone really wants to take our images, they can. Also, many of the image protection techniques make your web pages inaccessible to people with handicaps. Since the primary goal of our web site is to provide information about photography and wildlife, we choose not to limit the users ability to navigate our site and enjoy our images.

We're always searching for solutions that will offer some protection for our images and content. If you find a solution