Image watermarking hot-linking and the whole 9 yards.

Gabriel Crowe

This little tutorial discusses some of the problems faced by ecommerce web-masters with respect to their images.

Images are an essential part of every website. Ecommerce means that your images are really what sells your product. With selling online, there are really only 2 types of image. Those you got from the supplier and those you took yourself. With both types of image comes a simple problem, bandwidth thieves. These people are most likely bloggers, ebayers or anyone else who 'hotlinks' to your products, in order to use your image on their site.

Some images may even be ones you're proud of, or took a long time to produce, you may not want people slapping your hard work all over their rubbish site, or using your expert photography to sell their ebay item at a price lower than you are selling it. Its not always about bandwidth.

Leveraging technology we already have
Most shops now run with some sort of dynamic language, either php, .net or perl. Everyone has a cgi-bin and we can all execute php scripts. We all have a way to flummox would-be image thieves. A typical approach is to use a trick in apache to redirect images. A file called '.htaccess' (notice the full stop at the beginning) can be used to all sorts of neat tricks. I'll be giving examples on what to put in this file. The .htaccess file is a plain text file, located in the root of your web server. I create mine locally and upload it using ftp. Watch out though, screwing this file up can cause your website to stop executing scripts properly and display odd things on your pages. Wehn in doubt, get a pro to create and edit this file, and you just read up on the topic and decide what you want.

Block those goons
Its very possible to block people from taking your images, and aggressively stop them from using your bandwidth. Trivially easy in fact. But do you really want to? What choices do you have?

Blocking all external image hotlinking.
This means that the image they hotlinked to receives a nasty 'empty' image. This looks ugly on the page its displayed on. A sure fire way to stop all hotlinkers. Think twice about this method. Though its the simplest (10 seconds to edit a file by hasting something in it). It has its problems. For example, you may want your images to appear in search engine image caches, or allow certain domains you own to hotlink.

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

(edit yourdomain.com to actually match your domain)

Whitelist blocking
This is basically blocking of all domains from hotlinking, apart from domains you choose. This is more for when you're image work is precious and you're bothered about people using it without your permission. We choose domains to allow, if we trust them, or they are your own. This is not really a good idea for ecommerce and so isn't really covered here.

Blacklist blocking
This is all domains you choose to block. Useful when its only a certain site eating your bandwidth. This is more for epic bandwidth thieves. Typically, you'd block major online blogs, ebay and social sites like facebook and myspace.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ebay.co.uk [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?blogger.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?shopzilla.co.uk [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

(You can duplicate the block line as many as you need, i'm sure you can see how this works. You can add as many domains to block as you like)

Swapping Images, make a fool out of hotlinkers.
We can take the image they hotlinked to, and with some server magic, swap the image out for another one of our choosing. We can do with with any of the techniques discussed above. For example, we can feed an alternative image to ebay only, or block all images linked from myspace.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ http://www.yourdomain.com/hotlink.jpg [R,L]

(The last line 'RewriteRule' is the image we'll be swapping in)

Usually, you'd swap the image for an image with your website address on it. something funny and cheeky would work too, like

"I stole this sprocket image from BillsSprockets.com"

This works particularly well on ebay. It certainly pisses people off, when they are trying to sell their precious sprockets.

Profiting from hotlinking
So, we can block domains and we can swap out images, very good. The problem here is that if we block the image, then they will simply find another. Ebay users know all about google images. They will go and pester somebody else, but this isn't the right way to go about things. We WANT them to use our images, and we want to profit from it. After all, you put the time and effort into making them.

At the very least, your images need to point towards your website. I have previously used watermarking to great effect. Subtle watermarks across the image mean that people know where they are from. This doesn't stop ebayers and other people trying to sell second hand items however. So, we'll watermark the images, with a bold block of text, and it'll point them to your own site.

So, stealers of the image will not pick another image. They will keep it, because its still a picture of something they want to see. The only difference here is that our image has our website on it. Here, let me show you:

Image on our site:

Image hotlinked, notice the domain isnt basketballasylum.co.uk

So, how do we get this sort of watermark?

Well, we'll be making some changes to the htaccess file:

# No referrer is okay
RewriteCond %{HTTP_REFERER} !^$ [NC]
# Avoid an infinite loop
RewriteCond %{REQUEST_URI} !\.wm/.* [NC]
RewriteCond %{REQUEST_URI} !/watermark.php/.* [NC]
# Don't watermark it if it's being shown on this site
RewriteCond %{HTTP_REFERER} !^http://([^/]*\.)?exampledomain\.co\.uk($|/.*) [NC]
# Things in the /stuff directory are okay to be hotlinked
RewriteCond %{REQUEST_URI} !^/stuff/ [NC]

### Sites to not watermark
# Let's be friendly to search engine image caches
RewriteCond %{HTTP_REFERER} !^http://([^/]*\.)/search\?q=cache\:.*$ [NC]

# Weblog syndications
RewriteCond %{HTTP_REFERER} !^http://([^/]*\.)?bloglines.com($|/) [NC]
# (other whitelisted regular expressions go here - start them with ! to negate them)

# If something gets this far, it's hotlinked and not whitelisted; add the watermark
RewriteRule ^(.*)/([^/]*\.(gif|png|jpg)) /watermark.php?src=$1/$2 [R,L]

I include some ways to whitelist search engines and other sites, excluding them from the watermarking process. I found this useful for shopping directories that end up with watermarked images due to the way they fetch images.

watermark.php?
This is a script to actually watermark the images. You'll need to create a file in the root of your site called 'watermark.php' and put this in it:

Script here: http://pastebin.com/WnJAedLz

Now, create a png file called 'watermark.png' and put that in the root too.

You should all be set. Try viewing your site to make sure everything is ok. Now try creating a hotlinking scenario by creating an image hotlink on another site, or linking from a social network.

Possible problems and solutions

The image is a broken link

Make sure you can parse php files on your site
Make sure the files you created are in the root
Make sure you edited the htaccess file properly.

My main website is broken somehow

This is a problem with editing the htaccess file. Paste and upload it again. Make sure its got a dot at the beginning.
Make sure you edited the htaccess examples to include YOUR domain, not the example domain I gave.

The image looks odd

If your watermark has a white square around it, make sure your png image has alpha transparency. If you dont know what this is, then speak to somebody who understands photoshop. They will be able to help you.
I wanted the watermark in the middle: In the php script you'll find 2 lines near the bottom commented out. Uncomment the ones above and comment out the ones below, like this:


    $startwidth = (($imagewidth - $watermarkwidth)/2);
    $startheight = (($imageheight - $watermarkheight)/2);
    //$startwidth = 0;
    //$startheight = 0;

Good luck and happy hotlinking!

Gabriel Crowe

and just looky what we got here:

http://www.adventurecycles.net/info2.cfm?info_id=102277

epic lols. thanks for the free advertising, lazy web designers...

Gabriel Crowe

Here is a version that logs hotlinking to a database:
http://pastebin.com/Tp3Dd95r

CREATE TABLE IF NOT EXISTS `HotlinkTracking` (
`date` datetime NOT NULL,
`referrer` text NOT NULL,
`image` text NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

...and here is a VERY SIMPLE page to display the collected data:
http://pastebin.com/n637iMxL

For those interested, this solution was applied to Actinic.

drounding

Great tut Gabs, cheers. Especially the watermarking.

It's just what I need to do for one of my sites.

Darren

I love the water marking bit, its kin awsome definately something im goign to have a play with

Darren

Gabriel Crowe

I also found this, possibly the most useful resource on the topic of htaccess:

http://groups.google.com/group/apachehtaccess/web/htaccess-cheatsheet

Howdy, Stranger!

Categories

In this Discussion

Who's Online (0)