Type A – The casual browser / normal user
Type B – The web designer (in terms of knowledge level)
Type C – The hardened cyber criminal / hacker (in terms of knowledge level)

Your strategy will be dependant on which users you are trying to deter. The normal user will be put off with simple deterrents and give up. A person with web designer knowledge will be right in there in seconds, unless the images are protected very well protected. Protecting against the hardened cyber criminal / hacker is very hard, and needs an additional strategy

Right click
You can disable the right mouse click and pop a message up about copyright. This will deter a lot of people in class A, but has the disadvantage of stopping people using “right mouseclick / back” to return to the previous page, which is how some partially sighted / blind people with text readers jump back a page. The right mouse click thing is quite annoying and doesn’t prevent your images being stolen – as disabling Java will quickly circumvent the issue

Right click (nice alternative)
Offer nice popup menu on the right click – this is much more pleasing than the traditional version, and a lot more subtle, also the equivalent “back” link can be programmed in so not to upset the users who use a text reader. Again this will slow down a “A” type user. A print screen grab will still beat this method

Transparent GIF
Pop photograph in a table and cover with transparent GIF.  This is quite subtle – you pop the image in a table/cell background, and stretch a 1×1 transparent GIF over the top. When the user copies the file, they get a blank transparent GIF, not the photograph. This doesn’t rely on Java, and will deter most type “A” browsers. A print screen grab will still beat this method

Chop image up
Here we slice the image up, and reconstruct it on the page. When the user copies the file, they get a small portion of it. This can be combined with the transparent GIF method, and will work if Java is turned off. This is likely to deter both user type “A” and User type “B” because it is too much effort to actually get the image into a usable state. A print screen grab will still beat this method

Protect the image directory
This is usually the default setting on most servers nowadays – check that you can’t directly navigate to the image directory and get a directory listing (at which point you will loose all your images)

Advanced right click (java)
There are some very clever methods of defeating the right click and print screen – essentially a script remaps or disables specific buttons (like the control key). This is pretty irrelevant, as disabling java defeats it. It will deter most type “A” users

Flash
Contrary to popular belief, images are not secure in Flash. Yep your average type “A” user will be defeated; your average web designer can just decompile the flash code using a “Flash Decompiler” which will drop out all the images nicely

Obfuscate source code
Essentially there are several methods here: firstly the source code can be “scrambled” making it pretty unreadable, preventing the human user from seeing where the image is stored. The second is to offer an alternate content when the source is viewed (which can be defeated easily)

Use PHP
By using PHP to serve the images, the actual directory they are in can be hidden. Instead of HTML files on the server there is a “program running on the server” that serves the images to the browser. The browser doesnt get to know the real location. This will prevent most web designers from browsing the directory. The next task here is to use an abstractly named and nested directory to prevent guessing.  Using a .htaccess file to remap to correct location is sweet too. This will slow down type”B” users from taking the images en-masse

DHTML / Javascript
Use a script that only displays the big picture when the mouse is over the thumbnail, and the left mouse button is depressed. This is clever, as the page won’t display anything if Java is turned off, and you can’t right mouse click while the left button is down. In combination with PHP or other methods, this will beat most type “A” and “B” users. This can prevent a screen grab of the pig picture, because the left mouse button is down

Disable IE6 image toolbar
Drop the following code in a webpage header, and the IE6 image toolbar disappears

<meta http-equiv=”imagetoolbar” content=”no” />

Use a plugin
There are a few – here is an example: http://www.artistscope.net/

This is the most effective option we know about. The downside is that it is expensive both in terms of price, and inconvinience to the end user.  To see the images, they need to download a free plugin (just like you do for Flash)

This is pretty unbeatable from the browser – so type “A” and Type “B” users will not get your images

Use a watermark
Ugly, but effective up to a point, also consider Digimark digital watermarking

Publish a policy
Explain that you check regularly for copied content either that you use Digimark or that you check http://www.copyscape.com/ & http://www.archive.org/index.php and that you always take action against image and content thieves. This actually may deter most. By showing you are proactive, most will walk away

Review your web stats and logs
By reviewing your web statistics regularly, you ought to detect hot linking and unusual activity. If so, contact your ISP to Block the IP address. Hot linking is even worse than someone nicking your image – they are getting your server to actually to serve it. I.E. their webpage has your image on it, served from your web space… resulting in your bandwidth being stolen, and affecting your sites performance

Beating the Type “C” user
We are talking about preventing your site from being hacked. I will only offer general advice on this but:
1. Use a host you trust
2. Check the versions of PHP etc. you are using, and ask about when the server was last patched
3. Change your FTP and SQL passwords after the web designer has done his thing – your designer will be able to show you how to change the SQL passwords, and what files to edit
4. Use “Strong passwords”
5. Change your passwords often
6. Keep up to speed on the updates (security) for any packages you are using (gallery packages or CMS packages for example
7. Regularly change your Cpanel password
8. If you have a very valuable collection of images or files, have a security audit using a firm specialising in them
It is worth mentioning that most of this type of theft is pretty close to home – from a disgruntled website designer, employee etc.. So having systems where access is limited to the very few you trust, and having a clean desk policy is the way to go

Conclusion
Although not an exhaustive list, we can see that it is pretty easy to make it fairly hard to copy images for the majority of surfers. However there is a third type of slippery customer that is much harder to beat…

In the real world
Generally a combination of the above does a pretty good job. There are always ways around things – it’s a bit like locking your bike up outside the bank. If you don’t lock it it will walk – if you stick a cheap lock on – it will stay until someone brings some bolt cutters along

About the Author

Richard King is a professional photographer and website designer.  To speak to Richard call 0115 845 8953.  Richard specailises in websites for photographers and artists

Here is an example of using META tags
Feel free to cut copy paste these, but refer to the explanation below of what each tag means before altering anything. You can use all of these META tags at once. There are tricks for getting NetObjects, Dreamweaver and Front page to insert these into each page automatically. If anyone wants to know how to do this, let me know. Smart people alter the description, title and keywords tags between each page of their websites – in that way – you are not spamming the search engine, but you are maximising your exposure to any search phrase. Search engines usually rate your site PAGE BY PAGE. Some of the tags below you shouldn’t use… so read the write up before inserting the whole block

Example of a META TAG block:

<META http-equiv=”PICS-Label” content=’(PICS-1.1 http://www.rsac.org/ratingsv01.html” l gen false comment “RSACi North America Server” for “http://www.bwp-by-rk.co.uk” on “2006.11.06T23:37-0800″ r (n 0 s 0 v 0 l 0))’>
<META http-equiv=”PICS-Label” content=’(PICS-1.1 “http://www.classify.org/safesurf/” L gen true for “http://www.bwp-by-rk.co.uk” r (SS~~000 1))’>
<META name rating CONTENT =” Safe for kids”>
<META name expires CONTENT =”Mon, 01 Aug 2000 09:00:00 GMT”>
<META http-equiv pragma CONTENT =”no-cache”>
<META HTTP-EQUIV=”refresh” content=”5000;URL=http://www.bwp-by-rk.co.uk/”>
<META name keywords CONTENT =”photographer, wedding, Nottingham, picture, wedding photographer, etc…”>
<META name MSSmartTagsPreventParsing content=”TRUE”>
<META name owner CONTENT =”Richard King”>
<META name reply-to CONTENT =”richardking@bwp-by-rk.co.uk (Richard King)”>
<META name resource-type CONTENT =”document”>
<META http-equiv content-language CONTENT =”content=”en-uk”>
<META name abstract CONTENT =”Burton Joyce’s local wedding photographer – Richard King”>
<META name author CONTENT =”Richard King, Nott’s PC Services”>
<META name classification CONTENT =”Photography”>
<META name copyright CONTENT =”2006 (c) Richard King”>
<META name description CONTENT =”Beautiful Wedding Photography by Richard King. Based in Nottingham I take images of your wedding to keep for years”>
<TITLE CONTENT =” Beautiful Wedding Photography by Richard King – “>
<META name distribution CONTENT =”Global”>
<META name doc-class CONTENT =”Completed”>
<META http-equiv expires CONTENT =”Wed, 09 Aug 2010 09:00:00 GMT”>
<META name googlebot CONTENT =”Index, follow”>
<META name robots CONTENT =”index, follow”>
<META name revisit-after CONTENT =”30 days”>

So what does it all mean? Here is a blow by blow definition of each line of code:

Safety / rating info META TAGS

These tags define how your site will be rated by both search engines and content filters. Important…Visit the following websites for more info. The sites below generate the correct code for your site on the fly

General information: http://www.w3.org/pics
RSAC: http://www.RSAC.org
Safe Surfing: http://www.safesurf.com
WEBURBIA: http://www.weburbia.com/safe
Example tags:

<META http-equiv=”PICS-Label” content=’(PICS-1.1 http://www.rsac.org/ratingsv01.html” l gen false comment “RSACi North America Server” for “http://www.bwp-by-rk.co.uk” on “2006.11.06T23:37-0800″ r (n 0 s 0 v 0 l 0))’> Options: see note above – visit the site

<META http-equiv=”PICS-Label” content=’(PICS-1.1 “http://www.classify.org/safesurf/” L gen true for “http://www.bwp-by-rk.co.uk” r (SS~~000 1))’> Options: see note above – visit the site
<META name rating CONTENT =” Safe for kids”> Options: 14 Years / General / Mature / Restricted / Safe for Kids

Alter the end users browser behaviour
<META name expires CONTENT =”Mon, 01 Aug 2000 08:21:53 GMT”> This will cause a document to be reloaded from the website after the date (even if it is stored in the user’s cache). Put a date in the past to disable caching of the document.

<META http-equiv pragma CONTENT =”no-cache”> Stops the local browsers to not locally cache the web page

<META HTTP-EQUIV=”refresh” content=”5000;URL=http://www.bwp-by-rk.co.uk/”> Tells the local browser how many seconds to cache the local web page, after that time, the user will reload the page from your site, rather than use the local cached version)

Information about the web page
Some of these: the website owner (for example) seem unnecessary, but are used to populate fields on some directory search engines (like YELL, Thompson)

<META name keywords CONTENT =”your, keywords, separated, by, commas, goes, here”> Further info about this will be in my next post

<META name MSSmartTagsPreventParsing content=”TRUE”> If you don’t want Microsoft products to automatically generate smart tags on your web pages, include this tag. It must be included on each page of your site for which you do not desire this feature. It has no effect on smart tags, which you insert yourself.

<META name owner CONTENT =”Richard King”> The website owner

<META name reply-to CONTENT =”richardking@bwp-by-rk.co.uk (Richard King)”> Gives a contact email, and name for reply for the web page (could open you up to SPAM

<META name resource-type CONTENT =”document”> Explains what type of resource the page is (redundant now)

<META http-equiv content-language CONTENT =”content=”en-uk”> Defines the language of the page

<META name abstract CONTENT =”your text here”> Replace “your text here” with a description of your site. This description is often used as an alternate description on search engines

<META name author CONTENT =”Richard King, Place of design”> Details who wrote the site

<META name classification CONTENT =”Photography, Wedding”> defines the classification (on a search engine) as “photographer” and “wedding”

<META name copyright CONTENT =”2006 (c) Richard King”> Copyright statement

<META name description CONTENT =”A brief description of your site goes here”> This description is used as the main description on some search engines (what the punters read. You need to be clever here with the words you use, but it must be readable

<TITLE CONTENT =”Title of your page goes here”> I will discuss the content In my next post

<META name distribution CONTENT =”Global”> “Global” Appropriate for web access. “Local” Web servers will not pass a “Local” document to the web. “IU” Internal use – Intranets.

<META name doc-class CONTENT =”Completed”> Completed/Draft/Living Document/Published describes the current state of the document

How / when a page is indexed
<META http-equiv expires CONTENT =”Wed, 09 Aug 2006 09:21:17 GMT”> – tells the search engine when a page is no longer to be listed (useful for a promotional page)

<META name googlebot CONTENT =”Index”>Defines how the Googlebot spider indexes your site. By default, Google will attempt to spider every page you have on your site. Sometimes you will not want this to happen – you might have a series of pages that must be viewed from page 1, then 2, and 3 – in sequence. Using this tag can prevent the engine listing page 2 separately (stopping customers jumping in at page 2). You can use the ROBOTS metatag to control how all spiders index your site. The GOOGLEBOT Metatag controls exactly which pages Google indexes.

Options: all / index, follow / noindex, follow / index,nofollow / nosnippet /noarchive /none

all: Same as index,follow.
index,follow: The default, meaning index the page and follow all links from the page.
noindex,follow Don’t index the page but do follow all links from the page.
index,nofollow Index the page, but do not proceed to the links from the page.
noindex,nofollow Do not index the page and do not proceed to links from the page.
none Same as noindex,nofollow.

nosnippet From Google help:
“A snippet is a text excerpt from the returned result page that has all query terms bolded. The excerpt allows users to see the context in which search terms appear on a web page, before clicking on the result. Users are more likely to click on a search result if it has a corresponding snippet.” This value of NOSNIPPET removes the text snippet.

noarchive From Google help:
“Google keeps the text of the many documents it crawls available in a cache. This allows an archived, or “cached”, version of a web page to be retrieved for your end users if the original page is ever unavailable (due to temporary failure of the page’s web server). The cached page appears to users exactly as it looked when Google last crawled it. The cached page also includes a message (at the top of the page) to indicate that it’s a cached version of the page.”
“If you want to prevent all robots from archiving content on your site, use the NOARCHIVE meta tag.”

<META name robots CONTENT =”index, follow”> same as the googlebot tag above, with 1 exception… noimageindex (Altavista only) Prevents the images on the page from being indexed, but the text on the page can still be indexed

<META name revisit-after CONTENT =”30 days”> Tells the search engine to visit back after Xdays, and re-spider the site

To begin, lets run over how we figured this out..

What is a hot link?
A hot link is where another website essentially displays YOUR image on THIER web space without copying it.  What they do is LINK to it, so essentially your site is serving the image onto their web page.  This consumes your websites bandwidth, and is essentially stealing

We looked at our logs, specifically the section called “Links from an external page” (other web sites excluding search engines.  It is good practice to review your logs regularly, as you can tell all sorts of useful things ranging from the efficiency of your SEO through to who is hot linking images from your site

What did we do?
Well we have a fairly neat way of combating this, using the good old .htaccess file – we simply dropped in the following code into the .htaccess code in the root directory of our website:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?placeofdesign\.com(/)?.*$ [NC]
RewriteRule \.(gif|jpe?g|png|bmp)$ naughtyfolder/imagetoreplacehotlinkedimage\.jpg[L,NC]

What this code does is basically swap the hot linked image, with the following image found in the naughty folder – how cool is that! This means that the following image is now being displayed on the offending webpage, and untill they notice, and remove the link to our image

How does this code work?
To begin we turn on the Mod Rewriting engine – this allows you to transform URLs from one thing to another at the server level.  The code then conditionally looks at the the referrer.  In the case the referring URL is not from our domain name, we replace the image served with an alternative

Why not just block the IP address?
Blocking the IP address would achieve the same result, but we would have to do this for each infringement one by one.  For sure it is a good option for serial offenders.  The other issue with IP addresses is that they are recycled.  The sort of organisation that hotlinks images, will just move server, or get booted off their server.  The last thing we want to do is block a valid referrer.  This is why this method is cool, because we are not blocking ranges of IP addresses to our domain and driving away potentially valid traffic

How about if we want the images to be hot linked?
In the instance where we wanted to allow an image to be hot linked – for example a photographer posting an image on a forum for critique, then you can allow more domains by adding more allowed domain into the conditional part of the code

Example: RewriteCond %{HTTP_REFERER} !myfavephotography website\.com [NC]

Or if you wish to allow Google to show your images in the image search:

RewriteCond %{HTTP_REFERER}  !^http://(www\.)?google\. [NC]

The complete code in this instance would be:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?placeofdesign\.com(/)?.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?myfavephotographywebsite\.com [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?google\. [NC]
RewriteRule \.(gif|jpe?g|png|bmp)$ naughtyfolder/imagetoreplacehotlinkedimage.jpg[L,NC]

Feel free to leave a comment or drop us an email if you have any questions