Techniques for Fighting Image Theft

1. Redirect links from external sites to your "DON'T STEAL" graphic

There are numerous tutorials on how to do this around the web, but I most recently read about it on David Airey's article "How to deter thieves from stealing your images and server bandwidth". The technique is an addition to your .htaccess file in the root directory of your site:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yourwebsite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ /images/yourgraphic.jpe [L]


Obviously, replace the bolded text above with your website and your graphic. Notice the weird file extension on the graphic (jpe). This technique completely blocks regular images to be shown on third party websites at all, but the exception allows your custom graphic to be shown. Here are a couple examples:





It's tempting to go all X-Rated or in-your-face rude, but as David points out, it's fairly reasonable that offender simply doesn't know any better so it's better to take an more neutral approach while still getting your point across. One thing you could do that is borderline mean is to make your re-direct graphic like a 10,000px square red block, that's guaranteed to break some layouts =)

2. Add a big copyright to your image, then crop it out on your own site.

Derek Powazek has a dead-simple way of adding non-obtrusive copyright messages to your images. Check out an example image in the style of Derek's example:



This image has a big obvious (yet nicely worded) copyright message at the bottom. Not something you would want to display on every image on your site. So the trick is to toss the image inside of a div that crops that off. Let's say you had an image of 300px which includes a 50px copyright message at the bottom. This is how you could display it on your site:

<div style="height: 250px; overflow: hidden;">
   <img src="yourimage.jpg" alt="your image" />
</div>

The 250px is the height of the actual image part, and the bottom copyright part will get cut off. Unsemantic! Inline-Styles! I can hear the cries now. It's just a technique. It works and it's valid so I'm all for it if it works for you.

3. Include the image as a CSS background-image

CSS background images have that nice quality that you can't just click-and-drag them right off a webpage. Sure, the images are still publically accessible and there are plenty of ways to get your hands on them, but it actually requires a little effort and will probably deter a good percentage of thieves. After all, thieves aren't thieves because they like to work hard.

Some AWFUL (and non-effective) techniques

• Disable right-click with Javascript.
  Since many thieves likely use the right-click, save-as technique for grabbing your images, this might stop them for about 2 seconds. This doesn't prevent click and drags and is more annoying/harmful than anything else.
• Copyright / Watermark your images.
  Great, I get to chose between making my image look like crap or having a tiny copyright that will get ignored or cropped off anyway?
• Slice your images up into pieces and display them in a table.
  What is this, 1999? I know that manually adding a copyright underneath images like up in #2 is a little work too, but this is WAY too much effort for any one image.
• Make your images Flash
  Sigh.

What do other designers think?

Elliot Jay Stocks has a recent article, "How can we stop the thieves?" where he talks about a design he did that was stolen and what he did about it. There is also some good discussion in the comments about the issue of design theft.

Does anyone else have any options or ideas on fighting theft?

Original article here.