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