How can I host blog images on flickr?

The old saw that a picture being worth a thousand words holds just as true with blog entries as it does with books and presentations to bored colleagues, so it's a smart addition you'll be making to your weblog. But actually including the images can be a bit tricky because, as you note, they need to live somewhere on a server somewhere on the Internet.

Fortunately you can get a free account at the Yahoo-owned Flickr photo archive service and use it for just this purpose. Here's how...

First, pop over to the site and sign up for an account. You'll have to enter a valid email address since it sends you a confirm message to prove you're who you say that you are. Once that's done you can log in to your account where you'll see a big link that says Upload Photos. Click on that.

Now you'll be able to specify each of the photos you want to upload by clicking on the "browse" button next to each of the six slots shown on the page:

Click to see a full size image

You can see in this figure above that I've already specified an image to upload for the first slot. Since that's the only image I want to upload, I'm ready to click on the UPLOAD button on the bottom. Notice, however, that I have specified "public" for the permission to this file. I could specify something else, but it then wouldn't work for including the file in my weblog entry itself.

Next, you'll be prompted to enter a description and some key words:

Click to see a full size image

Since we're not going to be pointing people to the Flickr image browser but just hosting the image on the Flickr service, it doesn't matter if you enter anything here or not. I usually skip all of this information completely and just move along by clicking SAVE on this screen.

Almost done.

Now that you have the new image on the Flickr service, the next step is to figure out its Web address or "URL". That can be done by viewing the image in Flickr, as shown below, and clicking on the "All Sizes" button, where the cursor in the below image is pointing:

Click on the "All Sizes" button and, finally, you'll be shown the official URL of the image, suitable for cutting and pasting directly into your weblog entry:

Click to see a full size image

In this case, the URL shown is http://static.flickr.com/26/59260931_afef08ff5_o.jpg.

To reference that in your blog entry, you'll need to either use an "add image" feature if your blog editor has it (many do), or simply type in the following HTML:

In this specific instance, it'd look like this:

Once you have that mastered, it turns out that there are a lot of ways you can tweak the placement of images within text on a Web page, including adding vertical and horizontal space, changing the alignment of the material around the image and so on. That's beyond the scope of this answer, but you might find it helpful to check out my book Creating Cool Web Sites, which will give you all the information you need to get everything "just so."

I hope this tutorial has been helpful!