Protecting Yourself From Image Theft
Written By: Christina Richards (GreekGoddess)

Index

Introduction
Simple Techniques
Written Warnings
Visble Watermarks
Intermediate Techniques
Javascript - Right-Click Disable
Javascript - Rollover Images
Javascript - Image Overlays
Image Slicing
Advanced Techniques
Embedding Images in Flash and Java
Digital Watermarking
Copyrighting
Closing Notes


Introduction

Let's face it. The best way to protect your images is to never put them online in the first place. When it comes to web development and especially graphic design this can become a significant problem.

There are many things you can do to deter image theft. This tutorial will go over the pros and cons of some of the popular methods of image protection on the internet.

Simple Techniques

Written Warnings

Whether or not you've actually gone through the process of obtaining a copyright for your images or not,
at least put some sort of notice next to the image that shows it's yours, whether it's a name and a date of when it was created to show ownership of the image or an actual copyright warning. Also, putting a good copyright footer and company name at the bottom of each page of your site will also help to remind the visitor that you've put a lot of work into what is displayed and wouldn't appreciate it being taken.

Of course, this method relies on the assumption that a person would see the copyright/name of owner and immediately back off, or think twice about right-clicking and taking the image for their own use. And while it's enough for some individuals, for others it's not and that's where more evasive techniques come into play.

(Read more below about actually copyrighting your site)

Visible Watermarks

Another simplistic method to deter image theft is watermarking your image visibly. Most internet sites that do this, usually put their logo or artist name and copyright in the bottom right hand corner of the image. It's very easy to do with a program such as Paint Shop Pro or Photoshop, and can also be achieved by using a program such as Microsoft Paint by using a font color lighter than the area where it will be applied, and although it doesn't have a watermarked look to it, it will still suffice to its purpose.

(Read more below about a more effect technique of digital watermarking)

Intermediate Techniques

JavaScript - Right-Click Disabling

The first and most common form of scripting used to deter image theft is to disable the right-click of the mouse. This method of scripting works best with newbie internet users because this form of deterrent does not really protect your image. Why? Most Mac users only have one button, so the right-click disable is completely useless. Also, it's a matter of configuration for your mouse on your computer. Some left handed individuals may have the left mouse button configured to be used like the traditional right. Not to mention just going to your top menu bar in IE, shutting off annoying javascripts, or working around them by viewing the source of the document, finding the URL of the image, typing it into your browser, and then right clicking it that way without the script disabling it.

The script below is a basic example of the right-click being disabled.

JavaScript provided by "The JavaScript Source"

<!-- TWO STEPS TO INSTALL PROTECT IMAGES:

1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag -->



<HEAD>

<SCRIPT LANGUAGE="JavaScript">




<!-- Begin
function protect(e) {
alert("Sorry, you don't have permission to right-click.");
return false;
}

function trap() {
if(document.images)
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown = protect;
}
// End -->
</SCRIPT>







<center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided

by The JavaScript Source</font>
</center>


JavaScript - Image Rollovers

Another excellent technique that is simple to achieve is using JavaScript to produce an image rollover. When your cursor hovers over the image you want to protect, a copyright or "Don't Steal" image may be displayed. If the user attempts to right click the new image, of course, they will be trying to save the rollover instead of the actual image you're protecting.

Once again, it's important to remember that an internet savvy individual will be able to disable a script like this, or bypass it once again by viewing the source of the page. Also, in slower browsers the image rollover may not take effect immediately, allowing time for a quick grab before the image changes.

Image rollover example provided by HTMLCenter:

<html>
<head>
<title>JavaScript Image Rollovers</title>
</head>
<body>
[img]outImage.gif[/img]
</body>
</html>
JavaScript - Image Overlays

Another evasive technique is to overlay your exisiting website images with transparent gifs. When a person attempts to right-click your image, they are actually saving the transparent gif to their hard drive instead of your image. Once again, definitely not foolproof, but powerful in combination with other technques.

A good example of a working overlay can be found here:
http://mwganson.freeyellow.com/Java4...ingImages.html

Image Slicing

One technique that proves popular in web development is image slicing.
Image slicing is mainly used in two ways:
1. When creating layouts that are graphic intense, a designer tends to break the images up into smaller pieces to optimize the loading times.
2. For creating graphical menus that load slightly faster than the traditional image mapping technique.

But, it can do more. Sometimes, in layouts with very large images after it has been sliced in a program like Paint Shop Pro or Photoshop/Image Ready, it could amount to several pieces of a large puzzle that fits together on your site. This also would deter an individual from taking your image because of all the pieces. And used in conjunction with other techniques proves to be a powerful tactic in avoiding theft issues.

Image slicing in Paint Shop Pro: http://www.jasc.com/tutorials/shafran/
Image slicing in Photoshop: http://www.dreamweaversecrets.com/tu...tdawg/hd2.html

Advanced Techniques

Embedding Your Images in Flash and Java

If you're good at flash or Java, these techniques will work wonders. You can create slideshows with flash and interactive Java photoalbums for use on your site. The idea behind all of this is that with flash, your images become a part of your flash movie and are no longer vulnerable to a right-click or view source. And with Java, your images become a part of an applet. It would take someone extremely familiar with flash or Java to extract the images, and it is possible, as there are decompilers for both. The question is, why take all of that time to do that? At that point, why not just create an image yourself.

Some cons you will also face with the use of flash and Java is different browsers handle things differently. Some users will experience extreme lag and even might find their browser or computer hanging on them while viewing a movie or applet. It varies user to user.

Digital Watermarking

Techniques are becoming more and more advanced as technology advances. Another popular technique, if you have the money to spare is the use of digital watermarking. A leader in the digital watermarking industry is a company called (appropriately) Digimarc. Programs such as Photoshop are already ready for watermarking/reading watermarks, and just need your account information from your paid subscription to Digimarc.

So how does it work? When you register for Digimarc, you are given an ID number. This ID is embedded into your images along with a custom message that you can choose. Digimarc also offers services to track your images on the net.

This technique is extremely effective, because even after extreme rendering, the watermark holds strong. You can also choose how strong to embed it into your image. Worried about bypassing with a screenshot? The watermark can even be read in the screenshot.

Unfortunately, a digital watermarking subscription can prove costly. Although, if you look at it from an alternate perspective, is a couple of dollars worth an image to you to protect it from someone else claiming it as their own?

Visit the Digimarc website for more info at:
http://www.digimarc.com

Copyrighting

Last but definitely not least is copyrighting your graphics/digital works with the U.S. Copyright Office. (For international readers, of course, this would be different). Once again, this can prove very costly, but very effective. You will receive a certificate of copyright and ownership of the image, which proves more than the fake copyrights discussed above. The cost of one work is 30.00 USD, where you can send your entire site or just one image and receive individual copyrights. This can certainly add up and might prove more resourceful if you're to spend the money to go with a company such as Digimarc.

Information on copyrighting your digital works can be found here:
http://www.copyright.gov/circs/circ66.html

Closing Notes

Obviously, I've only discussed some of the main techniques in protecting yourself from image theft. There's so much more you can do with advanced techniques such as CGI scripting to simplistic techniques such as a secure photo album and restricting your images to only trusted users. I hope that you found this tutorial helpful. I realize it has been discussed several times in the Web Development forum, and I felt that a good solid tutorial on the subject might prove helpful to a new or existing user. When used in combinations these techniques are very powerful and effective.

If you have any questions, please feel free to e-mail me at christi_richards@yahoo.com or through the Antionline.com website.

Please feel free to add anything you feel is necessary.