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

Please note that this post is from 2010. Evaluate with care and in light of later events.

I’ve found that pictures shared under a Creative Commons (CC) license (of all flavors) are a great resource for bloggers who want artwork to accompany their posts. I’ve also realized that not everyone, myself included, has always done an adequate job of meeting the attribution requirements of CC licenses.

I don’t believe there are any bad intentions at work, but I do think it’s not always clear to people what their obligations are when using Creative Commons licensed images in their blog. (My focus is on the attribution aspect of the licenses, not those pertaining to commercial use, sharing, etc. I am also relying on version 3.0 of the license, but this discussion should be applicable to all the versions.)

So how can we do better?

We can do better by making sure the images we use are properly licensed. For Creative Commons licensed images, this means putting in proper attribution that meets the standards of the license. I plan to do this going forward, and I also plan to spend time going back over images in my old posts to make sure they meet licensing requirements as well.

The Key Provisions in the Creative Commons Licenses

There are two key provisions of all the Creative Commons licenses that are critical for proper use of images in a blog. First, section 4(a) requires that a copy of the license or a link to the license be included with the work. Second, section 4(b) requires that you provide the name of the owner (or who they designate), the title of the image, and a link to the work (but make sure you don’t suggest they are endorsing you).

So What Does this Mean for Bloggers?

As a blogger you should provide the following information along with the image you are using in your article:

• the name (or screen name) of the creator (or who they designate);
• the title of the image, if there is one;
• the specific Creative Commons license and version under which the image is licensed;
• alternatively, if the creator of the work requests you attribute it in a specific way, you should do as they ask.

Ideally, you should link as many of these items to either the original source, or to their canonical location online. While section 4(b) implies that you must provide the URI of the CC license, in practical terms naming the license should be enough (the Creative Commons FAQ says, “it is nice if the license citation links to the license on the CC website”). This is, I think, especially true if you link to the location where the image originates and where the original copyright and license terms are explained (for example, linking to the Flickr page for a CC licensed photo stored on Flickr — actually, this is mandatory for Flickr images if the image is hosted by Flickr).

In practical terms, I think the following example is the kind of attribution that is appropriate 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 citation includes (1) the title of the picture, (2) where it comes from, (3) who created it, and (4) what license applies.

Captions with WordPress

In WordPress, you can put this information in as a caption in the popup image add/modify box.

Because the WordPress caption is styled with CSS (via the “wp-caption” class that WordPress puts in), you may make it appear in a variety of creative ways. You can even “filter” the code produced 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 similar to the following (courtesy of the W3C site):

[sourcecode 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:

[sourcecode language=”css”]
div.figure {
float: right;
width: 25%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
[/sourcecode]

(For more about this, including additional discussion and examples, see Figures & Captions at the W3C site.)

Rollover Image Captions with jQuery

Another approach would be to use jQuery and a plugin such as jCaption or Captify, which will automatically generate sophisticated rollover captions. These look very nice and keep your site design clean, while providing all the required information.

Using the Title Attribute of the Image Tag

If you choose, you may instead put all the information into the title attribute of the <img> tag, along with linking the image to the source page, like this:

[sourcecode 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 benefit of making the information fully available (although you cannot insert links, so make sure the image itself links to the source page). It also keeps your page design uncluttered. It doesn’t look as nice as the rollover approach, but it is simple to implement on any site.

Use Zemanta

Zemanta allows you to easily select and insert images into your posts (along with related links and more). It takes care of adding appropriate captions and links so you don’t have to. It’s image selection is good, but I like to pick my own images generally, and to style them my way. Nonetheless, it’s an excellent tool that I recommend highly.

Or Just Put it at the End

Finally, you could also add a simple attributional note to the bottom of your posts. This is a straightforward and easy approach, allows complete information and full links.

Conclusions

Creative Commons licensed images are a wonderful resource for bloggers. Use of such images is free and easy — provided you follow a few requirements that primarily serve to acknowledge the creator 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 everything is in order. And remember, whether you use CC licensed images, pay for stock photos, use your own, or rely on the public domain, photographers and authors will always like to hear from you if you like their work, so let them know.

So just remember to check to make sure the images you want to use are licensed properly, and that you’re meeting the terms of the license, and enjoy!

More Resources

• Five sources of free images for your blog
• How do I properly attribute a Creative Commons licensed work? – from Creative Commons
• Best Practices for Creative Commons attributions – how to attribute works you reuse under a Creative Commons license
• Creative Commons Search – easily find CC licensed images