Bob Stepno's Red Liner

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.

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”:
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:
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.

Picture tips for new bloggers …

Be Sociable, Share!

• 
•