This is Derek Powazek Fray Magazineer
This is Powazek
Castro Flower ShopTiredHappy breakfastUpPupSmog Queen LoungeCold Drinks
<begging> Prove your love. Subscribe to Fray! </begging>

A Savvy Approach to Copyright Messaging

I’m a photographer. I’m also a web geek. And those two sides of my brain sometimes fight with each other.

As a photographer, I’m outraged when people grab photos off the web and use them without consideration of copyright. I’ve been fighting this “It’s on the internet, so it must be free!” ignorance for more than a decade.

As a web geek, I love the freedom of the web. I love that I can share my work with the whole world, for free. This is the great gift of the internet.

So what to do? Faced with this dilemma, many photographers add a copyright notice to their photos like so.

breeder-copy.jpg

I have two problems with this kind of copyright messaging.

Problem 1: It’s ineffective. Someone determined to disregard your copyright can easily crop this out, so it doesn’t actually solve the problem. The small percentage of jerks who want to violate my copyright still can. (Here’s where some photographers say that this action shows “willful misuse.” Okay, sure. But “willful misuse” only comes into play when you talk damages, and 99% of the time it never gets that far. There is nothing in copyright law about defacing your work with a legal notice for it to be protected.)

Problem 2: It’s ugly. The art of photography is about telling a story visually. Any visual noise detracts from that story, and lessens the impact of the work. Basically, copyright watermarks punish the vast majority of your viewers who will never violate your copyright, in an ineffective attempt to stop the tiny minority who will. That’s dumb.

But here’s where the web geek portion of my brian kicks in: There has to be a way to attach copyright information to a photograph online, without disturbing the natural viewing of that photo. And there is.

breeder-photoby.jpg

Here’s a photo of a Chihuahua I met the other day. Notice that I added a giant copyright notice to the bottom. This is better than a simple circle-c, because it explains what copyright means, and invites the viewer to contact me for usage permission. (I think there would be fewer copyright freakouts if my fellow photographers could discuss it without, yaknow, freaking out.) Your message could be whatever you want to say to your viewers (and potential photo buyers).

It’s crazy ugly, right? Right. That’s why, instead of putting the image in my webpage with a simple “IMG SRC” like we usually do, we’re going to do something a little more savvy: put it in a DIV with the background set to the image, like so.

So instead of using code that looks like this:

<img src=”image-url” height=”123″ />

Use code like this:

<div style=”height:123px; background:url(image-url)”></div>

And then just set the height to be the height of the photo itself, without the copyright statement. That means the copyright notice is there, just layered behind the page. If you view the image raw on the server (like this), you’d see the copyright notice.

UPDATE: To cover more edge cases (and add a 1px black border), you can expand the basic technique with a few more attributes. (Thanks, Dan!)

<div style=”height:123px; width:234px; border:1px solid #000; background:url(image-url); background-repeat:no-repeat; overflow:hidden”></div>

(Side benefit: This technique also disables the “save image” right-click in most browsers, another ineffective measure employed by photographers to thwart only the laziest of thieves.)

Of course, this technique does not stop people from taking screen shots. It also does not stop people from thinking you’re a self-important photographer with a thing for little dogs. So be it.

This technique just makes sure that, if someone grabs your image and puts it on another site, the viewers will know who owns it. They’ll also know the person who posted it is a jerk who doesn’t respect artists’ copyrights. Downside? It adds a little weight to the image (52k to 64k in this case), makes writing the code slightly more complicated, and won’t work in some older browsers. But that’s all solvable stuff. (Bonus points to the savvy coder who whips up a WordPress plugin to add photos this way!)

Most importantly, this allows photographers to add human-readable copyright messages to their work that stays with the photo but doesn’t get in the way of the vast majority of viewers who just want to enjoy the photo for a moment, and then go on with their day.

It’s enough to make the two sides of my brain stop fighting for a moment.

Check out the update. →

32 Comments

That’s freaking genius.

Halcyon on 12 January 2008 @ 12am

It’s a great idea and I think I would adopt it. The only problem I see with this solution is that in Google Reader the image with the DIV does not show up, I only see a black line.

Kenneth Verburg on 12 January 2008 @ 12am

True, that. This technique may (may!) also result in photos not being properly indexed by image search engines. (Of course, some may consider this another side benefit.)

Derek Powazek on 12 January 2008 @ 1am

Interesting idea. I like how it keeps that information intact but keeps it out of the way, so double bonus. I personally can’t stand watermarks, so this is a pretty cool solution to bypass that. I know a lot of people to will go to all ends to disable viewing source, hiding the image, overlaying it with something else, result to using flash, but if someone wants to steal it bad enough, they are going to, it’s the downside of the web. But having that information attached is a good start and I feel that doing anymore is just ruining the viewers experience.

Will on 12 January 2008 @ 3am

That’s a fancy solution. And nice photo btw.

But this is a loss cause, you can’t stop people from using your images if you want to show them to the world. No-one cans.

That’s the good and the bad of the web.

You should take advantage of it instead of trying to prevent it. It’s obvious that you need to inform people about copyright restritions but using hiding css techniques you are only doing harm to yourself. Like with the reader example given in another comment.

Nuno on 12 January 2008 @ 4am

you are so smart.

heather on 12 January 2008 @ 4am

ah-ha! What a clever idea. I need to give this a try.

Lorissa on 12 January 2008 @ 4am

Well, as clever as it might seem, I disagree with setting it up as a background-image. You have to be a total control freak (and I mean no disrespect here, I’ve been one) to do that.

What I’d like to suggest is to put a normal img tag and embrace it by div with specified height + overflow: hidden

If you’d like, here’s my approach and another one. It’s quite old, I have to say.

Riddle on 12 January 2008 @ 6am

As the Google Reader comment above hinted at, this technique somewhat reduces the accessibility of your content. In technical terms, browsers (or user agents) may display a background image differently to an actual img tag. The reasons for this are numerous: it’s a wacky mobile browser, text-based browser, audio-based browser, search engine robot, etc.

While this will better guard you against evil-doers, you will be inconveniencing that small slice of the population out there and you will make it harder for search engines to find your work.

Jack on 12 January 2008 @ 6am

Very clever. Two problems I can see:

This doesn’t seem to degrade that gracefully on non-CSS browsers. Besides BeOS weirdos, I imagine that low-end mobile browsers will have trouble as well.

Oddly, the iPhone browser doesn’t like this. I don’t have a second cameraphone handy at the moment to snap a picture, but clearly there’s currently a bug in MobileSafari that causes the clipped background image to spill out over the text. There’s also some smearing of the left-hand column of pixels of the image out of its bounds and over to the left edge of the viewport. Yuck.

I suspect that <div style=”height:XX; width:XX; overflow: hidden;”><img src=”…” /></div> would address both of these issues.

Dan on 12 January 2008 @ 8am

Oops, those two list items (”This…” and “Oddly…”) were supposed to be numbered. Oh, well.

I whipped up a quick comparison of background-image vs. div-and-image versions of this technique. Indeed, the hidden-overflow div works as expected in MobileSafari.

Dan on 12 January 2008 @ 8am

To wit: a comparison of background-image vs. div-then-image. (The latter works as expected in MobileSafari.)

Dan on 12 January 2008 @ 8am

Dan - Rock! That helped immensely. Thanks!

Derek Powazek on 12 January 2008 @ 8am

brilliant!

ro on 12 January 2008 @ 10am

Thanks for this tip. It’s great. I purposely don’t put my best photos online because I don’t want them ripped off. Now I feel that I can.

And not being indexed by Google is fine with me. People searching for images using Google are the kinds of people who are most likely to rip off an image anyway.

Maria on 12 January 2008 @ 3pm

Thanks. You’re always a step ahead.

David on 12 January 2008 @ 3pm

I’ve been thinking about copyright and these sorts of protections quite a bit in the last few months.. and I’ve kinda come to the conclusion that unless I can see great potential commercial benefit in something, I’m just going to release my stuff into the public domain instead. I might lose out in a few short term ways, but the long term benefits are potentially greater. I know this doesn’t suit everyone, but the more people start thinking about public domain, the better. Unfortunately, Flickr doesn’t even have the option :(

Peter Cooper on 12 January 2008 @ 4pm

I stumbled across your blog and was fortunate to see your latest entry. How helpful! Thank you so much - it is so irritating and rude when other people steal your photos and I’ll be sure to use the technique you have mentioned in your entry.

Thanks again, and have a good day.

El on 12 January 2008 @ 4pm

HTML for content, CSS for layout and decoration. This breaks the web just like font tags, tables, and blank GIFs broke the web several years ago.

What bothers me most is how much this is like DRM. It does a disservice to legitimate users and doesn’t stop the real jackasses from being, well, jackasses.

If you’re taking photos simply because you love taking photos, than none of this should matter.

Foofy on 12 January 2008 @ 5pm

Seeing as everything is (C) its creator, why do this? If anyone wants to copy your image without your consent, they’ll do it anyway - especially as you just made it easier for them. If you want to ensure that people know who owns the copyright without altering the image, put that information in the longdesc.

Rik Hemsley on 13 January 2008 @ 2am

It’s definitely an innovative approach, but as a Google Reader user I won’t like it.

If it’s possible, couldn’t you change it so that inside your RSS feed the full image is displayed without the CSS trickery? You can leave the large copyright notice, if that is important to you.

Roel on 13 January 2008 @ 3am

I kind of love this approach, despite being a free-culture howler monkey myself :)

It doesn’t deface the image subject, and anyone committing premeditated infringement would have to willfully crop the image. This kind of low-tech barrier is probably enough to prevent most infringement.

At the very least, it removes “but I didn’t know!” as an excuse.

scottandrew on 13 January 2008 @ 2pm

About disabling the Save-as right click menu, is that really a good thing? I mean, are you also trying to prevent individuals who love your work to use your image on their desktops for personal use, because they love your image? Do you think they should pay to use one of your images as a wallpaper as well?

I’m not a photographer, I’m just a web geek and a programmer. I understand that you want to prevent people reusing your image without attribution or even paying. But does that also apply to personal use? If so, I would probably classify as a thief by your definition.

Wim on 14 January 2008 @ 12am

Interesting solution. I go back and forth with the issue as well. Right now, I’ve settled for putting a rather faint watermark on the larger versions of my images. I make the text small and readable, but place it out of the way in the photo. Then I set the transparency to about 30%.

I know that it isn’t going to deter infringement, but I figure if it gets posted somewhere unaltered then at least a viewer knows where it came from. If I start to feel it is distracting, then I’ll stop using it.

Ben on 14 January 2008 @ 7am

I went with the second approach, sort of. Instead of extending the border around the copyright notice part of the image I leave the border white. That matches my blog’s white background and so viewers of my blog hardly notice my name and URL at the end of each image.
Check out yesterday’s cat picture as an example.

I must say, I hadn’t thought of hiding the copyright notice with css. Bravo!

Donncha O Caoimh on 14 January 2008 @ 9am

It is a fabulous idea to hide the copyright like that with CSS, and I might just have to try it with some of my photos.

I will admit - the reason for my watermark on my photos isn’t so much to stop the people that will steal them - I know they will. I do instead to brand my work - as a wedding photographer, I know that brides-to-be go around scooping up photos for ideas. I want a pretty logo to be right their in front of them so they remember who took the photo and hopefully find me to hire me.

I may have to implement the other idea though on my personal site, where the photos are more personal in nature.

Christine on 14 January 2008 @ 12pm

Well, Firefox has a ‘View background image’ option so it’s almost no difference between that and ‘Save as..’.
Anyway, I don’t consider a small copyright on the photo itself to be ugly.

Victoria on 15 January 2008 @ 3am

Since most browsers have their “Don’t waste my ink with background images” options switched on (it is the default), this effectively puts a blank hole in any print outs people do.

David Dorward on 15 January 2008 @ 6am

File > Save as… > HTML with images :P

WWW golden rule: If you can see it, you can copy it. We better get use to it.

Now, for cuteness sake, how about a :hover rule to show the copyright/ad information when the mouse pointer goes over the image? :P

Yann on 15 January 2008 @ 7am

Photographer, web geek, and genius you are.

DC on 15 January 2008 @ 11am

I absolutly LOVE this idea!
Simple, clean, and really not that much more work.
True anyone can take a screenshot, but really that’s not the point, the point is that you want the copywright available so that the end downloader knows that it IS copywrighted and let them make there own conclusion as to what is going to happen (well at least that’s my take as you did say it’s never perfect) but really I LOVE this! I’ll probably still let them download the file with a rightclick but hiding the copywright, sheer genius! Really I envy your brain!

ORI0N on 16 January 2008 @ 10pm

Check out the update. →

Derek Powazek on 23 January 2008 @ 11pm

Comments for this post are now closed.