Picture tips for new bloggers

In response to a question from one of our new bloggers from Andrew Grumet's MIT class, here are some tips about putting images in your blog. (The first three paragraphs refer to the Manila weblogging platform his class was using. The text-wrap and image-dimension comments may be useful to bloggers using other systems that give you access to the HTML code for your page. The "How big; how many?" part can apply to any system.)

What are TITLE and TEXT?

PICTURES is one of the items on the horizontal menu at the top of a Manila editing screen. When you upload your image with its "Create a New Picture" command, you get a fill-in form with room to give the picture a TITLE and add some TEXT. Those headings might suggest you are writing a title and caption to appear under the picture, but that isn't the case.

"TITLE" is a shortcut name you can use to add the picture to your blog. Just type the title in quotes wherever you want the picture to appear. Make it short and easy to remember. BeardedBob, for example.

"TEXT" is an alternative text, intended to appear in place of the picture if someone views your page with a text-only browser. (Some browsers also will display the "alt text" until the picture is delivered to the page, or when you pass the mouse over it.) Example: "Bob's mugshot shows his beard in need of a trim." An "alt" text is more important if the picture contains important information, such as a graph with numbers that aren't repeated in the text of the page.

Here's an example of the HTML code my shortcut TITLE inserts in the page, including the address where the actual picture file is stored, its measurements and the "alt text": <img src="http://cyber.law.harvard.edu/blogs/static/stepno/BobMay02125px.jpg" height="149" width="125" border="0" alt="BeardedBob: Bob's beard in need of a trim.">

Making text wrap around pictures
If I had simply typed Bearded Bob in quotes, that code would have been inserted, and the picture would appear on a line all by itself again. However, I wanted the text to wrap to the right of the picture, like this. To get that effect, I had to edit the HTML code a little. Adding an alignment command (align="left" or align="right") to the image-position code will do the trick. Align left will push the image to the left, like my photo. Here's what the code looks like: <img src="http://cyber.law.harvard.edu/blogs/static/stepno/BobMay02125px.jpg" height="149" width="125" border="0" alt="BeardedBob: Bob's beard in need of a trim." align="left">

You can do fancier arrangements of text and picture elements with XML or HTML paragraph and table codes, which are easiest to manipulate with webpage editors like Dreamweaver, then paste into a Manila editing window.

Note: Changing the height or width measurements in an image code will distort the shape of the picture. Putting a number other than 0 in the "border" code will give you a black border, measured in pixels. Here's a 400-pixel wide, 100-pixel high mashed example with a 10 pixel border, anticipating any "how big is a pixel?" questions in the next section.



How Big? How Many?

Let your audience be your guide. If some of your readers have old, small 640-pixel-wide monitors or don't like to fill the screen with the browser, smaller is better. If your blog's margins and menus eat a third of that small browser window, then a 400-pixel-wide picture might be a good limit. A picture half that wide would give you room to wrap text alongside.

On-screen size is only part of the story. Readers with slow modem connections will appreciate your limiting the number and file size of pictures, too. Crop out unessential details and use Photoshop's "Save for Web" feature or some similar feature in another program to compress the file. A compressed JPG image can save as much as 98 percent of the load time required for a "print quality" digital camera photo, without hurting picture quality. (That's because the computer screen shows fewer than 100 dots per inch, while common printers show three to six times that.)

Examine the file size of any image before you upload it. Most images can be cropped and compressed to under 50 KB. (Typical photos on the New York Times, Boston.com or CNN home pages are 20 KB or less; thumbnails, 4 to 8 KB. Even with so many menus, ads and images, these news sites' whole home pages usually "weigh" less than 500KB.)

If you are going to use images in your weblog very often, you should have a copy of Photoshop, PaintShop Pro, The Gimp, Fireworks or another image editing program and learn how to rotate, crop, resize, and compress ("Save for Web") pictures. Google can find you plenty of tutorials on the subject... or drop me a line.

© Copyright 2009 Bob Stepno. Last update: 7/27/09; 3:57:24 AM.