How to write attributions for the Creative Commons licensed images you use on your blog

I’ve found that pic­tures shared under a Creative Commons (CC) license (of all fla­vors) are a great resource for blog­gers who want art­work to accom­pany their posts. I’ve also real­ized that not every­one, myself included, has always done an ade­quate job of meet­ing the attri­bu­tion require­ments of CC licenses.

I don’t believe there are any bad inten­tions at work, but I do think it’s not always clear to peo­ple what their oblig­a­tions are when using Creative Commons licensed images in their blog. (My focus is on the attri­bu­tion aspect of the licenses, not those per­tain­ing to com­mer­cial use, shar­ing, etc. I am also rely­ing on ver­sion 3.0 of the license, but this dis­cus­sion should be applic­a­ble to all the versions.)

So how can we do better?

We can do bet­ter by mak­ing sure the images we use are prop­erly licensed. For Creative Commons licensed images, this means putting in proper attri­bu­tion that meets the stan­dards of the license. I plan to do this going for­ward, and I also plan to spend time going back over images in my old posts to make sure they meet licens­ing require­ments as well.

The Key Provisions in the Creative Commons Licenses

There are two key pro­vi­sions of all the Creative Commons licenses that are crit­i­cal for proper use of images in a blog. First, sec­tion 4(a) requires that a copy of the license or a link to the license be included with the work. Second, sec­tion 4(b) requires that you pro­vide the name of the owner (or who they des­ig­nate), the title of the image, and a link to the work (but make sure you don’t sug­gest they are endors­ing you).

So What Does this Mean for Bloggers?

As a blog­ger you should pro­vide the fol­low­ing infor­ma­tion along with the image you are using in your article:

• the name (or screen name) of the cre­ator (or who they designate);
• the title of the image, if there is one;
• the spe­cific Creative Commons license and ver­sion under which the image is licensed;
• alter­na­tively, if the cre­ator of the work requests you attribute it in a spe­cific way, you should do as they ask.

Ideally, you should link as many of these items to either the orig­i­nal source, or to their canon­i­cal loca­tion online. While sec­tion 4(b) implies that you must pro­vide the URI of the CC license, in prac­ti­cal terms nam­ing the license should be enough (the Creative Commons FAQ says, “it is nice if the license cita­tion links to the license on the CC web­site”). This is, I think, espe­cially true if you link to the loca­tion where the image orig­i­nates and where the orig­i­nal copy­right and license terms are explained (for exam­ple, link­ing to the Flickr page for a CC licensed photo stored on Flickr — actu­ally, this is manda­tory for Flickr images if the image is hosted by Flickr).

In prac­ti­cal terms, I think the fol­low­ing exam­ple is the kind of attri­bu­tion that is appro­pri­ate under the license:  “Agatha on the porch” by Flickr user Kristopher Nelson, used under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 license. This cita­tion includes (1) the title of the pic­ture, (2) where it comes from, (3) who cre­ated it, and (4) what license applies.

Captions with WordPress

In WordPress, you can put this infor­ma­tion in as a cap­tion in the popup image add/modify box.

Because the WordPress cap­tion is styled with CSS (via the “wp-caption” class that WordPress puts in), you may make it appear in a vari­ety of cre­ative ways. You can even “fil­ter” the code pro­duced by WordPress if you want the HTML to appear differently.

Captions with HTML & CSS

If you do not use WordPress, you could use HTML and CSS sim­i­lar to the fol­low­ing (cour­tesy of the W3C site):

[source­code language=“html”]
<div class=“figure”>
<p><img src=“eiffel.jpg” width=“136” height=“200” alt=“Eiffel tower”></p>
<p>Scale model of the Eiffel tower in Parc Mini-France</p>
</div>
[/sourcecode]

And some CSS:

[source­code language=“css”]
div.figure {
float: right;
width: 25%;
bor­der: thin sil­ver solid;
mar­gin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: cen­ter;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
[/sourcecode]

(For more about this, includ­ing addi­tional dis­cus­sion and exam­ples, see Figures & Captions at the W3C site.)

Rollover Image Captions with jQuery

Another approach would be to use jQuery and a plu­gin such as jCap­tion or Captify, which will auto­mat­i­cally gen­er­ate sophis­ti­cated rollover cap­tions. These look very nice and keep your site design clean, while pro­vid­ing all the required information.

Using the Title Attribute of the Image Tag

If you choose, you may instead put all the infor­ma­tion into the title attribute of the <img> tag, along with link­ing the image to the source page, like this:

[source­code lang=“html”]
<a href=“http://www.flickr.com/photos/krisnelson/4213915751/”><img title=”&quot;Agatha on the porch&quot; by Flickr user Kristopher Nelson, used under a Attribution-Noncommercial-Share Alike 2.0 license.” src=“http://farm3.static.flickr.com/2677/4213915751_050a74b704_s.jpg” /></a>
[/sourcecode]

Like jQuery-based approaches, this has the ben­e­fit of mak­ing the infor­ma­tion fully avail­able (although you can­not insert links, so make sure the image itself links to the source page). It also keeps your page design unclut­tered. It doesn’t look as nice as the rollover approach, but it is sim­ple to imple­ment on any site.

Use Zemanta

Zemanta allows you to eas­ily select and insert images into your posts (along with related links and more). It takes care of adding appro­pri­ate cap­tions and links so you don’t have to. It’s image selec­tion is good, but I like to pick my own images gen­er­ally, and to style them my way. Nonetheless, it’s an excel­lent tool that I rec­om­mend highly.

Or Just Put it at the End

Finally, you could also add a sim­ple attri­bu­tional note to the bot­tom of your posts. This is a straight­for­ward and easy approach, allows com­plete infor­ma­tion and full links.

Conclusions

Creative Commons licensed images are a won­der­ful resource for blog­gers. Use of such images is free and easy — pro­vided you fol­low a few require­ments that pri­mar­ily serve to acknowl­edge the cre­ator of the work. If you, like me, didn’t always do the best job of this, take some time to go back over your posts and make sure every­thing is in order. And remem­ber, whether you use CC licensed images, pay for stock pho­tos, use your own, or rely on the pub­lic domain, pho­tog­ra­phers and authors will always like to hear from you if you like their work, so let them know.

So just remem­ber to check to make sure the images you want to use are licensed prop­erly, and that you’re meet­ing the terms of the license, and enjoy!

More Resources

• Five sources of free images for your blog
• How do I prop­erly attribute a Creative Commons licensed work? — from Creative Commons
• Best Practices for Creative Commons attri­bu­tions — how to attribute works you reuse under a Creative Commons license
• Creative Commons Search — eas­ily find CC licensed images