Invisible watermark

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. Zapadelius says:

    But this method doesnt prevent a user from just making a screenshot, does it?

    1. matt says:

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

      duh.

  2. DennisD7 says:

    This is the smartest thing I’ve read today. Great solution, and it shouldnt be so hard to automate.

  3. Anonymous says:

    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.

  4. Ethan says:

    Or, to circumvent it you could just take a screenshot of the seemingly watermark-less image, right?

  5. hurf durf says:

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

  6. BoWingo says:

    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.

  7. Grant Muller says:

    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.

  8. Anonymous says:

    “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.

  9. Wirehead says:

    There’s a second trick, which I use on http://www.wireheadarts.com/

    It’s probably even easier to crop out, but my blogging software automatically extends the image to include a notice on it and then I enclose it in a div that crops out the image.

  10. Brent says:

    I downloaded it and dragged it, both times it did not show a watermark. I am on a mac, and it did not work in safari or opera.

  11. Filip says:

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

  12. Michelle says:

    Where can I see the html code?

Comments are closed.

Discuss this article with the rest of the community on our Discord server!
Tagged

ADVERTISEMENT

Maker Faire Bay Area 2023 - Mare Island, CA

Escape to an island of imagination + innovation as Maker Faire Bay Area returns for its 15th iteration!

Buy Tickets today! SAVE 15% and lock-in your preferred date(s).

FEEDBACK