There are a few.
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 of examples:
It’s tempting to go all 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 a 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?
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
Isn’t the first one the best because it fully protects your pictures?
@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.
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.
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.
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?
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.
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.
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.
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. :))
Yeah at the moment one of my websites has been using huge amounts of bandwidth and im thinking this may be the problem..
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.
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!
The “disable rightclick” is worthless, because you can get the image from the browsers cache.
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).
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.
Print Screen
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.
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>
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).
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.
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
@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.
In addition to Ali’s Suggestion:
One way that I have found, is to overlay a 100% transparent png tiled overtop of the image. This can be included in a CSS class for the images so its automatically applied to every image tag. The webdesigner wall has a great tutorial on how to use CSS to overlay images over top of other ones. With this technique the user will not even be able to do the “right click” “save as” because they will be saving a useless transparent PNG each time.
This technique also works for protecting the WHOLE content of your site, including text from being copied etc, although view source is always an option to get around that…
The only way to steal your image would be to print screen then cut it out in photoshop, and if they are that desperate then there is nothing you can do…
I could be off my rocker with this so let me know if I am. I’m a bit of a CSS n00b…
NP
What I don’t get here:
You write an article on your site against image theft which is a good idea, I’m always interested to discover new ways to prevent this. When I finished reading the article I see a section named “Theoretically Related Articles:” and as 3rd point there is an article called: “How To Steal A Websites Background Image” (link: https://css-tricks.com/how-to-steal-a-websites-background-image/)
I’m very dissapointed seeing this. How can you teach people how to steal images from a site?
I have tried all this techniques… ultimately if a person saves a page as full html file, he can get the images anyways.
Good tips anyways. Thanks.
Someone has pinched an large image from our site and used it in their sites background css. This seams to get around the block in our access file? Any clues how to block this? or what we are doing wrong? Thanks
Fixed! If you have a seperate access file in a folder, that one takes priority.