Photography & Video Technology
watermarkhack_1.jpg

Watermarking images can sometimes be a decent way to allow posted content to make the rounds online, while ensuring that the source of the content is correctly attributed. One thing that’s always bugged me about watermarking, however, is that the original source site becomes all peppered with ratty attributions or logos that detract from the quality of the posted image. In this scenario, the watermarked image makes the content owner’s site look shoddy, and this is a bad thing.

AJ sent in this nifty idea for making invisible watermarked images, where the watermark only appears when the image is downloaded or copied:

With about 10 lines of HTML and CSS, you can have an image on your site, watermark free. Then, when it’s pulled off, a watermark suddenly appears like magic! A precisely positioned DIV with an image background that cancels out just the watermark is placed over the watermarked image, and when they overlap, you (mostly) see the un-watermarked original image. Tada! It’s not cross-browser tested, so stay aware.

I tested this with a slightly easier alternative. Just cut out a whole rectangle of the source image where the watermark will go, then place a relatively positioned div with that background over the watermarked output. It’s completely imperceptible until the image is copied.

Try dragging the image above to your desktop and you’ll see what I mean.

The only downside is that it’s a bit tedious, but there’s no reason this feature couldn’t be automated in the image upload facilities of most blogging software. Also, this isn’t going to keep someone from screen-grabbing the whole thing, or carefully reassembling the two images manually. It does, however, make it easy for honest people to easily attribute the source, all while improving the look of the creator’s site. Anyone going to the trouble of subverting this would probably be cropping off your watermarks anyway.

AJ’s Watermark Overlay Trick

26 thoughts on “Invisible watermark

    1. Also, this isn’t going to keep someone from screen-grabbing the whole thing, or carefully reassembling the two images manually.

      duh.

  1. No offence, but in html souce your watermarked area image address is clearly seen and downloadible. So it doesn’t prevent from downloading both images and recombining them.

  2. Its about as effective as disabling right-click.
    -or-
    How to waste hours in a futile attempt which will only get you laughed at.

  3. Every reply so far repeats what the original post admits: “Also, this isn’t going to keep someone from screen-grabbing the whole thing, or carefully reassembling the two images manually. It does, however, make it easy for honest people to easily attribute the source, all while improving the look of the creator’s site.”

    I agree that it doesn’t keep anyone from stealing the photo. However, it includes credit for the content owner when the image it stripped from their site and displayed elsewhere while not making the content owner’s site look crappy. That’s the entire point.

  4. Instead of having to mess with the background images and edit each image specifically to work with the watermark. You could just create a PNG with the watermark, make the background of that PNG transparent, and overlay it with CSS. It will work with any image at that point.

  5. “It does, however, make it easy for honest people to easily attribute the source”

    Which which honest people would do anyway, without the watermark, unless they first saw it on the site of someone dishonest who removed the watermark.

    This method just makes it easier for dishonest people to remove the watermark.

  6. I can suggest DigiMarc or much cheaper shareware SignMyImage. Both of them do invisible watermarking. According your blog, these should fit your needs. Filip

Comments are closed.

Tagged