Image Copy Protection

There are techniques designed to protect an image from being copied. Or, rather, to hinder it — for there is no way to prevent copying altogether that I'm aware of, short of not publishing the image at all.

The technique presented here does several things:

1. Publishes the image with a JavaScript tag.

   This will fool most or perhaps all image-searching robots and spiders. It also gives no advantage to humans who turn JavaScript off with intent to copy the image. In fact, if the page is loaded without JavaScript, the image doesn't publish at all.

   (The copy protection doesn't rely on JavaScript, only the publishing of the image.)

2. The image you see is behind a transparent image with the same dimensions.

   Right-clicking will download the transparent image, not the image that's seen. The img tag for the transparent image has the alt and title attributes the visible image would have. Thus, it looks and feels and reacts like the visible image would, but the download will grab only the transparent image.

3. The image you see is delivered as a background image, not in a regular img tag.

   People looking in the source code for an img tag won't find your image that way. There is no img tag nor src attribute used to publish the visible image.

It is not a perfect technique, but pretty good — especially when being selective about which images to protect. It is better than a JavaScript-based right-click blocker with all of its drawbacks.

Caveat: No image copy protection technique is perfect. With sufficient technical skill, a copy of the image can be obtained.

The most obvious way is the screenshot method. The person makes a screenshot of the page or a section of the page. Then crops out everything but the image they're interested in.

Another way is by finding the image in browser cache. (See Preventing Browser Cache for a possible solution to that.)

Various image copy protection techniques have various ways around them.

The technique presented here is pretty good.

See for yourself. The image on the left is published with this technique.

If you right-click to save the image, you'll end up saving a transparent image, not the Willmaster logo image. If you view the source code and load the URL of the script that is pulled in with the script tag, you'll see the response human and robotic snoopers get.

How It Works

You customize a PHP script (source code below) and upload it to your server. Then, you put a line of JavaScript into your web page where you want the image to be published.

Here is the source code of the PHP script. Customization notes follow.

<?php
/*
   Overlay Image Copying Protection Technique
   Version 1.0
   August 18, 2017
   Will Bontrager Software LLC
   https://www.willmaster.com
*/

/* - Customizations - */
$ImageLocation = "http://example.com/images/image.jpg"; // URL of the image to publish.
$ImageHeight = 50; // Image height in number of pixels.
$ImageWidth = 200; // Image width in number of pixels.
$ImageTitle = "Optional title value for the image";
$ImageAlt = "Optional alt value for the image";
/* - End of Customizations - */

$ForegroundImageSRC = 'data:image/gif;base64,R0lGODlhBQAFAJH/AP///wAAAMDAwAAAACH5BAEAAAIALAAAAAAFAAUAAAIElI+pWAA7';
$BackgroundImageDeclaration = "background-image:url('$ImageLocation'); background-repeat:no-repeat; background-position:center center;";
$ResponseTemplate = <<<IMAGETEMPLATE
<div 
style="width:{WIDTH_PIXELS}px; height:{HEIGHT_PIXELS}px; border:none; padding:0; {BACKGROUND_IMAGE}">
<img 
alt="{ALT}" 
title="{TITLE}" 
src="{FOREGROUND_IMAGE}" 
style="width:{WIDTH_PIXELS}px; height:{HEIGHT_PIXELS}px; border:none; outline:none;" />
</div>
IMAGETEMPLATE;
$ResponseTemplate = str_replace('{ALT}',$ImageAlt,$ResponseTemplate); 
$ResponseTemplate = str_replace('{TITLE}',$ImageTitle,$ResponseTemplate); 
$ResponseTemplate = str_replace('{WIDTH_PIXELS}',$ImageWidth,$ResponseTemplate); 
$ResponseTemplate = str_replace('{HEIGHT_PIXELS}',$ImageHeight,$ResponseTemplate);
$ResponseTemplate = preg_replace('/[\r\n]+/','',$ResponseTemplate);
$backgroundImage = '';
$count = strlen($BackgroundImageDeclaration);
for( $i=0; $i<$count; $i++ ) { $backgroundImage .= '&#' . ord($BackgroundImageDeclaration[$i]) . ';'; }
$foregroundImage = '';
$count = strlen($ForegroundImageSRC);
for( $i=0; $i<$count; $i++ ) { $foregroundImage .= '&#' . ord($ForegroundImageSRC[$i]) . ';'; }
$response = str_replace('{BACKGROUND_IMAGE}',$backgroundImage,$ResponseTemplate);
$response = str_replace('{FOREGROUND_IMAGE}',$foregroundImage,$response);
$response = str_replace("'","\\'",$response);
header('Content-type: text/javascript');
echo "document.write('$response');";
exit;
?>

Notes:

At lines 11 through 15 of the PHP script, you'll see a customization section. Here is what to do with each of the customizable variables.

1. The $ImageLocation variable: Between the quotation marks, replace http://example.com/images/image.jpg with the URL of the image that is to be published.

2. The $ImageHeight variable: Replace 50 with the height of the image to be published.

3. The $ImageWidth variable: Replace 200 with the width of the image to be published.

4. The $ImageTitle variable: Between the quotation marks, replace Optional title value for the image with the text you want for the image's title attribute. If you prefer no title attribute, remove the text but leave the quotation marks.

5. The $ImageAlt variable: Between the quotation marks, replace Optional alt value for the image with the text you want for the image's alt attribute. If you prefer no alt attribute, remove the text but leave the quotation marks.

Now, save the PHP script as overlay.php (or other .php file name you prefer) and upload it to your server into a directory that can run PHP web pages. Make a note of its URL.

You are ready to publish the image.

To publish the image, put the following JavaScript (customized it first) into your web page where you want the image to appear.

<script src="http://example.com/images/overlay.php"></script>

Before pasting the JavaScript into your web page, replace http://example.com/images/overlay.php with the URL of the PHP script you just uploaded.

You're good to go for that image. Wherever you paste the line of JavaScript, the image shows up. You can paste the JavaScript into as many web pages as you wish.

Every unique image you wish to protect needs it's own PHP script. Give the scripts unique file names so they don't overwrite each other when they're uploaded.

The images are protected from copying in several different ways, as listed at the beginning of this article. The technique is breakable, like every image copy protection scheme is, but can still be used to good effect.

(This article first appeared in Possibilities newsletter.)

Will Bontrager