How to protect images from being stolen and hot linked by bandwidth thieves

Protecting images on your website from being stole is realy hard. It's much easier to prevent your image from hot linking from other websites. There are a few methods to make it increasingly harder to steal your image.

Many people face this problem, they create their own images and end up finding them in other places. Also some websiteowners will actualy hot link your images on their website and steal your precious bandwidth.

Here are a few preventive measures you could each take to prevent your image from being stolen:

Put a transparant image over the real image.

You can use the original image as a background and put a transparent blank image over it that matches the size of the real image.
For cross-browser support make sure to a use transparant gif. IE6 doesn't handle transparant PNG's very well with a hack.

Advantages

Effective in fooling the copier to give up

Disadvantages

True image can still be looked up in the source code
Somewhat difficult to implement with CSS

Using pre-generated or serverside watermarks
Having a watermark with the © copyright symbol in your images is probably the best way to prevent people from using your images.

There are special PHP classes for watermarks, that you implement during upload-time. You go from using tools to making your own watermark for each image with Adobe Photoshop.

A good tool free tool to watermark your images is PicMarkr.

Advantages

Very effective and unappealing for the ones trying to copy

Disadvantages

Requires alot of work when dealing with many images

Slice up your image

The image will be sliced into tiny squares. Automatically placing them in the correct order. But when a user wants to steal your image, they will find that they have to copy all the small squares and put them back together. Visit Super Simple Image Tiles for more information.

Advantages

Easy to use

Disadvantages

Users can still take screenshots of the image as a whole and paste them into Photoshop/Paint.
Bigger load on your website, as each image has to be loaded seperatly

Turn your image into a flash image

With a neat set of tools from SWFir you can rotate your images into flash movies. It's challeging for users to steal your image.

Users can still take screenshots of the image as a whole and paste them into Photoshop/Paint.

Disable IE6 window menu

When hovering over an image for a few seconds, Internet Explorer 6 will show a menu within the image. An option save image appears. You can disable the entire menu with a simple code in the <head> section of your webpage :

<meta http-equiv="imagetoolbar" content="no">

There you have it, you might have noticed that every approach has it's downside. And none of them are 100% theft-proof. Even though it's still important to prevent theft by taking steps to make it harder.

Now let's have a look at how we can show a 403 forbidden error or another image when another domain hot links your image(s). This is when another domain links directly links to your image like this :

<img src="http://www.your-domain.com/images/image.png" />

Prevent hotlinking

The easiest way to prevent hotlinking, is to check where the request is coming from. Edit or create a .htaccess file in your image or root directory. Place the following code in your .htaccess file :

RewriteEngine on   
RewriteCond %{HTTP_REFERER} !^$   
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-domain.com [NC]   
RewriteRule \.(jpg|jpeg|png|gif)$ http://www.your-domain.com/no-hotlinking.png [NC,R,L]

In this example we redirect every request for your image not coming from your-domain.com to http://www.your-domain.com/no-hotlinking.png.

Now let's look at another example where we generate a 403 forbidden error.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(www\.)?your-domain\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule \.(jpe?g|gif|png)$ - [F]

After applying this you can check if it works at the coldlink website.

Posted by James on 2009-08-01 in the category " html "