Protecting Website Images With an Automatic Watermark

It's worth remembering that anything that people can display on their screen can be copied!

No clever stop right-hand click scripts etc. will prevent your images being stolen by others - the only effective way to protect your images is to put a watermark on them - either a graphic or text (or combination of both).

Even then images can be cropped or manipulated to remove your watermark - but it may leave your image obviously tampered with and will stop many people from bothering. It is better than doing nothing if your image copyright is important to you, it's also a simple way of branding images with your website address or logo not necessarily for image protection.

After a quick search you will see there are many auto-watermarking scripts freely available on the internet.

I've picked a PHP script that's been published in a number of places that appears quite popular for my demonstration.

Save the following PHP code into a file called watermark.php

<?php
// this script creates a watermarked image from an image file - can be a .jpg .gif or .png file
// where watermark.gif is a mostly transparent gif image with the watermark - goes in the same directory as this script
// where this script is named watermark.php
// call this script with an image tag
// ##img src="watermark.php?path=imagepath"## where path is a relative path from the document root - such as subdirectory/image.jpg
$imagesource = $_SERVER['DOCUMENT_ROOT']."/".$_GET['path'];
if (!file_exists($imagesource)) die();
$filetype = strtolower(substr($imagesource,strlen($imagesource)-4,4));
if($filetype == ".gif") $image = @imagecreatefromgif($imagesource);
if($filetype == ".jpg") $image = @imagecreatefromjpeg($imagesource);
if($filetype == ".png") $image = @imagecreatefrompng($imagesource);
if (empty($image)) die();
$watermark = @imagecreatefromgif('watermark.gif');
$imagewidth = imagesx($image);
$imageheight = imagesy($image);
$watermarkwidth = imagesx($watermark);
$watermarkheight = imagesy($watermark);
$startwidth = (($imagewidth - $watermarkwidth)/2);
$startheight = (($imageheight - $watermarkheight)/2);
imagecopy($image, $watermark,  $startwidth, $startheight, 0, 0, $watermarkwidth, $watermarkheight);
header("Content-type: image/jpeg");
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
?>

Create a transparent image in GIF  format to use as your watermark (transparent PNGs can also be used - see notes below) name the image watermark.gif

Create your web page as normal and to automatically add watermarks to images just change the image <img> tag:

normal syntax: <img src="watermark/images/myphoto.jpg">

watermarked syntax: <img src="watermark.php?path=watermark/images/myphoto.jpg">

For this demo I'm using a directory/folder called watermark - so just create that as normal using your favourite FTP client.

Your watermark.php (script) and watermark.gif (transparent image) files then need to be saved in the watermark directory.

To stop someone from looking at your HTML code and working out where your original images are stored and accessing an un-watermarked version directly, you need to add an .htaccess file to your watermark/images directory to protect it. I'm using this code:

RewriteEngine On
RewriteCond %{REQUEST_URI} !error.gif$
RewriteRule \.(gif|jpg|png)$ /error.gif [L]

If you would rather use a transparent PNG than a GIF then you can do this by simply changing the PHP script

$watermark = @imagecreatefromgif('watermark.gif');

to

$watermark = @imagecreatefrompng('watermark.png');

You then place your PNG file in the watermark directory instead of a GIF.

Removing the /2 from the PHP script from the lines starting with $startwidth and $startheight will place the watermark in the bottom right of your original image. Using /2 places the watermark centrally.

I've created a simple demo showing the watermarks in use which can be viewed here: http://www.hmmm.ip3.co.uk/watermark I've used both GIF and PNG formats.