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

An Update to a Savvy Approach to Copyright Messaging

In my original post, I suggested adding a copyright message to a photo and use CSS to crop its view. This accomplishes the goal of adding robust copyright information without defacing your own work. I got a lot of responses to this idea, and wanted to update the post with a few responses to the most frequent questions.

1. It’s not semantic!
True. Neither am I. I once slung spacer gifs with the best of them, too. Good thing Heather likes the bad boys.

2. This won’t stop people from cropping it out.
True. Bad actors will always be bad actors. But that’s not the problem I’m trying to solve. The problem I’m trying to solve is how to add visual copyright information to a photo (which photographers want) without cluttering the display on the page (which I want). This is a simple way to do that.

3. Images don’t appear in my feed reader / mobile browser / printout.
True. Thankfully, there are smarter geeks than I. Commenter Dan Sandler posted an iteration of my technique (dubbed “PIFT” which is fantastic, especially when said out loud like “pfft!”) which puts the photo in a good ol’ IMG tag inside a DIV that crops it. Like so:

Chihuahua by Derek Powazek

Code:

<div style=”height:123px; width:234px; border:1px solid #000; overflow:hidden”><img src=”image-url” title=”Title goes here.” alt=”Alt goes here.” /></div>

This way, the photo is available in all browsers, and we just use the DIV to crop its display. If a browser doesn’t support that CSS (because it was released when dinosaurs roamed the Earth), then the copyright just shows. Smart. Thanks, Dan!

4. This isn’t new!
I never said it was. For web dev folks, of course this is not a revelatory idea. CSS 1.0 could do this last decade. But many online photographers probably didn’t know about it. I just wanted to suggest a technique they might employ before the next copyright freakout.

5. No, sir. I don’t like it.
Then don’t do it. It’s a big web. There’s room for all of us.

13 Comments

Both methods are very neat. I’m working on a website for a couple of photographer friends and you’ve given me some neat ideas.

Simon Proctor on 24 January 2008 @ 2am

This way it’s perfect. Thanks a lot! I hope people will start using it, makes asking for permission a lot easier.

LudoA on 24 January 2008 @ 3am

I came up with another method, the copyright notice is text so can be read by searchengine, screen readers, etc.
And it allows you to add links into it as well.

The message itself is not displayed until the user mouses-over the image. True the notice is no longer part of the image..but as you mentioned that is easily cropped off anyway (or you could use both methods together if you wished)

I’ve uploaded the files to http://3makestuff.com/misc/hidden-c.zip

Feel free to republish it on your blog. Of course a link back to 3makestuff.com & a credit would be appreciated if you decide to publish it :)

Tested in FF2, Opera9, Safari Beta 3 and IE6 on XP (requires a little bit of javascript as IE6 doesn’t support :hover on anything but an ‘a’ tag, however this could be wrapped in conditional comments if you wished)

Aaron Bassett on 24 January 2008 @ 5am

Ahh, this is an awesome compromise. It’s not new tech but it’s definitely good to spread the word and hopefully raise awareness of copyrights when it comes to images.

Jack on 24 January 2008 @ 6am

I’ve always admired the way you deal with ‘constructive’ criticism.

Rachel on 24 January 2008 @ 7am

Hmm not to poop on any parades…. but in Bloglines the part where you say “Code: ” and show us the code to use, that overlaps the copyright portion of the photo.

Jen on 24 January 2008 @ 9am

Hmm. For some reason Google Reader stripped out the height: 330px; from the div style. Left everything else intact.

Pete Ashton on 24 January 2008 @ 5pm

Ooohhh, great.

ALL I wanted was to find some way of getting you to share the printer, design artist and others who worked on the gorgeous new Fray book, and you have to go and post all these great articles!

Make it stop!!…I HAVE TO GET SOME WORK DONE!

No, I’ve changed my mind: don’t. Work is overrated.

Danke!

R. Mullen on 25 January 2008 @ 12am

You could write a little PHP script to add that to the bottom of any graphics, and then use mod_rewrite to make sure any images that match the following URL always have that notice on the bottom.

Noel Jackson on 25 January 2008 @ 6am

BTW Derek, after you switched up your blog a little I lost you on my RSS feed - it’s taken me this long to finally add it again.

I really love what you did with the Fray site, I can’t wait to get a copy of the mag!

Noel Jackson on 25 January 2008 @ 6am

Genius! I’ve been using the DIV technique for ages but I never thought of adding a cropped copyright footer.

Creative Commons exert :)

Justin Bull on 19 February 2008 @ 8pm

I like how when you drag the image away the translucent thumbnail (in Safari at least) shows the copyright. Subtle but un-missable.

eduo on 21 February 2008 @ 3pm

Whoa, neat. I can see how this would be useful for webcomics, too!

rstevens on 21 February 2008 @ 4pm

Comments for this post are now closed.