Protecting Yourself From Image Theft

Printable View

February 5th, 2003, 03:49 AM
GreekGoddess

Protecting Yourself From Image Theft

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"

Quote:



<HEAD>

<SCRIPT LANGUAGE="JavaScript">


</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:

Quote:

<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 [email protected] or through the Antionline.com website.

Please feel free to add anything you feel is necessary.
February 5th, 2003, 04:26 AM
Dhej

Wow, I think you have brought up something rarely ever thought about. I have only ever run across ONE sight that I know of which actually had preventative measures against copyright image theft. And, it was understandable why too, the reason I discovered the simple right-click disable script was that I tried to "Set as Wallpaper" and poof I got told off. Of course I scratched my head, turned off java and d/led it anyway..., and then deleted it and e-mailed the site owner and she told me that if I told her which photo I wanted she would e-mail me a copy. :)

With digital cameras becoming more and more usable and camera-ish, and the web being a really handy way for a person to publish their art/product, this is going to a bigger and bigger problem.

When I get my site up with my digital photos of Guadeloupe and some more artsy photos that were made possible by the physics of CCD...

I really like the idea of the transparent gif overlay, that is annoyingly clever.

Be of good cheer,
Dhej
February 5th, 2003, 04:39 AM
tyger_claw

Thanks for the great tutorial GreekGoddess!

Can you think of something to stop screen captures?
That's about the only thing I can't think of stopping....
February 5th, 2003, 05:03 AM
phishphreek

Nice tutorial! Very informative!

Quote:

Can you think of something to stop screen captures?
That's about the only thing I can't think of stopping....

This might be stupid... but i'm thinking, if you can capture mouse clicks, why can't you capture keys pressed? I know there are multifunction keyboards that you could reassign keys too...

then again... the image is going to be in your temp internet files folder anyway. how else could you view it otherwise?

there is another way to get around that right click block.

on some of my online courses, they don't give you access to the file/menu bars so you can't view source or anthing. java is required to take the tests, so disabling it isn't an option.

when you right click, hold the mouse button. The message will pop up and tell you its disabled, yada yada yada, then while you still have the right button held, click the ok with the left moue button. the message will go away. let go of the left mouse button, and then the right. you now have the right mouse click option there.

there is also the right menu button on the keyboard that has the same function as your right mouse click. it is next to the right Ctrl button on the KB.

These methods will only deter the ignorent. ;)
But hey, that accounts for about 85% of the people online anyway! j/k :D
February 5th, 2003, 06:26 AM
Dhej

tyger_claw,
Stopping Mac users from taking screen captures would be nigh impossible on Mac OS X as it is a seperate program that does it and not a function of the OS and so stopping someone from using a keyboard combo or print screen key would be utterly useless.

Blocking certain keystrokes migh be viable against windows and classic mac users, but it wouldn't protect against people that use programs to take screen captures.

But a watermark would show up in a screen capture.

I know that the encryption that hides data in pictures lowers quality, but if you were really paranoid one might be able to enclude some kind of digital signature.

Ofcourse there becomes a point where one just has to say "enough is enough," because anymore techno-wizardry would make it impossible to show what you want to show. If an image is worth that much to you lock down your webserver as tight as you can and make a ssl login page that provides access to your prized material. What better way to restrict people from stealing your stuff than controlling who can see it.

Dhej
February 5th, 2003, 07:01 AM
allenb1963

w00t w00t, good tut!!!
February 5th, 2003, 08:04 AM
tyger_claw

phishphreek80, images won't be in the temp directory if you disable caching of sites contents.

Dhej, while it is true what you are thinking, (about ketstroke blocking), like phishphreek said, todays combo keyboards can change that.

As for the watermark thingy, nothing is impossible to manipulate/alter/remove. Just takes a little time.... (but who would be determined enough?)

And like dhej said, you gotta recognize when "enough is enough" and decide that everything is getting a little extreme. If something is that important, don't post it. (ie: upload)

Anyways, back to the issue at had, wicked tut GG!
February 5th, 2003, 08:35 AM
lobstermagnet

Love the thread. Its a great article on how ignorant people are easily played on. It amazing how simply making your web site pictures annoying to take works as protection.

Peace
February 5th, 2003, 10:39 AM
instronics

Excellent tutorial. This tut is going into my "important tuts" folder. I agree with Dhej, this subject is rare indeed. I have been looking for this kind of information in the past and not come up with anything that really helped. Now atlast i can protect my images on www.anniska.gr I have spend alot of time taking these pictures and putting them on that site. Thanx alot GreekGoddess.
February 5th, 2003, 11:17 AM
slarty

To copyright stuff in most countries, there is no need to go to copyright offices. Simply take the media (in whatever form) - give it in a sealed, dated envelope to someone trustworthy (posting it to yourself also works), and that seals your copyright.

If someone then challenges you can present the sealed envelope in court, which proves that you had the copyrighted work first.
June 12th, 2003, 11:00 PM
GreekGoddess

This article came in this month's issue of PC Magazine . It mentions a lot of what I already covered, some in more depth, and others I had not mentioned. I thought it would be a good supplemental read to what I already posted here, because you can never get enough information on a topic.

Protecting Web Images
Image theft is rampant on the Web. Can it be stopped?
By Sheryl Canter
PC Magazine June 30, 2003
http://www.pcmag.com

You don't need to own a Web-based photo gallery to worry about image theft. If you've paid an artist thousands of dollars to design custom graphics, you certainly don't want the images turning up on your competitor's site. And even if all you have is a small family site, you probably don't want pictures of your children available to whoever comes along. What can you do? You probably can't stop truly determined thieves, but there are a number of steps you can take to discourage image theft.

There are four ways to copy Web images: browser commands, notably the right-click menu's Save picture command; site grabbers and online search engines; the browser's cache; and screen-capture programs or Windows PrintScreen feature. It's difficult to block all four methods. Screen capture is particularly hard to block and requires expensive encryption software such as Alchemedia's Mirage Enterprise (www.alchemedia.com) and ArtistScope's CopySafe (http://artistscope.com/copysafe). The alternative is to make stealing images difficult and inconvenient.

Unless you want to antagonize your visitors, don't disable the right-click menu. This makes other useful right-click commands inaccessible. A better way is to use JavaScript to create a rollover, where an alternate images is displayed when the mouse hovers over the image. Rollovers typically display a copyright notice on top of the image, ,but you can swap in any image you like. If the visitor tries to capture the image using the right click menu, the alternate image is captured instead. Remember, however, that JavaScript support is not available in all browsers and can be disabled.

You can also hide your image beneath a transparent GIF that is positioned via an embedded style sheet or a table. Right-clicking saves the transparent GIF rather than the visible image.

Give the image a misleading name, so your visitors are not immediately clued to the trick. If your lucky, the image thief will leave your site before noticing the switch. If he's knowledgeable, however, he can obtain the real filename by looking at the source code for your page.

You can also inconvenience thieves by chopping an image into pieces before uploading. Unfortunately, this is inconvenient for the coder as well as the thief.

Webmasters commonly store images for a site in a subdirectory called images. If a directory doesn't contain an index file, then accessing the directory in the browser pulls up a directory tree with filenames - in this case, the names of all your images. An easy way to prevent this is to put a file named Index.htm in the images directory with a notice that all images on the site are copyrighted. Or if your server is running Apache, create a file with the name .htaccess and put in the line Index-Ignore *. Upload this file in ASCII mode to your images directory, and no file list will be displayed when users navigate to it.

Metatags can hep you prevent browsers and search engines from caching or archiving the files on your site. The following code prevents Google from archiving your files:

Quote:

<meta name="robots" content="noarchive, noindex, nofollow, noimageindex, noimageclick">

For browsers that support HTTP 1.1, this tag prevents caching:

Quote:

<meta http-equiv="cache-control" content="no-store">

Since you can't rely on HTTP 1.1 being available, however, you should include the following tags prior to the no-store tag:

Quote:

<meta http-equiv=Pragma content=no-cache> <meta http-equiv=expires content=0>

Again, this is an imperfect solution because browsers can cache a response marked no-cache as long as they revalidate the response before serving it. If your image is in the browser's cache, a determined image thief can find it.

Using Flash, Shockwave, or a Java applet to display your images is a better way to prevent users from or saving images via the right-click menu. For example, a product called ImageSafe (www.cellspark.com/imagesafe.html) encapsulates images in a Java applet to keep them from being cached or copied. Adding a line of text or another image across a graphic will frustrate (but not ddisable) screen capture. The extra data, howver, increases download times.

Finally, mark the image - either to identify it as yours, or to make it unappealing to steal. For example, Digimarc Corp. (www.digimarc.com) has a solution that lets you create an invisible watermark on your graphics, which can be tracked by a spider to find stolen images on the Web. You can use visible watermarks to make images less appealing, but your own Web site suffers with this approach.

Just as there is no certain way to prevent a determined thief from entering your house, there's no perfect solution for protecting your images. But you lock your doors and windows to make entry difficult, and you can take equivalent steps to foil image thieves.
June 12th, 2003, 11:52 PM
ZeroOne

Wow, I'm impressed by your tutorial, GG. I believe the transparent-gif-stretched-on-top-of-the-original-image -trick could also be done with pure CSS. Screenshots are the worst problem. The only way to "prevent" it would be to add a visible watermarking in the *middle* of the image, because all logos and texts in the corner/bottom/top/side of the image can simply be cut out (leaving the image slightly smaller than the original one). A logo in the middle of an image is not very beautiful but is the only way if you plan selling your images or something and want to provide a sample. Steganography/Cryptography -forum also provides links for tools like that can hide data, like a copyright-notice, into images. And thanks for the PC Magazine -article, I didn't notice this thread when it was on top for the first time. :)
June 13th, 2003, 12:27 AM
d00dz Attackin

Am over here clapping!! This is a very very organized Tut. Two :thumbsup: :thumbsup: up.

Cya
August 11th, 2003, 05:08 PM
kevin85

if using phpbb2.05, can i add this code to where ? for Javascript - Right-Click Disable
August 11th, 2003, 06:00 PM
valhallen

I was also thinking about ways to embed an image in flash to stop people from ripping it but came up with a few problems - number 1 is like GG mentioned you can get decompilers. These do not take the .swf (the file you view in your browser) back down to the .fla (file used to edit the movie) but they will allow you to rip out any images/actionscript/sounds in the file.

One way round this I came up with was to use the trace bitmap function in flash - this converts your .jpg or whatever to a bunch of fills. This however can come at a noticable reduction in image quality. Also it does not stop people from hitting print screen.

So I tried to come up with a way of making flash react when someone hits the print screen function. Maybe by displaying an image over the top of your original one - but so far I have not been able to achive this - anyone any ideas?? Also if the user clicks outside of the flash file and then hits print screen the flash file will not react as it is not active

Another problem is this would not protect against people using other programs to take screen captures such as psp (paint shop pro) as it can be set to react to a multitude of different buttons or even after a certain delay.

All in all it is very hard to protect your digital art - but this isn't something that bothers me - anything I create is free to use (except when it is for a client) but any of my own images/flash files/code people can take and use themselves - I will even send .fla's on request or some (esp for tutorials) I offer for download at my site. (http://www.the-ruc.co.uk) <- shameless plug ;)
All I ask is that they link back and let me know how it was used - is nice to see sometimes what others have added onto your designs.

v_Ln
August 14th, 2003, 12:00 PM
GreekGoddess

My personal opinion is that if you're really concerned over the theft of your images go for a Digimarc account.

You can go with a basic package for 1-99 watermarks for $49.00 USD. (Say for 99 images/basic package, that equals out to about 50 cents a pop, which isn't too bad.) And of course with having to pay for it, you're probably not going to pop your watermark on something as trifle as a sig image or avatar.

I've played around with watermarks. They survive screenshots and quite extensive editing/rendering. The only way to fully get around it is to pretty much crop the picture up, and that defeats the whole purpose of taking it all together.

Stick a watermarked image in a flash movie...and no matter whether they decompile it or take a screen, the watermark will still remain...then you can use Digimarc's tracking to take control of the situation.
August 14th, 2003, 02:08 PM
zrekam

Good posts GreekGoddess,

another thing you can do in combination with the no-cache options,
is to make the images only available to people loading your pages,
so that you don't allow direct linking, opening, saving of the images.
So if someone rights clicks and saves the image, they will actually save a dummy image, e.g transparent gif.

One way to do this with e.g asp is to set a session or page parameter and value.
For example when a page starts to load a parameter "CanLoadImages" is set to 1,
and when the page is done the parameter is set to 0 again. When the parameter is 1 the user is allowed to load images and javascripts( can containg image references ). And when it's 0 the user gets redirected to a dummy image or dummy javascript. ( It's important to remeber that this only work if you have no-caching on the pages, or else the user have the scripts and images in the cache of the browser ).

This is an example on a simple method for doing this, but if you want to take it more advanced, you can make session ids for each image and use cryptography on the image names.

This will of course not stop anyone from taking a screenshot of the image.
August 28th, 2003, 03:57 AM
j3r

Another think you can do is to replace your images with a CGI script that retrieves the image from somewhere outside the web directory. This CGI can be arbitrarily smart/devious. This will only protect you from people who try to link to your images (for example, without giving credit), but apparently this is the vast majority. You can do some pretty devious things, though. For instance (pseudocode)

Code:

// in this example, let's say that "/home/httpd/www" is the web root // this script is called "images" and is located in "/home/httpd/www" // It's called from the browser like "http://www.example.com/images/piccie.jpg" // To the user, it looks just like a directory imageFN = request.extraPathInfo imageFN = regex.match(imageFN, "[\w-_]+\.[gj][ip][fg]") // if you don't do this, 3v1l haxx0rz can read any file on your filesystem by requesting, for // example: // image/../../../../../../../etc/passwd // Directory traversal attacks, don't let them happen to you! if len(imageFN) < 5: print "Content-Type: text/plain" print "" print "Directory listing denied" system.exit() if imageFN[len(imageFN)-3:] == "gif": print "Content-Type: image/gif" elsif imageFN[len(imageFN)-3:] == "jpg": print "Content-Type: image.jpg" else: print "Status-Code: 404 Not Found" system.exit() // replace "127.0.0.1" with your server's IP address. You can probably get this dynamically if ( (serverVars["Referer"] != "") and (getNumericIP(URLParser.Server(serverVars["Referer"])) != "127.0.0.1") and (getNumericIP(URLParser.Server(serverVars["Referer"])) != serverVars["ClientIP"])): // this is devious, it tries to figure out if the person who stole the // image is the one looking at the page. If they are, it behaves normally. // This way, they may not notice that you're one step ahead of them. // otherwise, we randomly replace the image with one calling out the // slimy picture pilferer. if (random.random() < .3): imageF = open("/home/httpd/images/thisPunkStealsMyPics." + imageFN[len(imageFN)-3:]) write(imageF.read()) system.exit() imageF = open("/home/httpd/images/" + imageFN) if imageF == null: print "Status-Code: 404 Not Found" system.exit() else: write(imageF.read())

This could be even more devious by keeping a record of the number of hits we've gotten from an off-site page. The probability of getting the "cut that **** out" replacement picture would start at 0, then gradually rise over time. Alternately, you could just always return a 404 error. This might be even more devious, because the behavior is totally mystifying to the non-31337 image thief.

This approach works well in conjunction with Digimarc. Digimarc gives you ammunition for court, and protects you against people who download and re-post your pics (although digital watermarks cannot stand up too well to image modification). This approach gives you protection against small-time operators, and punishes them without you doing anything. Also, it's not always clear that embedding an image is copyright violation, so suing is expensive. Downloading an image and re-posting it is very clearly a copyright violation, so you can do subpoenas and discovery and all sorts of other expensive-for-the-defendant stuff.
August 28th, 2003, 04:05 AM
x acidreign x

Wow, Christina! This is a rather in-depth tutorial, and if I gave a damn what people did with my work, I'd probably take heed. "Let it never be said that your anal-attentive attention to detail never yeilded positive results" ~Dogma
August 28th, 2003, 06:07 AM
fl34bit3

Great tutorial. A must for all those internet users that are signed up at those photo friend finding sites.

PeacE
-BoB