Attribute, Link and Self-Host: The Essentials of Image Posting

With the ubiquitous digital camera has come a meteoric rise in the number of images available on the Internet. You can find pictures of anything on the Web now, much of it published with no copyright reservation or restriction. So it's all up for grabs, right?

WRONG!

I won't belabor the obvious by telling you it's never right to simply take a copyrighted or copy-restricted image for your own post. You already know that. But for all those other images. there are two additional issues involved in using them responsibly: hotlinking and attribution.

At the bottom of this article, you'll find some HTML code ready to cut-and-paste into your posts, to make responsible image posting a little easier.

HOTLINKING (or inline linking) is the practice of leaving the image file at the owner's site where you found it, but having it viewable in your own post. The problem with a hotlinked image is this: each view of the image on your site entails the use of bandwidth from the original hosting site—bandwidth theft is the term that has been coined for it.

Theft may be too strong a word for this bandwidth demand, since each site has the option to deny such links. (Blogger-hosted websites limit inline views to a few occurances; this is why hotlinked images from a "blogspot" will disappear from your post after a few minutes.) But when the owner of an image feels you're out of line with your hotlink, there is a simple revenge available—the image can be swapped to something that will embarrass the hotlinker. I've seen egregiously hotlinked items replaced on the original site with everything from a lewd photo to a "note to the bandwidth thief."

Image courtesy DrPat at Paper Frigate

The solution is to host your own copy of the image. Self-hosting images avoids any accusation of bandwidth theft—and there are lots of sites that make this easy and free. TinyPic, Kodak Ofoto and flickr are popular services. I myself use ImageShack, because it offers a Firefox extension that allows me to point to an image and upload it to my hosting account with a right-click.

Most image-hosting services show or give you the URL for your image. For my signature Jupiter Red Spot, for example, the URL is

http://img313.imageshack.us/img313/9119/buyjupitersm9cf.jpg

Click to expand image

ImageShack recommends thumbnails be used instead of the full-sized image, and they will automatically produce one for images above a certain size and resolution. The great advantage to you of using these thumbnails is that you don't have to edit your image to reduce its size. If you're using MicroSoft Paint, the image editor bundled with Windows, this can be a serious advantage.

The downside? ImageShack sells advertising (just as BlogCritics does), and some of those ads open ClickAd windows. If you have your browser or adware manager set to deny or automatically close ClickAds, you won't even see them—but readers who click on your thumbnails will.

Once you have your image host account set up, it's time to embed some images into a post. For your own photos and other digital creations, you don't need to include an attribution and a link to your own site. But we're all interested in increasing traffic to our own sites, and that's why attribution is a courteous and professional thing to provide for images you use—even your own.

ATTRIBUTION on the Web is a two-part practice. My first image above has a "courtesy" attribution to let the reader know who granted permission to use the image: Image courtesy DrPat at Paper Frigate. Alternate credits might name the photographer, when you know the name (Photo by Bruce Means), or credit the site owner (Photo from NASA GRIN). This is a standard photo attribution, much as you would see in a magazine or newspaper.

LINKING (or hyperlinking) to the original site is the second step in responsible use of someone else's images. Unlike hotlinking, an external link opens the page to which you have linked your image, letting the reader visit the original site and view the context in which the owner placed the image.

Image courtesy Art Lover of Math Moiré

Because it boosts visits to image-owners' sites as well, few bloggers and Web publishers object to the use of their published, non-copyrighted images when you link the image to their site. (It's always a good idea to ask first—a simple eMail will remove all doubt whether the image owner will allow you to use it if you link it to their site.)

This photo of an acrylic painting by Ben Cummings, hosted on the Math-Moiré blog, is linked to the website where I found it. In this case, I had already requested and received the owner's permission to use the photo, so I gave Art a "courtesy of" attribution.

Are there public-domain photos and other images on the Web that you won't need to ask permission to use? Sure. Google "free photo"—the top choice is FreeFoto.com, which has fairly liberal rules for hotlinked use of their extensive gallery of images. The sunset-limned tree picture centered below was supplied by FreeFoto.com.


Photo by Ian Britton (c) FreeFoto.com

HTML CODE for images is below. To use it, highlight the code, copy it and paste it into your post text (I put it at the end of a paragraph so it will align with the following paragraph), then make the following substitutions:

• Replace LinkURL with the URL of the source site*.
• Replace NNN with the desired width. (I use 240 to 300.)
• Replace imgURL with the URL for the image on your own host.
• Replace ALTtext with a brief description of the image, for those who can't or don't load images.
• Replace Caption with the caption you desire. Don't include any quote marks or returns in the caption.

*For thumbnail images, this must be the host site, not the original site, to allow viewers to click to expand the image. The Caption for a thumbnail should be "Click to expand image" or "Click for larger view"

Right-aligned images with the text wrapped around them (like the Red Spot above) can be added to your post with the following code.

<p style="float: right;"><a href="LinkURL/" target="_blank"><img width=NNN src="imgURL" alt="ALTtext" border="0" hspace="10" vspace="3"/></a><br><i><small><center>Caption</center></small></i></p>

For left-aligned images with the text wrapped around them (like the Red Spot thumbnail) use the following code.

<p style="float: left;"><a href="LinkURL/" target="_blank"><img width=NNN src="imgURL" alt="ALTtext" border="0" hspace="10" vspace="3"/></a><br><i><small><center>Caption</center></small></i></p>

Centered images with white space right and left of the image are the easiest of all. Many image-hosting services will give you code to do this minus the centering tags, link to original site, and the image size. You could simply cut-and-paste. But centering formats the image in a pleasing way, and the code below also lets you include attribution information.

<center><a href="LinkURL" target="_blank"><img width=NNN src="imgURL" border="0" alt="altTEXT" hspace=10 vspace=3 /><br><small><em>Caption</em></small></a></center>

Courteous, professional image posting requires just a bit more effort. Apply the Golden Rule, and realize that, just as you would want your own creative writing efforts respected, the simple steps outlined above will extend that respect to photographers and those who create graphic images.

1592001149,0595290558,0972077537,0195055411,0679778063


Please join us at BlogCritics to comment on this review.