Digital Rebel Tips and Tricks

As an amateur photographer, I've been looking for practical ways to display my work as well as protect them from potential copyright infringement. There are a hundred ways to superimpose a watermark on an image, but this requires a process of doing that to each of your images before you place them on your website. Being the lazy fellow that I am, I was seeking a way for this to occur on-the-fly without me having to do anything but scale my preview/thumbnail images (which I do automatically with my gallery software).

I investigated various ways to use CGI to handle this, which is an easy way to do it, but it can lead to unweidly URLs. A simple method might be to link to is such as this:

<img src="/cgi-bin/watermark.cgi?image=foobar.jpg">

Basically, you're passing the CGI the file you want to have watermarked and the .cgi does its thing, printing the header "Content-type: image/jpeg" and then the JPEG data to standard out. I would have to come up with a way to have the CGI do this watermarking automatically. It would work, but its inelegant and makes for ugly URLs. Close, but no cigar.

Another method I came up with was using PHP to do a similar function, instead of using CGI, I would use PHP's internal image manipulation routines to generate watermarked image. Unfortunately, the URL would essentially be the same:

<img src="watermark.php?image=foobar.jpg">

Then it dawned on me that because my URLs for this would be fairly consistent, why couldn't I use Apache's Mod_Rewrite module to automatically convert my normal image source tags into the php URL and mask this from the browser?

This method would get me two things:

1) The URL for the image would be normal, such as <img src="/images/foobar.jpg">
2) Any direct requests for the image would result in a watermarked image

So if a person tried to do something like:

wget http://www.mysite.com/image/statue.jpg

They would be served up the watermarked image, despite the fact that the original statue.jpg on the server is unmodified!

The PHP script, which I call "wm.php" that I use for watermarking was written by "thunder", but was modified with some pathing enhancements by myself. There are only a few variables needed to be changed in the script, the base directory of your HTML and the name of the watermark image you wish to use, which should be located in that base directory.

Mod_rewrite can be configured in your server's httpd.conf or your local .htaccess. If you don't have access to httpd.conf, modifying your .htaccess is your only alternative.

Lets say my URL is something like this:

http://www.bigisp.com/users/johndoe/index.html

Basically, the rule is pretty straight forward:

RewriteEngine on
RewriteBase /johndoe
RewriteRule ^(watermarked.*)/(.*\.[jJ].*)$ /~liem/wm.php?p=$1&i=$2

I'm using the RewriteBase directive here because all of my documents and images are based out of the /johndoe/ directory.

Because I won't want all of the images on my site watermarked, I only put the images I want to be watermarked in the "watermarked" subdirectory. The path and filename information are passed to the wm.php script so that they're properly handled.

The method used in wm.php to create the watermark is to overlay the original image with a transparent PNG image. The "strength" of the watermark is determined by the transparancy of the overlay image itself. More of the watermark is visible is the PNG is more opaque.

Its pretty easy to create the water mark image, so I'll try to detail it here. Open up the gimp and create an overlay image the size you wish to use. It does not have to match the size of the image you are using it with, as it will tile, but it must be large enough to provide the proper protection level you require.

Note, the following screen caps are from Gimp 2, but they should be functionally similar to Gimp 1.x

Start up the Gimp and start a new image. With the "Create a new image" dialog specify the size you with then use the "Advanced Options" twiddle to select "Fill with" of Transparancy.

Now you may create the transparent overlay you wish to use. It could be text or it could be an overlay image. If you choose to overlay an image or logo, it would be best to use a logo that is surrounded by already transparent empty area, otherwise it will cause undesirable effects on your original image. For our example, we'll just use text.

With the Text tool, add some text you wish to use as the watermark, be sure it is large enough in the image to provide the coverage you need.

Setting the transparancy of this overlay is where you want to try various settings for your own taste. Essentially how strong you want the watermark to be visible in your images. By adjusting the transparancy value of the text (or image) you define how apparent it is on your original image. The sweet spot seems to be around 3-8%, but you will want to experiment here. Be sure that when you adjust the Opacity slider that you are adjusting the correct layer.

It looks like its nearly invisible, but its there, just enough. Now you can save the image as a PNG file. It may say that it cannot handle layes, so use the export in the save dialog and have it merge the layers for you.

Now, test the effect with your new transparent PNG file, make sure its location and filename match what it says in wm.php

Just to get you started, you can use sample PNG file using 8% opacity.

To illustrate the effect various amounts of Opacity have on your original image, here is the same image with various levels of opacity applied to the overlay PNG file:

There are some images that may require a stronger opacity level just due to the content and contrast in the subject. There is no one magic level, so you'll need to experiment.

Below are some samples of a watermarked image, compared to its non-watermarked version.

<img src="watermarked/vestas.jpg"> (md5sum: ccb84c63729886ec1350b82b6dfea229):

No watermark:

<img src="nowm/vestas.jpg"> (md5sum: ccb84c63729886ec1350b82b6dfea229):

---

<img src="watermarked/falls.jpg"> (md5sum: e248cd6cd03520beddc059557c606d66):

No watermark:

<img src="nowm/falls.jpg"> (md5sum: e248cd6cd03520beddc059557c606d66):

---

<img src="watermarked/green.jpg"> (md5sum: 7b30d0742235da9547918c5360f8d4d8):

No watermark:

<img src="nowm/green.jpg"> (md5sum: 7b30d0742235da9547918c5360f8d4d8):