Stop people stealing your pictures....

[Alex]

Hey guys,

Just came across this very useful snippet of code which can be used to prevent "Hotlinking" of your images.

Recently noticed a few disco sites doing this so I thought I would share this handy preventative piece of code I found.

Prevent Image Hotlinking

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

Images linked to from anywhere else than your website are redirected to a custom graphic (which you'll need to upload). Do note though, this will not prevent downloading of your images!

This piece of code sits in a .HTACCESS file...

You'll obviously need to make a few updates to it... for example:
"yourdomain\.com/" .... would be your domain name (ie: alexentertainment\.co.uk/ ) and the link to the "don't steal" image would need to be updated to where ever you put the image.

Hope this helps some of you guys out there

[Marc J]

Hotlinking is more stealing bandwidth than stealing pictures, though.

If someone wants to steal pictures they will (save as....and upload to their webspace).

I personally think allowing hotlinking is better, as at least then you'll find the muppets trying to steal your pictures but who just decide to hotlink instead (from your logs)...without alerting them that you're on to them.

[Vectis]

I personally think allowing hotlinking is better, as at least then you'll find the muppets trying to steal your pictures but who just decide to hotlink instead (from your logs)...without alerting them that you're on to them.

... then you can rename the real pics and replace the old filenames with something totally offensive


One technique I've used to help prevent hot linking / image theft is:

1. Create a blank 100% transparent PNG image the exact dimensions of the original

2. Instead of using <img src="... to present the original image, present the transparent PNG instead

3. Wrap the image in a <div> with the background-image set to the original filename

4. Do #3 in an external CSS file to obfuscate the trick somewhat


What am I talking about?

- suppose the original image is called original.jpg and is 300 x 200 pixels.
- create a new image called overlay.png at 300x200px which is 100% transparent
- change the <img src="original.jpg" ... to <img src="overlay.png" ... instead in your page code
- wrap this in a uniquely-named <div> - i.e.:

<div id="picture1">
<img src="overlay.png ...
</div>

- in CSS define the div, ie:

#picture1 { width: 300px; height: 200px; border: none; background-image:url(original.jpg); }


So now anyone browsing your site and doing a right-click Copy Link is going to get the link to the overlay.png and doing a right-click Save Image As is going to get the transparent (i.e. empty) overlay.png


DRAWBACKS:

1. Doesn't prevent theft of the image because they can pick their way through the CSS (if clever enough) or screen dump and grab it that way - but it makes it difficult for your casual thief

2. Whilst you can use ALT and TITLE in the usual way for usability/SEO, it will only be the transparent overly which these will be applied to - so if you rely on sites like google images for some clicks, forget it. Conversely though, much image theft takes place from google images...

3. Cannot say with 100% certainty that this might not harm ranking. It shouldn't but I have a nagging doubt that use of 100% transparent images might be viewed as akin to white text on a white background, for example. That said, in the few places I've used this trick, it's not affected ranking.

4. Without additional tricks IE6 doesn't like the transparency and will likely overlay a grey box on your pic. But who cares about IE6?

[Marc J]

You'll obviously need to make a few updates to it... for example:...

You missed a \ your example Alex, in that line you need to escape any . in the domain, so yours would be: -

alexentertainment\.co\.uk/