How to: Stop Image Hotlinking
rss

How to: Stop Image Hotlinking

21 May, 2009 8bitmag How-To
How to: Stop Image Hotlinking

Do you ever wonder how to stop those image theft? Protect your blog from someone who just copy and paste images from your site to they blog. This is called “hotlinking”.

If someone hotlinked your images, every time when images are shown on their website, that cost us bandwidth. Because they are loaded from our server. The smart way to prevent  this is via .htaccess file. I found this useful peace of code from guys at hongkiat.com .

Via .htacces we can decide:

  • What website to block
  • What website to allow
  • Allow or deny blank referrers
  • Display custom images when hotlinking is detected
  • files to protect

If you’re currently not using any .htaccess in your web account you should be creating one. Open up notepad, save it as .

htaccess without any extension behind. For those who already have an existing .

htaccess file, download it to your local computer as we’ll be doing some editing:

Step 1: .htacces hotlink code

Copy and paste this following code inside yout .htaccess file

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain2.com [NC]
RewriteRule .(jpg|jpeg|png|gif)$ http://hpmouse.googlepages.com/hotlink.gif [NC,R,L]

Explanation

Line 2 – Allow blank referrers (recommended).

RewriteCond %{HTTP_REFERER} !^$

Some users surf under firewall and thus they are not providing any referrers information. Disallowing blank referrers will means blocking them from accessing these images. However if you want to

block blank referrers, just delete line 2.

Line 3, Line 4 –

Sites allowed to link your images.

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourdomain2.com [NC]

By default all

sites are blocked from hotlinking. Only those specified by you are allowed to do so.

Line 5 – File format to block, custom blocking images.


RewriteRule .(jpg|jpeg|png|gif)$ http://hpmouse.googlepages.com/hotlink.gif [NC,R,L]

In between the () are images you intended to block from hotlinking. To add more seperate them with”|”

Change ‘http://hpmouse.googlepages.com/hotlink.gif‘ to a image you’ve set, and whenever

image hotlinking is detected, this image will show up. Just make sure where this image is not hotlink protected or your server can go into an endless loop.


No Hotlinking! Wordpress plugin

For those who have no experience with coding there is wordpress plugin that do job for you.

Lim Dul of Bahn-spass wrote a plugin for Wordpress that helps prevent

image hotlinking as easy as installing and activating. It blocks

image
hotlinking by displaying this following

image
by default.

Just upload to your wp-content/plugins and activate plugin via admin panel. Go to setup and set your custom image to show up whenever hotlinking is detected:

imagehotlink1 How to: Stop Image Hotlinking

Download Wordpress Plugin Here

About 8bitmag

We keeps you informed about "gems" that lay down freely around internet.

3 Comments

  1. Definitely good tips! I found one of my post images was being linked to, and I just changed the name of the image which fixed them. My photos are all through Flickr, which is also helpful in preventing that.

    ~ Kristi

  2. Hi Kristi
    If you have lots of images in post that is hotlinked its not so fun to rename them all. Its very time consuming. With .htaccess all process is automatic. Immediately when hotlinking is detected, all images are replaced with your custom image. + You can have name and logo on that image..You know, its like free advertising on they site :) Hosting image elsewhere is bad thing because you will not get traffic from image search engines. Don’t underestimate the traffic driving power of self-hosted images.

    Cheers

  3. Using a replacement image is working.

    But … ,

    The replacement images changes to the dimension of the copied image !

    For eg.,

    The original image is http://mysite.com/image.jpg of dimension 800×900
    replacement image is http://hosted.com/image.jpg of dimension 200×300

    Now, the problem here is the replacement image is stretched to 800×900,
    making it hard to see the warning on the replacement image.

    Any idea how to make the replacement image to show specific dimension via .htaccess ?

    Thank You.

Leave a Reply

About 8bitmagazine.com

We publishing articles about graphic, photoshop, photoshop tutorials, wordpress, blogging, wallpapers, tools, customizing and lots more interesting stuff. And what is most important, most of stuff that we post are free for download. Enjoy in your free resources heaven ...

Learn more »

Find us at :

  • twitter
  • facebook
  • linkedin
  • youtube
  • flickr

Photos on Flickr

Web Development & Design Blogs Web DesignGraphic Design Blogs - Blog Catalog Blog Directory