Protecting Your Images on the Web

You wish to display your photos, paintings and other artwork on the web for commerce or general adulation, but you do not want people stealing your works for their own use, right?

Well, you cannot. Just as a person could take a photocopy of an image in a book, or snapshot of a piece of art, if your images are viewable, they are able to be stolen (or ’borrowed’ as the purloiner would argue).

There are however steps you can take to discourage theft and reduce the quality of stolen works-even to turn the theft to your advantage.

Best Practice – Plan for Purloiners

Create Web-Quality Images

Printing a high-quality image of a reasonable size requires a high-resolution image. On the web, such an image is an open invitation to thievery and worse, it can significantly slow down your site!

Most computers display resolutions of 72-96 DPI. Save your web-viewable images at a resolution of 100dpi or less.

Many image programs have the ability to optimize your photos for the web.

The days of 800×600 monitor resolutions may be fading, but many still use it. Large images can cause scrolling and are tempting to would-be thieves. Scale your images to a size viewable in most monitors (600×400 is good) and keep the original high-quality files offsite or in a protected folder.

Summary: Thinking small results in faster web pages and grainy prints (which in this one case, you want. :)

Watermark Your Images

If you have paper currency, hold one up to a light. Chances are you’ll see a watermark-a translucent design that appears when backlit. Watermarking has been used for centuries to denote who manufactured a product (fine linen paper also often has a watermark).

Digital watermarks change a file’s structure to embed characters to uniquely identify it. They are not visible, and most often used to control distribution of high-quality digital images. Programs are available to digitally watermark and image-google it, or I can add links upon request.

Visible watermarks come in many forms. Often you’ll see a copyright notice printed at the bottom-right of an image, but these are easily cropped. The method I use involves creating a translucent .png image, usually a logo, and overlaying that upon the original image.

Watermarks can be permanent, added when the image is edited, or applied when viewed. The first option is fast, but if you change watermarks you have to recreate all your sized images. The second can increase server load and increase your used bandwidth, but gives you the flexibility of changing watermarks instantly. See below for a wrapping script for on-the-fly watermarking.

Watermarks can turn thieves into advertisers. They save an image to use as a background, someone else admires it and sees your logo or site name so they can visit your site and hopefully purchase a print.

When designing your watermark, remember to keep it simple, easy to identify, and subtle. Blatant marks might keep people from grabbing images, but it also screams distrust, which can turn away customers.

Coming upon request: How to create a translucent watermark.

Disable the IE Image Toolbar

If you use IE, you’ve no doubt seen the toolbar pop up when you
hover over an image. Disable the toolbar by adding this meta tag to the <head> section of your pages:

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

To disable to toolbar for one image only, add to the img tag the attribute

galleryimg="no"

Use Transparent Image Overlays

You can place a transparent .gif(Graphics Interchange Format —A bitmapped graphics file format developed by CompuServe.) or .png(Portable Network Graphics, a lossless bitmap image format) over your images, creating a shield. When the user saves the image, they are really saving the transparent image instead. Many won’t notice this until they have left your site and won’t bother to try again.

When testing, use a non-transparent image to verify coverage.

There are several ways to implement this. They all require some testing to see what works best in your situation.

The simplest uses CSS and positioning or tables. Here are a few methods you can try:

Background Image

<div style="background-image:url("theimage.gif");
width:50px; height:75px;" >
<img src="transparent.gif"
width="50" height="75" />
</div>

Give the image a name like ’photo_340a.gif’. Seeing ’transparent.gif’ in the Save File dialog is a tip-off.

This method users your image as a background, with the transparent gif filling the div container. Exact image dimensions are required, and you can’t resize images on the fly.

You can also use a table if you prefer.

<table style="width:50px; height:75px;">
<tr>
<td style="background-image:url("theimage.gif");">
<img src="transparent.gif"
width="100%" height="100%" />
</td>
</tr>
</table>

Relative Positioning:

<img src="theimage.gif" width="50" height="75" />
<img src="transparent.gif" width="50" height="75"
style="position:relative; left:-52px; top:0px;" />

This method stretches the transparent gif to match the image and moves it over. Many browsers still reserve the space the gif would have taken, so it is best used where it won’t affect layout. Exact image dimensions are required.

Absolute Positioning, CSS method

<div style="width:50px; height:75px; position:relative;">
<img src="theimage.gif" width="50" height="75" />
<img src="transparent.gif"
style="position:absolute; top:0; left:0;
height:100%; width:100%;" />
</div>

Absolute Positioning, Table method

<table style="width:auto; height:auto; position:relative;">
<tr>
<td>
<img src="theimage.gif" width="50" height="75" />
<img src="transparent.gif"
style="position:absolute; top:0; left:0;
height:100%; width:100%;" />
</td>
</tr>
</table>

The advantage of this method is that you can scale images. Plus, if you use the table method, you should be able to set the height/width to ’auto’ and it will size itself. When possible, however, you should always give exact dimensions.

Tips for users of Menalto’s Gallery program:

Here are a few specific examples I have used in Gallery. Your mileage may vary.
Some styles (like the borders) may seem odd, but I found I needed them to apply
this solution in FireFox, IE6, or Opera.

Very important to note is that there are no spaces or returns inside the anchor (a) tag. If you have spaces, IE shows them.

Gallery 1:

Edit html_wrap/inline_imagewrap.inc and find these lines:

if (!empty($href) ) {
$href_tag= "<a href=\"$href\" ". $attr .">$tag</a>";
} else {
$href_tag= '<a '. $attr .">$tag</a>";
}

Replace it with one of these 2 following examples.

if (!empty($href) ) {
$href_tag=
'<table style="position:relative;">'.
' <tr><td>'.
' <a href="'.$href.'" '. $attr .
' style="border:1px #ccc solid;display:block;'.
' height:100%;position:relative;" >'.$tag.
'<img src="transparent.gif" height="'.($imageHeight+30).'"'.
' style="width:100%;border:none !important;background:transparent;'.
' position:absolute;top:0;left:0;right:0;bottom:0;" />'.
'</a>'.
' </td></tr>'.
'</table>';
} else {
$href_tag=
'<table>'.
' <tr>'.
' <td class="ngdoverlay" style="position:relative;display:block;">'.
' <div style="position:relative;">'.
' <a '. $attr .' style="display:block;" >'.$tag.
'<img src="transparent.gif" '.
' style="position:absolute;top:0;left:0;z-index:2;" '.
' border:none !important;width:100% !important;'.
' background:transparent;" /></a>'.
' </div>'.
' </td>'.
' </tr>'.
'</table>';
}

The example below is a table-less solution, that works better in some setups.

// Begin transparent image overlay code
// NotGoddess Designs - transparent image overlay code
// If needed change gif src to point at other image src.
$transparent_gif_src = $gallery->app->photoAlbumURL.
'/html_wrap/photo_t42.gif';
if (!empty($href) ) {
$href_tag=
'<a href="'.$href.'" '. $attr .
' style="border:0px #ccc solid;display:block;'.
' height:'.($imageHeight).'px;width:'.($imageWidth).'px; '.
' position:relative;" >'.$tag.'<img '.
' src="'.$transparent_gif_src.'" height="'.
($imageHeight).'" width="'.($imageWidth).'" '.
' style="border:none !important;position:absolute;'.
'top:0;left:0;" /></a>';
} else {
$href_tag=
' <a '. $attr .' style="display:block;position:relative;'.
' height:'.($imageHeight).'px;width:'.($imageWidth).'px; '.
' " >'.$tag.'<img'.
' src="'.$transparent_gif_src.'" height="'.($imageHeight).
'" width="'.($imageWidth).'" '.
' style="position:absolute;top:0;left:0;'.
'z-index:2;border:none !important;" /></a>';
}
// End transparent image overlay code

Gallery 2:

For Gallery 2 the method I found most effective involved editing two core files. It will render the transparent image over any Gallery Image.

Altering core files can cause problems with upgrading, so please backup the original, and after you install the change, make a copy of that too. That way when you upgrade you have it to reference.

File 1: /modules/core/classes/GalleryDerivativeImage.class (around line 203)
File 2: /modules/core/classes/GalleryPhotoItem.class (around line 224)

In each, find the function render($format, $item, $params) and comment out these lines:

$html = sprintf('<img src="%s"%s', $src, $sizeStr);
unset($params['fallback']);
foreach ($params as $attr => $value) {
if (isset($value)) {
$html .= " $attr=\"$value\"";
}
}
return $html . '/>';

Replace with:

$html =
'<span class="ngdoverlay" '.
' style="display:block; position:relative; padding:1px;'.
' width:'.($width+10).'px;height:'.($height+10).'px;'.
' margin:auto;margin-left:auto;margin-right:auto;">';
$html .= sprintf('<img style="margin:0;" src="%s"%s', $src, $sizeStr);
$htmlo = sprintf('<img src="/transparent.gif"%s', $sizeStr);
unset($params['fallback']);
foreach ($params as $attr => $value) {
if (isset($value)) { $html .= " $attr=\"$value\""; }
}
unset($params['id']);
unset($params['class']);
foreach ($params as $attr => $value) {
if (isset($value)) { $htmlo .= " $attr=\"$value\""; }
}
$htmlo .=
'style="position:absolute;top:0;left:0;right:0;'.
' width:100% !important;height:100% !important;'.
' background:transparent;" ';
return $html . '/>'.$htmlo.' /></span>';

Prevent HotLinking

HotLinking occurs when another website uses an image from your site on theirs, not by copying the image, but by directly calling the url of the image on your site. That means the image is displayed on their site, but your site pays the bandwith cost.

Keep in mind that you might do this yourself when you post your images on other sites by linking to them instead of uploading them. HotLinking can be detected by examining server logs.

If you have Apache server you can use mod_rewrite to block or redirect these attempts. You may need to alter these slightly to work with your server settings. Visit Apache.org for a more thorough explanation.

A very basic rewrite-HotLinks to gif, jpg, and png images are refused if the referrer (page the request is coming from) is not allowed.:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteRule \.(gif|jpg|png)$ - [F]
</IfModule><br />

Take note of the first condition. It matches if no referrer. This is needed because some browsers don’t send referrers and you could block images on your own site.

You can allow specific sites (Google, or a forum you link from) while still disallowing others. Just add the condition.

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteCond %{REMOTE_HOST} ^.*\.google.com$ [NC]
RewriteRule \.(gif|jpg|png)$ - [F]
</IfModule>

You can even allow an image-but one of your choice-to be shown instead. Perhaps one saying ’To view this image, visit MySite.com today!’:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?mydomain.com/.*$ [NC]
RewriteRule \.(gif|jpg|png)$ http://localhost/image/hotlink.png [R,L]
</IfModule>

You could also use this technique to deliver a specific image to a specific host that is causing you problems, but do try not to have an offensive image. That site might be hotlinking, but his viewers are not.

Wrap your images.

Another use of .htaccess files is to wrap files-requests for files are first processed by a script of your choice (php, perl, etc) and the output is sent out. You can use this to filter or block images as above, or do on-the-fly watermarking. Example scripts coming soon.

The Infamous No-Right-Click Script

Why not to use it, and how to do it tastefully if you must….

Disabling the right-click on a page is a wonderful way to alienate your visitors and encourage some to ’rise to the occasion’ and steal images just to prove they can.

Alienation occurs because the context menu (what you usually get on right-click) has more than just ’save image as’. I use it to open links in new browser tabs, and access various developer and accessibility tools. It also fosters that "I don’t trust you" feeling.

Also, it doesn’t work on all browsers/systems, and can be easily circumvented by simply disabling Javascript.

Javascript should enhance a page-never depend on it working, especially regarding security.

That being said (for many other reasons, just google), some just like that extra layer of discouragement. Below are two images. One is protected with a no-right-click script, the other is not. Try to save them.

NotGoddess.com NotGoddess.com

The script, which can be downloaded here, does not work in Opera, but does work in IE6 and FireFox. You can disable specific images by specifying a class, or all img tags. You can also optionally display a dhtml box that’s attached to the container (tag) holding the img tag. The parent container should have position:relative style, or the box may appear at the top left of the page.

Download: no_right_click.js


Add Your Comment