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

“Agatha on the porch” by Flickr user Kristopher Nelson, used under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 license.

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

Share this post

Share to Facebook Share to Twitter
Stumble It Share to Delicious
Share to Google More...

Subscribe

Subscribe via RSS Subscribe via RSS

4 Responses to “How to write attributions for the Creative Commons licensed images you use on your blog”

  1. sefcug says:

    Excellent explanation of how to comply with Creative Commons Licensing attribution of images for Blogs.

    I wonder if you could also make some suggestions regarding the same issue for print, as I edit two computer user group newsletters, and always want to be attributing work properly.

    I suppose using your "Or Just Put it at the End" advise would probably be the easiest.

    Steve Costello
    Computer user groups keep users informed, join one and become an active participant.
    http://card.ly/sefcug
    My recent post Priorities

    • Yes, it seems like putting it in a credits-style box at the end might be the best. I would recommend using captions to the images to attribute the work to a person's name, and then connect the name to the correct license at the end of the newsletter. You could also add the information in a box or a section that has editor-identifying information, often on the second or inside page of a magazine or newsletter.

      However you do it exactly, the main point is to connect the specific image with the person who made it or owns it and the license it's being used under.

  2. Accessior says:

    RT @creativecommons: Great explanation of how to properly attribute CC-licensed images: http://bit.ly/73ZnEq
    This comment was originally posted on Twitter

  3. 2moroDocs says:

    RT @creativecommons: Great explanation of how to properly attribute CC-licensed images: http://bit.ly/73ZnEq
    This comment was originally posted on Twitter

Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer & Privacy

This is not legal advice. I am not your attorney. I am not licensed to practice in your jurisdiction. I am not soliciting your business. Please see our Privacy Policy.

Copyright

© 2005-2010 by Kristopher Nelson. Want to republish? Get permission. Want to quote? That's fair use.

Site Sponsors

© 2005-2010 by Kristopher Nelson. Want to republish? Get permission. Want to quote? That's fair use. Suffusion WordPress theme by Sayontan Sinha