• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. A Blogger’s Guide to Simple HTML > Displaying Images in Your Posts

Displaying Images in Your Posts

Finding just the right words to describe something succinctly is part of the joy of blogging, but sometimes you just need the power of a thousand words in one pixel-powered punch. One of the questions most frequently asked by new bloggers is, “How do I include an image in my post?” or something along those lines.

When you’re blogging with images, you first have to realize that the image must already be uploaded to the web to be displayed in your blog post. Then, the site that’s hosting the image needs to allow offsite linking of images. Many ISPs will give you web space with your Internet service. Check to see whether yours also allows offsite linking. If you’d rather not even think about FTP, you should choose a blog provider that helps you find and upload images from your hard drive.

Okay, so let’s say the image is already on the web, and you just want to display it in your blog’s post. Sheesh, that’s why you’re reading this in the first place. I’ll cut to the chase. Here’s how you include an image in your post:

Type the <IMG> tag.

After a space, type the src attribute.

Enter the exact location of the image inside quotation marks.

Close the tag.

Listing 4.3 shows what the HTML code would look like if you wanted to put a picture of me in your post.

Listing 4.3. Including an Image of Biz

<img src="http://www.bizstone.com/bizpic.gif"> 

Note that the img src tag is one of the tags that does not need to be closed. If you prefer to have the image aligned to the right, left, or center of your weblog post, you can do that using align=?, as you see in Listing 4.4.

Listing 4.4. Aligning the Image

<img src="http://www.bizstone.comx/bizpic.gif" align=right> 

Hey, nobody said this was gonna be pretty (see Figure 4.1).

Figure 4.1. Align and resize images so that they enhance the post rather than dominate the screen.

Setting the Image Width and Height

You can adjust the width and height of an image visually so it will fit nicely into your post by adding height and width attributes that are smaller than the original image dimensions (see Listing 4.5).

Listing 4.5. Adding Height and Width Attributes

<img src="http://www.bizstone.com/bizpic.gif" height=61 width=90 

Note that this does not change the file size or download time. Also, if you do not choose pixel sizes proportionate to the original image, you run the risk of distorting the graphic.

Better Loading Pages

Including the exact pixel dimensions can be a good practice to get into because the browser will know how much space to give the picture even before it loads. This eliminates that awkward text re-flow that sometimes occurs when an image materializes.

Using an alt Tag on Images

Include an alt tag for people who have images disabled in their browser preferences. Type alt=”A picture of Biz,” and your readers will at least have the benefit of descriptive text when the image doesn’t appear.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint