Protecting Images - Put plain and simple: the only
way to protect your images from being downloaded or stolen off a web
page is to not put them online in the first place. While I put this
fact out there as blunt as possible, there are several techniques we can
use to make website downloads and image theft much harder. Of course,
image theft can be defined in a number of ways, and its definition - and
hence measures (if any) taken to prevent it - will depend upon the
individual.
There are many ways to protect images from being downloaded, ranging
from modifying the image itself (tips 1-3), to preventing webpages
downloads (tips 4-8), to being pro-active in finding unauthorized usage
of images online (tips 9-10). And while I discuss many common types of
image protection, there are many others that I do not mention. A few of
the techniques mentioned in this article are directed more towards web
designers (these tips are marked with an
*), but several can be used on photo sharing website's such as
smugmug,
flickr,
pbase, and
webshots.
What is image theft? Image theft is the unauthorized
use of an image, photograph, drawing, or illustration. Well duh. Is it
really that simple? Of course not. The hard part is that many people
differ in the definition of 'unauthorized use'. Where one person may not
care whether their photograph is downloaded from a web page and placed
on another website without their knowledge, there are some that find
this to be blatant copyright infringement.
1) Image Protection with a Watermark:
The most common, and possibly strongest, image protection technique is
to place a visual copyright watermark on the image. Image watermarks
come in a range of styles: from a full copyright symbol across the
image to simply small text in the corner of an image containing the
copyright symbol, date, and name of the copyright holder. There is a
trade off with watermark size: the larger the watermark the less likely
one is to download or steal the image, but the larger the watermark the
more of a visual distraction it becomes.
Image watermarks are easy to create in Photoshop: make a new layer
with the desired text, adjusting its size and location to best suit your
needs. To type the copyright symbol © in text, you can type option+g
(mac) or Ctrl+Alt+C (PC). Changing the blending mode and opacity for
this layer can create a more artistic and less obstructive watermark:
for example 'soft light' layer blending can create a nice opaque blend.
It is possible to further customize the watermark by using layer
blending options such as a dropped shadow and/or beveling.
Digimarc,
a technology that can be integrated as a Photoshop plug-in, can also
produce a digital watermark through the use of digital noise that is
read by software. Despite the presence of a watermark however, its
survival through image manipulations is not definite, and the lack of a
visual symbol may not prevent image theft - only act as proof of
copyright owner in case of theft.
Note: Of course an image watermark specifies a
copyright directly in the image, but a copyright can also be clearly
indicated in text near the image; including the date of copyright, the
copyright holder's name, and your rights management (eg all rights
reserved or a
creative commons
type license). For those that manage their own webpage, a copyright
notice deserves special attention on its own webpage, indicating the
copyright and your policy on image downloads, usage, and theft (see tip
10).
2) Image Protection Using Low Resolution:
Low resolution images should almost always be used on the internet to
protect them against theft. A 550 pixel (in its longest dimension) image
saved at 72dpi is a good size for internet use, and will not give
downloaders much image to work with: other than internet use, images of
this size look quite horrible in just about any other application
imaginable. On a photosharing site like
flickr,
images are resized down to 500 pixels (longest dimension) for basic
viewing, thus you can upload images 500 pixels wide and not change how
most view the photo.
3) A Note on Color Profiles: Much of the internet currently lacks color management (for more information see my article on
Soft Proofing and Color Management
for the internet). Uploading images without a color profile will not
protect an image from being downloaded, but could potentially prevent it
from being used: those wishing to use the image in a color managed,
internet independent application may be at a loss if they see a drastic
shift in colors and contrast and do not know how (or care to) to
rectify it. For those that are worried about image quality due to a
missing color profile, the consequences are small: the minority of
viewers using color managed browsers will see exactly what those using
non-color managed browsers see (if you ultimately wish viewers to see as
close to what you see in photoshop, I recommend
Soft Proofing your images for the web).
*4) Prevent Downloads Using Tables:
'Right clicking' images is a fast shortcut to find, copy, and/or
download images. For those that have their own website it is possible to
prevent this action by placing images as a background to tables. The
code is fairly simple in CSS, using the "background-image:url" style:
<table
style="background-image:url('image.jpg');width:Wpx;height:Hpx"><tr><td></td></tr></table>
The use of table backgrounds is demonstrated above. An additional
modification, shown on the far right above, is to create a transparent
.gif file and place this within the table data (<td>) cell itself -
the result being right click downloads are still functional but the
downloaded, copied, or viewed file is a transparent .gif.
Although time consuming, another method to protect images using tables
is to section them, creating multiple images pasted together using an
html table. To quarter an image in Photoshop create vertical and
horizontal guides using View->New Guide. Each quarter can be copied
(the View->Snap To->Guides should be checked to make selections
easier) into new files. These images can the be re-assembled within a
table without cellpadding or cellspacing (the 'vertical-align:bottom'
style should be applied to the images). The result is a seamless image
which takes a good deal of effort to re-assemble. Of course, this can be
extremely time consuming (although the process can be simplified and
automated using a short php script) and does not prevent print screen
downloads. Further, small differences in browsers may ultimately result
in small differences in how the table and image(s) are displayed.
*5) Javascript Right Click Disable:
Another measure to prevent right clicks on images is to use
Javascript. These short scripts over-ride browser right clicks. Rather
than recreate a script that has been widely published in various forms over the internet, I will leave it to the reader to search google for Javascript Disable Right Click.
I will however mention that Javascript is client-side, and scripts such
as these can not only effect the usability of a website, but can also
readily be disabled by turning Javascript off.
*6) Hiding Images: It
is possible to look for an image by scouring the source code of a
webpage in search of a link to the image. These links however, can be
hidden in a number of ways by a web designer. First, they can be hidden
within the code by url encoding: converting the html code of the image
to ascii (hexadecimal). For example:
/dir/yourimage.jpg
~ versus ~
/%64%69%72/%79%6f%75%72%69%6d%61%67%65%2e%6a%70%67
Second, you can hide links to images in another file, making it harder
to find with a simple "Show Page Source" command. For example, suppose
an image is the background to table element (see tip 4). The
"background-image" style can be defined in a class within an external
CSS file and referenced in the table style. This makes finding the link
to the image hard to find, especially if you have multiple CSS files
linked through an html document. Further, for those experienced with
server side scripting the CSS file can be written dynamically -
overcoming the problem of having to write a CSS file per image, and
making it once again harder to find as this file will usually not be
named with a .css extension. Although it is possible to use a similar
technique with Javascript, this approach can lead to unpredictable
behavior because Javascript is client-side.
*7) Preventing Bandwidth Theft:
Bandwidth theft, also known as hotlinking, is the process by which
people use images from your server to display in their own webpages. The
end result is that the image is still on your server but linked to and
displayed by a remote website. It is incredible how easy this is to do
and how often this occurs, and startling how many images found in image
searches on google are hotlinked images. So why prevent hotlinking?
There are a variety of reasons. As the name implies, other websites are
stealing your bandwidth: in most cases the bandwidth is negligable, in a
few cases it can add up. Further, when hotlinking occurs it is unknown
in what context the image is being used. Lastly, the link to your
website could be on a website that performs "black hat" or malicious
activity.
Hotlinking is easily prevented however. Many hosting services provide
a protocol by which to do this through their service control panel.
Alternatively, the following lines can be placed in a website root
directory '.htaccess' file. If you are unfamiliar '.htaccess' files,
they are plain text files that allow you to make some powerful
configuration changes on an apache server: I recommend reading the
'.htaccess' tutorial at
Apache, and being VERY careful when making changes to or overwriting them
1.
|
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomainname\.com [NC]
RewriteRule \.(jpe?g|gif|bmp|png)$ - [F]
|
Of course, replace mydomainname with your domain name. If you wish to
allow certain sites to hotlink to your images, for example website
forums or search engines, you can add the following line before the
RewriteRule line above, replacing 'externalsite' with the name of the
website:
| RewriteCond %{HTTP_REFERER} !^http://(www\.)?externalsite.com [NC] |
When hotlinking is blocked, external links to images will turn into
the dreaded image not found icon. This however can be changed to an
image of choice by replacing the rewrite rule with the following:
| RewriteRule \.(jpe?g|gif|bmp|png)$ http://www.yourdomain.com/dontlinktomyimage.jpg [NC,R,L] |
-A note on hotlinking: when hotlinking is disabled using the above
code, a 404 Not Found is recorded by your server each time the culprit
webpage is loaded. On many servers these 404's can be accessed using
webmaster tools. Alternatively, this information can be actively
recorded using a custom 404 Not Found webpage that collects, through
server side scripts, the information for you. Why collect this
information? On many occasions, if the image cannot be hotlinked the
culprit can simply find the image and host it themselves. Collecting
this information gives you the ability to actively pursue potential
image theft.
*8) Prevent Search Engine Indexing:
Protecting images from search engine indexing can be accomplished in
two ways. First, a META tag can prevent images from getting indexed,
but allow the rest of the page to be found in searches:
|
<meta name="robots" content="noimageindex"></meta>
|
This meta information prevents search engine spyders (eg. robots)
from indexing images only: this is in contrast to using the "noindex" or
"nofollow" contents tags which are general commands that effect the
entire webpage. The second method is to use a robot.txt file. This file,
which should be a plain text file created with a simple text editor and
placed in the root directory of a website, is inspected by search
engine spyders the moment they arrive and is a method to tell spyders
which directories or files on a website to NOT visit and NOT index. If
you have a directory that contains all images for a website, this can be
added to the file:
|
User-Agent:*
Disallow:/images/
Disallow:/image.jpg
|
The above example tells spyders or 'bots', designated by the
asterisk, to disregard the directory /images/ and disregard the file
/image.jpg. It should be noted that not all search engines honor these
methods, and while major search engines such as google, yahoo, and msn
honor them there will be other search engines that will not.
Note: In the case of online photo sharing websites,
flickr allows you to remove images from public searches: this is done within the Privacy and Permissions section of your account.
9) Finding Your Images: In the
instance someone uses your image(s) without permission, you may usually
never know. For online usage however, it is possible to be pro-active
in finding unauthorized usage by simply searching for your images; the
greatest tools being image search engines powered by
google,
yahoo, and
MSN. Although this may seem like finding a needle in a haystack, at times it can be a very useful tool.
A very new tool on the scene of internet image search is a website tool called
TinEye, designed by
Idèe.
Tineye is an image search engine using images rather than keywords to
search the internet. Currently in beta testing, their search algorithm
is quite impressive. However, their current index is far from complete
and it is unknown whether their service will become freely available to
everyone, or whether their services will come at a price.
In the case you end up finding unauthorized use of an image online and you wish to do something about it
3,
it is usually best to contact the webmaster(s) directly. If contact
information is not provided on the webpage itself, resources such as
WHOIS
can be used to find technical contacts as well as hosting service
contacts. Usually a simple email to the webmaster - stating the
unauthorized use of your work and politely asking them to remove the
image from their server - will do the trick. In certain situations a
Cease and Desist letter may be necessary, specifying an infringement of
copyright has been made as well as specifying your demands. Sometimes
webmasters will be extremely cooperative. Other times not. In the event
the webmaster does not comply with your demands, there are actions you
can take, including a) Notifying their Advertisers b) Contacting the
Hosting Service (found through a
WHOIS) c) contact websites that link to the offending website asking for the removal of links
2
d) send requests to search engines that the website contents be removed
from their indexes. For a thorough discussion on stolen content and
actions that can be taken, I highly recommend reading the following
article:
Stolen Content - How to Act.
Offline copyright infringement is a lot more difficult to detect. In
either case, if you feel compensation is justified for copyright
infringement, I suggest contacting a copyright attorney to discuss your
options
3.
10) Copyright Images3:
A copyright is a form of protection provided by law that prevents the
use of a piece of work, and the copyright owner the person who
originally created that work (please visit the
United States Copyright Office
for more information). In almost every case, if you push the shutter
button you hold the copyright. However, it is always advisable to
register a copyright of your images with the
United States Library of Congress
or a similar entity in the country where you reside. While this will
not prevent images from being downloaded and/or stolen, it will give you
proof that you are the copyright owner. Registering is easy, cheap, and
can be done in batch (eg you can register several images, such as
"Photographic Works of - First Quarter, 2008").
There is no international copyright law which provides immediate
protection for an artist against unauthorized usage: however most
countries have copyright laws that pertain in that country. Protection
is also provided internationally through the Berne Union for the
Protection of Literary and Artistic Property (
Berne Convention) and the
Universal Copyright Convention
(UCC). For more information on international copyright laws, the US
Copyright Office has a circulation article available as a PDF on
International Copyright policies.
Every image protection technique will have its pros and cons. A
watermark can detour image theft but can also be considered unsightly. A
low resolution image can prevent theft because of the quality - but
because of the quality effect what the image portrays. Preventing right
click can prevent direct downloads but does not prevent 'screen dumps'.
However, the combination of techniques can become powerful in
discouraging unauthorized image usage.
Will there ever be a solution to online image theft? In a naive sense
we all would like to think so, but in all honesty doubt it. Watermarks
can be edited, and regardless of how well the URL to an image is
hidden, people always have the 'print screen' option. However, in my
experiences in having my images used without my permission (at least
those that I am aware of), many of the people doing so had little
knowledge that they were guilty of copyright infringement - so perhaps
education about copyright infringement and image theft is part of the
solution.
What I do: Finally, you may be wondering what I do
for image protection. All my images are registered with the Library of
Congress, I prevent hotlinking, my images lack color profiles, are low
resolution, and a few may have various copyright watermarks.
Occasionally, whether out of curiosity or paranoia, I will do an image
search for my images. That being said over the course of time I have
used almost every one of the preventative steps above during various
stages of paranoia. While some of the techniques have stuck, others have
not. I have found many of my images placed on other websites, and have
sent out a fair share of letters to webmasters. So what measures should
you take for image protection? Ultimately it comes down to doing what
you feel appropriate to protect your images, even if that means not
putting them online in the first place.
For questions or comments on this article, please contact
Greg Cope.
