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?
Loading ...
1
If someone really wants it, they’ll take it. Deterrents are so - so. Right -click disable is a definte no-no, but more effective than either of these techniques IMO.
#1 - Works only if they link to the image, not really effective on right-click > copy
#2 - Works well but again only if images are being linked to or as a nice surprise to the morons that don’t know that using others images is not cool… and that refers to you Mr CEO that tells peeps to grab images from the Web for the company newsletter.
- Make the image link to your copyright/terms of use page or better yet make it all e-commerce-afied and link it to a page selling the image!
- Doesn’t the average Web user need some education? CNN needs to have more stories on the cost of stealing images: http://www.pdnonline.com/pdn/newswire/article_display.jsp?vnu_content_id=1001096883 and http://www.cgstock.com/essays/vilana for example. That being said, I think both techniques in the post could serve as educational tools but both are really just deterrents…
Is there any way to add in some exif data so I can just do a Google Images Search or something like that to find all of the images that might be hijacked? I’m less concerned with links to images as log files should be able to tell me where things are going amiss, but I’m really more interested in straight steals.
The image theft battle continues…
~Kevin
Comment by Kevin Segedi — February 21, 2008 @ 10:30 pm
2
Isn’t the first one the best because it fully protects your pictures?
Comment by Hatkirby — February 21, 2008 @ 11:02 pm
3
@Hatkirby: Like Kevin mentioned, #1 is only good to prevent hotlinking while #2 prevents thieves who steal the image and host it themselves. You could actually use both of the techniques in conjunction.
Comment by Chris Coyier — February 21, 2008 @ 11:07 pm
4
Thanks for the mention, Chris.
Of course Kevin’s right that these techniques won’t prevent those who really want to copy your image, but they will prevent people from using your web host bandwidth, which was the issue when I wrote my article.
There’ll always be a way to get the image you want, but the best approach is to look at how stock photography websites protect themselves. They have the most to lose, so it’s fair to say they’ve put most research into the topic.
All the best, and have a great weekend.
Comment by David Airey — February 22, 2008 @ 2:26 am
5
I was just thinking about this topic. I don’t care so much if people copy my image, I just don’t want my bandwidth being stolen.
Comment by Tommy Day — February 22, 2008 @ 6:05 am
6
Basically there are two reasons why you don’t want people stealing your images:
1) Bandwidth
2) Copyright and money
It is easy to enforce measures so that people don’t steal your bandwidth, but it is much harder to stop people stealing images altogether. Screensnap anyone?
Comment by larrybn — February 22, 2008 @ 9:06 am
7
Rewriting a hotlinked image wont actually save you that much bandwidth on a popular site since you’re still actually sending an image anyway, so if it’s Bandwidth you’re worried about I’d either have a very small image as the replacement or not rewrite the URL to another image at all.
Comment by Mathew Byrne — February 22, 2008 @ 7:06 pm
8
LOL. If I really wanted that image, there are plenty of website rippers out there that are capable of downloading all the contents of a web page, or entire website.
To make life easier, I could just keep the web page open, and rip the image from my TEMP file.
No matter what ones does, there is no sure fire way to protect your content.
Comment by RLS0812 — February 23, 2008 @ 6:38 am
9
I have fun reading this article especially the first part. It is very useful since lots of sites are hotlinking images from my website. I’m going to try this out and break their layout. LOL.
Thanks for the tips.
One Winged Angel,
Malaysia.
Comment by One Winged Angel — February 23, 2008 @ 9:12 am
10
Hotlink protection is no big deal–most host servers have the option built right into the cpanel so you can just turn it on. So, if you host your site yourself you probably already have it available.
I HATE the no-right click thing–especially because it also disables right click on text which means you can’t copy ANYTHING, including information about the artist/photographer so you can link to it.
The copyright built into the image isn’t that big of a deterrent (except if the person doesn’t know it is wrong or doesn’t know how to use a photoshop program). If they are downloading the image and uploading it themselves then they will crop the copyright off anyway.
I like the idea of having the image link to a print sales site and have found that for my art work the best way to go is to let either Artwanted or Zazzle host the image for paintings I have prints of and use that code to link which autolinks back to the print. For non-print works I use Picasa which also has protection built in. It isn’t perfect but it is better than finding my artwork being claimed elsewhere (and so far I haven’t–be it that it just isn’t worth copying or that the protection on those sites is working I don’t know. :))
Comment by heather — February 24, 2008 @ 9:20 am
11
Yeah at the moment one of my websites has been using huge amounts of bandwidth and im thinking this may be the problem..
Comment by Jermayn Parker — February 25, 2008 @ 5:52 pm
12
At the end of the day, there isn’t anything you can do. You don’t need website ripper software to get a web page - IE will do this for you… File.. Save As.. change Save as type to Webpage, complete. This will save the lot - javascript includes, images, css files.. everything. Also remember that Print Screen conquers all too. Then just load up (even to Paint) and crop the image out. You could use an image watermark on images you really don’t want twocked, but its a bit of a pain. Although, saying that, I do like point #2 to stop leechers linking, but if they are using the image, they’ll just save as then crop.
Nice site btw. I like your layout.
Comment by Chuck Norris — February 26, 2008 @ 6:10 am
13
If you’re really serious about protecting your images then you need to bypass the whole first step of “try to keep people from stealing your artwork”. Beacuse, let’s face it, if someone really wants to take your art then they’ll find a way to do it.
My recommendation is go directly to the second step of tracking down those who did steal and are using your images without permission. For this, I use DigiMarc. Simply embed a non-visible watermark code into your image when you’re creating it (visible watermarking is also available). Then, if it gets used anywhere on the net, Digimarc will track it and notify you of where it’s being used. Additionally, even if they crop or change the image, they can’t remove the embedded code — it’s always there.
As I mentioned, this is if you’re really serious about protecting your work because the service has a pretty high yearly cost of about $500. On the upside, it works!
Comment by Creative — March 5, 2008 @ 9:44 am
14
The “disable rightclick” is worthless, because you can get the image from the browsers cache.
Comment by GFYM — March 5, 2008 @ 9:24 pm
15
Thanks for the article. I put a lot of my drawings on the web and I usually put a watermark right on the image itself via Photoshop. I type in my information, rasterize the layer then lower its opacity to about 20-25 percent. It does make the image look a bit unappealing, but it’s a small step to ensuring that even the picture’s cropped, it still has my name on it. Sometimes I try to be creative and put the watermark as part of the drawing: small enough to be unobtrusive, but noticeable enough to discourage theft (or at least I hope so).
Comment by Lunedi — March 5, 2008 @ 10:21 pm
16
Ugh… I use Yahoo! Mail’s nice RSS reader to pull in this (and a few other) feeds. Since the implementation of the bandwidth “fix” I see the “Momma don’t allow no bandwidth stealing” image instead of the photos for the post. Now I actually have to go the the site to see the images in the posts. I don’t like this… Not sure how useful image replacement techniques are in the real world.
Comment by Kevin Segedi — March 7, 2008 @ 12:02 am
17
Print Screen
Comment by Keiran — March 10, 2008 @ 6:00 am
18
As an avid fan of Open Source I have to say come on… You got a great idea or image or script share it. Let’s face it no matter how good we are in our particular field there is bound to be someone who says “Hey that’s a great concept. but it would be better like this. I admit that stealing someones bandwidth is bad but lets face it as with everything else if someone REALLY wants it you can’t really stop them. No matter what steps we take the phreaks out there can always come up with some new kink to get what they want.
Comment by Thomas Evans — March 10, 2008 @ 8:39 pm
19
Why not protect it (a little) with a nice looking, (partly) transparent flash-frame above the picture like this:
<div id="protect_me" style="background-image:url(PICTURE.jpg); width:150px; height:100px;"></div>
<script type="text/javascript">
var so = new SWFObject("FRAME.swf", "frame", "150", "100", "8");
so.addParam("wmode", "transparent");
so.write("protect_me");
</script>
Comment by Tobias Franz — March 11, 2008 @ 12:59 pm
20
The code in #1 should read as follows:
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?yourwebsite\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule \.(jpe?g|gif|bmp|png)$ /images/yourgraphic.jpg [NC,L]
Points to note:
- the difference between the character literal “\.” and the regex atom “.” used on lines 2 and 4
- the removal of the duplicate “jpg” from the parentheses on line 4
- the addition of the [NC] flag at the end of line 4
The fact that the image had the unusual extension “jpe” is irrelevant - this technique works just as well with “jpg”.
You can learn more about regexes on regular-expressions.info, and a nice summary is available in this e-book (scroll down to table 2.2).
Comment by Rufo — April 15, 2008 @ 4:22 pm
21
yeah, i don’t see too much need to protect images… unless you were hosting some hugely trafficked thing like porn or something, bandwidth is easy enough to come by and a few people linking to your images isn’t going to kill you.
for copyright protection, people using php with the GD image library can easily enough write a script that watermarks any image you need to protect.
Comment by goldenapples — April 23, 2008 @ 10:09 pm
22
I’ve used the RewriteEngine code for a long time, not to prevent image stealing because that’s pretty difficult to do, but to prevent bandwidth theft.
I did run into a problem though. I commented out the line RewriteCond %{HTTP_REFERER} !^$ because apparently some servers intentionally do not send the referer message with the intent of stealing bandwidth. commenting out the empty referer code works except that it introduced a problem with IE browsers. (don’t you just love Microsoft?) if someone clicks on an image link in my pages to open a larger image in a new window, IE doesn’t send a referer and the user gets an error code instead of the enlarged image.
to be nicer to IE people, it appears that I will have to put the empty referer code back in…
mmm… here’s an idea. what about redirecting hotlinked urls to paid advertising (google, etc)? they still use your bandwidth but you’re selling advertising via somebody else’s site. doable???
cheers,
Gregory
Comment by Gregory — April 28, 2008 @ 10:02 pm
23
If you float a transparent GIF bearing a watermark over your image anyone using a simple rightclick save will be rewarded with a picture of the watermark on its own.
A enhancement to this is to use a mouseover javascript to substitute a warning by swapping the GIF when mouse is over the image. See my gallerypage
Comment by Ali Reid — May 8, 2008 @ 4:52 pm
24
@Ali: I like that idea, simple. Even if you don’t use it to display a message or have a rollover or anything, it simply prevents people from dragging the image right off your page.
As many people have said, nothing is totally perfect, but it’s nice to have little preventative measures where we can.
Comment by Chris Coyier — May 8, 2008 @ 6:26 pm