Hotlinking is a term used when an image hosted on your webserver is linked on another website. Every time the image is viewed on that other website it is loaded from your webserver. This is a bad thing because is uses your (precious) bandwith and creates server load on your webserver without you actually benefiting from it.

There are however ways to prevent this from happing.

Example

Just a short example to explain this further. If you add an image to include in one of your posts this image is uploaded to your media library on your webserver. The image has it’s own direct URL, for example:
http://www.yourwebsite.com/wp-content/uploads/2010/01/wordpress.png
If someone would like to use this image on his or hers website they could take this direct URL and add it to their own post (in Wordpress this is the From URL tab in the Add an Image dialog). Instead of uploading this image to their own webserver they will directly link to the image on your webserver and by doing so using your bandwith.

How to prevent hotlinking

Preventing hotlinking to your images is done through a server configuration file called .htaccess. If you are not familiar with this configuration file then please read more about it’s use before continuing, so you understand what you are about to do.

Step 1: Check for existence or create a new file

First step is to check if this file already exists within your Wordpress installation. You can check this with your FTP client and your webserver connection details. A good and free FTP client is Filezilla. The configuration file should be located in the root of your Wordpress installation and is called .htaccess. If the file already exists then download it to your computer, the necessary edits for preventing hotlinking will be added within this file.

If this configuration file isn’t there yet you will need to create it. Open your favorite text editor (I recommend using Notepad++) and create a new file. Then save this file under the name .htaccess.

Step 2: Create a replacement image

Although we could completely disallow image hotlinking, in this tutorial we will replace the hotlinked image with another image to discourage hotlinking. You should create an image with the text hotlinking not allowed and include your website address in this image. If someone hotlinks to one of your images this replacement image is shown instead and you get some free publicity when people see your website address. You can create this replacement image yourself or use the image below. I have created this image for the sake of this tutorial and you can use as a basis, just add your website address at the bottom. Whatever you do, save the image as a .jpg and rename the extension to .jpe. This is to make sure we wont block the replacement image as well.

Step 3: Adding the protection to .htaccess

Open your downloaded or newly created .htaccess file in your text editor. Add the following code:

# Replace hotlinked images with replacement image
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yoursitehere.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?google.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://216.239.*$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|bmp|png)$ /images/hotlinking.jpe [L]

• Note 1: replace the yoursitehere.com in the 4th line with your own domain.
• Note 2: hotlink prevention won’t stop Google from indexing and ranking your images for it’s image search engine as it uses your image cached version rather than hotlinking to your image. In this example we actually allow Google as a referer with line 5 and 6. These line make sure that images are shown when someone clicks on them from Google’s search engine. You could add more search engines this way.
• Note 3: the last line replaces hotlinked images with the replacement image. Edit the location to the location where you uploaded your own replacement image. As already mentioned, we use the jpe extension for the replacement image to prevent blocking this as well.

Step 4: Uploading .htaccess

Use your FTP client to upload the edited .htaccess to the root of your Wordpress installation.

And that’s it, you are done and your images are not protected against hotlinking by showing a replacement image instead.