Another of the many splendours that is Drupal is the ImageCache module. This provides you with the ability to configure a basketload of image-processing actions. The most obvious of these is to size, crop and scale images, so that clients have automated processing associated with virtually any of the images that they may wish to upload to their website.

Overlaying your logo as a watermark image

A new class of image-processing I’ve started to add to the bundle is the provision of a watermark. This takes a specific image such as a logo and overlays it onto another image.

A nice example comes from the Balloons over France website that I recently completed. We built a section on that site where some interactive maps (yep, I have a separate blog article about that subject) provided access to a collection of photo galleries, each of which contained a set of thumbnails that clicked up really nice photographs of the French countryside taken from above. We decided to drop into the corner of each of these larger photos a version of the site’s logo.

Here’s a blue version of the logo so that you can see it against the white background of this page. In reality, the logo is a white PNG file on a transparent background.

Watermark logo

The server then takes this watermark image (the real, white, one) and drops it into place — on demand — in the JPG image that is requested in the popup. It only needs to do this once, but could repeat the whole process with a different logo if the client subsequently decides to change the logo that is used.

Here’s a shot of it being used on an aerial photo of a chateau in the Dordogne:

Watermark logo in place

Brand recognition

Some clients are anxious that the images on their website might be appropriated and used elsewhere. Whether that’s likely or not is difficult to guage, but some clients are reassured by having a watermark like this placed on their own images.

The more powerful argument in favour of using this technique is that of developing brand recognition. This is epecially true if there are other businesses out there with a similar name to yours.

That said, usability remains important, so this technique needs to be used subtly. The logo’s colours shouldn’t be too strong and its size and placement needs a bit of thought. Above all, it should help reinforce brand recognition without detracting from the content of the image.

Best of all is that once it’s all configured, this image-processing runs every time you add an image of the specified type. It’s automated.

Where could you visualise a watermark image being used on your website?