How do I add spacing to images in my RSS feed?

I read almost 200 different RSS feeds every day with NewsGator Online and know exactly what you mean. Even the best, biggest sites have similar problems because either they don't remember that RSS feeds are read in other programs or because they don't know enough CSS or HTML to tweak the layout.

For example, here's a nice example of how the otherwise splendid GigaOm blog has spacing problems with its RSS feed:

Clearly it would be more attractive if there were just a few additional pixels of blank space around the edge of the image, and that's easily accomplished either in HTML or, better, using Cascading Style Sheets.

You include an image in your blog posting through a tag like this:

I strongly -- strongly -- recommend that you always specify alt text too, ideally describing exactly what the image is about. This helps both with people who can't or don't want to load images (think "ADA Compliant") and it also helps with search engine ranking too. My image above, for example, includes the following: alt="GigaOm RSS Image Spacing Problems".

If you want to have the text wrap around the graphic, you're probably also adding align="right" or align="left" depending on your desired layout and appearance. Add these two in, and your image inclusion's a bit more complex:

That's a typical way to get a graphic on the page and, if it's in the part of your blog entry that's included in your RSS feed, in the RSS feed too. But what if you want to add a bit of spacing?

There are two ways to add spacing to an image. Within the world of HTML, you can add horizontal and/or vertical spacing with the hspace and vspace attributes, respectively. The unit of measure is pixels and the value is applied to both sides, so specifying hspace="8" will add 8 pixels of blank space on both the left and right of the image.

The more sophisticated solution is to use CSS, however, because you have greater control. If you want to have that 8 pixels of space around all four sides, for example, use margin:8px;, but if you really only want the right and bottom edges to have the extra spacing, you can do that with margin-right: 8px; margin-bottom: 8px;. Note carefully my use of colons and semicolons.

Dropping CSS into an HTML tag is done with the style attribute, so here's our completed example image that includes an additional 8 pixels of space around it:

You can do that, right? :-)

What about missing images?

the other problem, and one that I see in RSS feeds with alarming frequency, is that the image is completely missing when the feed is viewed. Sometimes this is just a transient server problem, but mostly it's due to a lack of specifying a fully qualified URL.

Your blog articles can include partial URLs like "/images/neatpic33.jpg" without an issue, they show up fine when people read your blog by visiting your site, but without a domain name specified, the RSS readers just don't know what to do and can't deliver the image where you want it.

The fix is easy: Always specify the http:// material in any blog image reference.

On the image inclusion above, just by way of example, here's the actual HTML code I am using:

Rather a long URL, but I'm confident it'll work regardless of how this blog entry is referenced.

That's all there is to it. I hope you find this helps you tweak your RSS feed to meet your aesthetic desires!