|
Is it really possible to protect your images from being copied off the web? This is definitely a frequently asked question and the short answer is NO.
There is no way to protect your images from being copied or stolen from a typical
html web page. There are two reasons for this:
- There is no way to prevent anyone from using a screen capture utility (or
even the Print Screen key on the keyboard) to capture your images.
- As soon as anyone visits your page, all the images on it (along with the
source code) are cached in your Temporary Internet Files and fully accessible.
The best you can do is make it more difficult. This can be done using techniques
to disable right clicking, encrypt your code, and remove toolbar features. JavaScript
is used for most all of these methods. However, be aware that with Internet
Explorer 6, copying images has been made even easier. It's simply a matter of
holding the mouse over the image and using the image toolbar that pops up to
save or even email the image. Matters not if you have the standard right click
menu disabled, a user can still grab your image as easily as if it were fully
enabled.
Disabling Image Toolbar
Fortunately, it's easy to turn off the image toolbar feature in IE6, so
I'll show you how to do that first. Just insert this meta tag between
the <head> </head> tags of your html code:
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
There's also another way to disable the IE 6 image bar. Use the galleryimg
attribute in your image tag. For example:
<img src=”myimage.png” width="210" height="250"
GALLERYIMG="no" >
That's it. Have one of the above codes in all your pages and IE6 users will
no longer be able to use the image toolbar to copy your graphics. Here's a before and after demo for those of you using IE6. This is a page without the disabling meta tag:
http://www.angelfire.com/on3/vxdoin2/ie6imgsave.htm
This is the same page, with the disabling meta tag in the code.
http://www.angelfire.com/on3/vxdoin2/ie6noimgsave.htm
Disabling Right Clicking
Now let's look at the JavaScript options. This is, by far, the most common
one you encounter on web pages. If you try to right click an image where this
code is used, a message box pops up informing you that right click copying has
been disabled. There are many different scripts for disabling right clicking.
Here’s just one example you can try.
Open a new text document. (You can use Notepad or use your HTML editor, such
as FrontPage or DreamWeaver) Copy/Paste the code below into the page
(or code page if using an editor). Save the file with an .htm extension.
<head>
<SCRIPT language="JavaScript">
<!--
var message="Thank you for visiting my site.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</SCRIPT>
</head>
Now view the page in your browser and try right clicking anywhere on the page and as you can see in this premade example...
http://www.angelfire.com/on3/vxdoin2/norightclk.htm
...you can only get the Thank you message, no context menu.
This will make it harder for the newbie to grab your graphics. Although most
of us know that you can still view the source and then save the page and remove
the script from the source code. But it definitely helps. A person has to really
want the image to go through the extra inconvenience of getting it. Many casual
users who normally would just right click to save the image to their hard drive
will just move on.
Disabling Right Click Saving of your Images without Java
You can also use another a simple non-Java method to prevent right click saving
of your images. This involves fooling the user into thinking they are saving
your image, but in fact they are only saving a transparent empty gif.
Here's a demo I made to illustrate how it works. Try saving the image at the
URL below by right clicking and choosing Save Picture As.
http://www.angelfire.com/on3/vxdoin2/bugsy.htm
As you can see when you view your saved file, all you end up saving is a transparent
gif. The image is actually the background for a table cell and the transparent
gif is covering it. It's a simple technique.
Create a transparent gif and place it together with your image file.Here's
the demo code:
<table border="0" cellpadding="0" cellspacing="0"
<tr>
<td background="bugsy.jpg" width="320"
height="400">
<img border="0"
src="bugzy.gif" width="320"height="400">
</td>
</tr>
</table>
Bugzy.gif is the transparent gif which the user ends up saving. Almost
any graphics program will let you create a transparent gif, easily. I use Photo
Editor. I set the size to a small 10X10 pixels and then just click Tools/Set
Transparent Colors.
This method isn't as effective as the Java method, since it makes it much easier
for a user to get your images by saving as complete web page. With the Java
method, the right click would still be disabled when saving the page. The user
would still have to know how to edit the source code.
Encrypting your code
This is fairly easy to do and combined with the right click disabling, it
will give you a little more security. There are many encrypting utilities available
on the net and most are very easy to use. One simple and free utility is called
HtmlEncrypt. It allows you to very easily encrypt an html file and disable
right clicking by choosing a few options, selecting the html file and clicking
encrypt. Just search the Internet for "html encrypt" (include
quotes to ensure both words are matched in the search) and you will come up
with a whole slew of different encrypting programs. Here’s an example page I made that disables right clicking and encrypts the code. It should work with most browsers.
http://www.angelfire.com/on3/vxdoin2/test1.html
Removing Toolbars From Internet Explorer
This is a little more advanced and involves JavaScript to control the browser
window. You can completely remove the toolbar or individual options from Internet
Explorer. I've demonstrated how to do this in my support group, WinTips&Tricks.
This method uses two pages, an intro page with a link on it that
the user can click to enter the main page.
Here's an example you can try to see how extreme you can go with this
method. Again, open a new text document, or blank code page in your HTML
editor program, and Copy/Paste this bit of code, below, into it. Note
the line ONCLICK=open follwed by a URL. that would be your main page,
the page you want to protect. When IE encounters an ONCLICK code, it opens the
URL listed in the code, first. The code runs just as it reads, i.e., "on
clicking, open my page."
<center>
<A HREF="javascript:void(0)" ONCLICK="open(‘http://www.angelfire.com/on3/vxdoin2/mitzu.htm','private','scrollbars=0,toolbar=0,location=0,resizable=0,width=640,height=600')">
Click here to view my photos.</A>
</center>
Now save your text document with an .htm extension and double click
it to open. If you're using IE 4 or above, the result should be a "click
me" page that leads to the main page which should now have no toolbars
on it at all. You can't even resize the main page. And there's not even an address
bar. This is beause of the features arguments added to the Java code. The features
are just what they sound like—features of the IE toolbar.
The arguments are 0 to disable and 1 to enable. As you can see in the code,
all features are set to =0. If you were to change all the values from =0 to
=1, the main page would open up normally with full toolbar and address bar.
Here is a sampe of how the above code works.
http://www.angelfire.com/on3/vxdoin2/demoNoTB.htm
Combined Security
Using the code alone, howver, won't do much to prevent images from being copied.
You would have to combine it with the right click disabling script, at least.
Here's another demo I made at Wintips
that combines all three methods mentioned above, plus a little extra
JavaScript that, on most browsers, won't even let you touch the graphic with
your mouse:
http://www.angelfire.com/on3/vxdoin2/maggy.html
The above examples illustrate just how far you can go with this method. Personally,
I feel that total disablement the toolbar is too extreme and is likely
to turn off most of your visitors, since it takes away their control of the
browser window. Here’s a much more acceptable and less drastic example
that shows how you can remove the View and File menu options,
as well as the Address Bar, but nothing else. This time make an .htm
document with this code (below) in it:
<head>
<A HREF="javascript:void(0)" ONCLICK="open(‘http://www.angelfire.com/on3/vxdoin2/mitzu.htm','private','scrollbars=1,toolbar=1,location=0,resizable=1,width=550,height=300')">Click
here</A>
</head>
Here’s what the result should look like after clicking Click Here
on the URL below. Notice that you can’t view the source, can't save the
page, and can't copy the url.
http://www.angelfire.com/on3/vxdoin2/NoViewSrc.htm
In a real use situation, the first page would be an introduction to the graphics
page. It would be totally up to you on how you would want to design it. The
code should also be encrypted on the intro page. Personally, this is what I
would recommend to artists, photographers and others who want to try to deter
image theft from their site. It's not at all overly extreme and is about as
disabling as you can get for this purpose.
Additional Options
You can also copyright your graphics by digitally watermarking them.
Watermarking is a process that puts a barely visible copyright mark on your
image. Most of the better graphic programs like Paintshop and Photoshop, allow
you to do this quite easily. You can also write your signature on the graphic
or emboss your logo or name into it. Photoshop does an excellent job
of embossing.
However, if you prefer not to mark your image at all, a much better way, though
not as easy for many, is to embed your identity in the code. This involves
hex editing and finding empty values which you can replace with a unique personal
identifier. However, not all images may contain enough empty values to do this;
in which case, you would need to know programming to be able to edit the code.
With hex editing, you can only replace bytes with the exact same number of bytes
you remove. Adding or removing even one byte will corrupt the whole image.
In closing, I should note that I only covered typical html pages here. There
are other non-html ways being used that can help protect graphics from being
copied, but they are less universal. Macromedia's Flash is one and with
it no one can get at your source code. ActiveX is also being used in
this area, but it requires your visitors to install ActiveX plugins.
However, the bottom line is that as long as you can see it on your monitor,
there's a way to capture it. You can only make it a little more difficult to
do so. That's the way it is, at least for now.
|
