» CSS » Protecting Your Images From Theft

Chris CoyierProtecting Your Images From Theft

Written by Chris Coyier from CSS-Tricks on February 22, 2008

If you Google “stop image theft“, you will get some results of some really bad, non-effective ways of preventing image theft. Things like “disabling right-click” with JavaScript. Crippling usability is never good, especially when it will barely even slow down someone determined to steal your image. This is kind of like strip searching kindergardeners because one of them brought a knife to school once.

There are two different types of “theft” of images. One type is direct “hotlinking” of the image. That is, displaying the image on a third party website directly linking to your image. This is not only theft of your image but theft of your bandwidth as well. The other is copyright. Images you create are yours. Publishing them on your site automatically copyrights them to you and they may not be used elsewhere but for violation of that copyright unless you explicitly state that they can be.

Hotlinking is the worse of these two types, because it infringes copyright as well as steals bandwidth. Fortunately, that is the easiest one to stop. Just a quick addition to the .htaccess file in your root directory:

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

This will automatically block third-party sites from displaying images from your site. The last line will redirect those image requests to your custom image. Notice the weird file extenstion on the JPEG file. That is the loophole allowing your custom image to be displayed and not blocked.

Check out a roundup of some other techniques for fighting image theft.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Bumpzee
  • E-mail this story to a friend!
  • Ma.gnolia
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati
  • TwitThis
Written by Chris Coyier from CSS-Tricks on February 22, 2008 | Filed Under CSS
Unique Blog Designs

8 Responses so far | Have Your Say!

  1. Monika Mundell  |  February 23rd, 2008 at 2:04 am #

    Monika Mundell - Gravatar

    There is just one problem with that Chris. If you are on a hosted server with shared hosting you’ll need to set exemption for every URL you run, otherwise they won’t show all the information. In Cpanel go to the “hotlink” icon and insert all the URLs you have live right now. This will prevent others from hotlinking to you, but you can still run all your sites without losing any image related information.

  2. Spale  |  February 23rd, 2008 at 9:27 am #

    Spale - Gravatar

    Great post, this information will be especially useful for owners of online galleries.
    I will tray this solution on my own gallery site.
    Thank you for this great tip. :wink:

  3. Chris Coyier (Post Author)   |  February 23rd, 2008 at 10:46 am #

    Chris Coyier - Gravatar

    Good reminder, thanks Monkika.

  4. mamba  |  February 23rd, 2008 at 7:27 pm #

    mamba - Gravatar

    The big post. It is a lot of helpful information! Thanks! :smile:

  5. CFernandes  |  February 24th, 2008 at 11:09 am #

    CFernandes - Gravatar

    I have a question.

    If you donĀ“t want to use the “custom image” and just want to blog others for hotlinking, do you leave out the bottom TWO lines or only the LAST line of the code?

    thanks

  6. Chris Coyier (Post Author)   |  February 24th, 2008 at 5:47 pm #

    Chris Coyier - Gravatar

    @CFernandes:

    To FORBID the linking entirely, change the last line to this:

    RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

  7. Spale  |  March 8th, 2008 at 4:11 pm #

    Spale - Gravatar

    Can this be used if gallery is on subdomain, and how?

Trackbacks to 'Protecting Your Images From Theft'

  1. Eric

Leave Feedback

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>