Grow your CSS skills. Land your dream job.

Techniques for Fighting Image Theft

Published by Chris Coyier

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

dont-steal-bandwidth.jpg

dont-steal-bandwidth-2.jpg

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:

copyright-image.jpg

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?

Comments

  1. Kevin Segedi
    Permalink to comment#

    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

  2. Permalink to comment#

    Isn’t the first one the best because it fully protects your pictures?

    • You can’t really protect from all theft, but you can keep an eye, track theft and take action using this amazing service: http://www.mypicguard.com
      If you login with FB you get free credit to try out the service!

  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.

  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.

  5. Permalink to comment#

    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.

  6. larrybn
    Permalink to comment#

    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?

  7. Mathew Byrne
    Permalink to comment#

    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.

  8. RLS0812
    Permalink to comment#

    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.

  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.

  10. Permalink to comment#

    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. :))

  11. Yeah at the moment one of my websites has been using huge amounts of bandwidth and im thinking this may be the problem..

  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.

  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!

  14. Permalink to comment#

    The “disable rightclick” is worthless, because you can get the image from the browsers cache.

  15. Lunedi
    Permalink to comment#

    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).

  16. Kevin Segedi
    Permalink to comment#

    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.

  17. Keiran
    Permalink to comment#

    Print Screen

  18. Thomas Evans
    Permalink to comment#

    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.

  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>

  20. Rufo
    Permalink to comment#

    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).

  21. goldenapples
    Permalink to comment#

    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.

  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

  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

  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.

  25. N.P

    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

  26. 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: http://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?

  27. Ever thought of the benefits of having your images hot linked, SEO wise? ;)
    Theres an article over at the [Blackhat SEO][1] Forums about how to use hotlinking to your advantage to help boost ‘traffic’ and your serp/pr juice!

    [1]: http://shoutingzone.com/blackhat/ “BlackHat SEO Forum

  28. Permalink to comment#

    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.

  29. Permalink to comment#

    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

  30. Permalink to comment#

    Fixed! If you have a seperate access file in a folder, that one takes priority.

  31. Roger C Poole
    Permalink to comment#

    I find a certain irony that this story has a link above it to an article entitled “how to steal a background image”

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".