{"id":41,"date":"2004-01-26T14:58:15","date_gmt":"2004-01-26T18:58:15","guid":{"rendered":"http:\/\/blogs.law.harvard.edu\/stepno\/2004\/01\/26\/picture-tips-for-new-bloggers\/"},"modified":"2004-01-26T14:58:15","modified_gmt":"2004-01-26T18:58:15","slug":"picture-tips-for-new-bloggers","status":"publish","type":"post","link":"https:\/\/archive.blogs.harvard.edu\/stepno\/2004\/01\/26\/picture-tips-for-new-bloggers\/","title":{"rendered":"Picture tips for new bloggers"},"content":{"rendered":"

<\/a><\/p>\n

In response to a question from one of our new bloggers from Andrew Grumet’s MIT class<\/a>, here are some tips about putting images in your blog.<\/p>\n

What are TITLE and TEXT?<\/b>
\nPICTURES is one of the items on the horizontal menu at the top of a
\nManila editing screen. When you upload your image with its “Create a
\nNew Picture” command, you get a fill-in form with room to give the
\npicture a TITLE and add some TEXT. Those headings might suggest you are
\nwriting a title and caption to appear under the picture, but that isn’t
\nthe case. <\/p>\n

“TITLE”
\nis a shortcut name you can use to add the picture to your blog. Just
\ntype the title in quotes wherever you want the picture to appear. Make
\nit short and easy to remember. BeardedBob, for example.
\n\"Bob<\/p>\n

“TEXT” is an alternative text, intended to appear
\nin place of the picture if someone views your page with a text-only
\nbrowser. (Some browsers also will display the “alt text” until the
\npicture is delivered to the page, or when you pass the mouse over it.)
\nExample: “Bob’s mugshot shows his beard in need of a trim.” An “alt”
\ntext is more important if the picture contains important information,
\nsuch as a graph with numbers that aren’t repeated in the text of the
\npage.<\/p>\n

Here’s an example of the HTML code my shortcut TITLE
\ninserts in the page, including the address where the actual picture
\nfile is stored, its measurements and the “alt text”:
Making text wrap around pictures<\/b>
\"Bob's
\nIf I had simply typed Bearded Bob in quotes, that code would have been
\ninserted, and the picture would appear on a line all by itself again.
\nHowever, I wanted the text to wrap to the right of the picture, like
\nthis. To get that effect, I had to edit the HTML code a little. Adding
\nan alignment command (align=”left” or align=”right”) to the
\nimage-position code will do the trick. Align left will push the image
\nto the left, like my photo. Here’s what the code looks like: \"Bob's
You can do fancier
\narrangements of text and picture elements with XML or HTML paragraph
\nand table codes, which are easiest to manipulate with webpage editors
\nlike Dreamweaver, then paste into a Manila editing window.<\/p>\n

Note:
\nChanging the height or width measurements in an image code will distort
\nthe shape of the picture. Putting a number other than 0 in the “border”
\ncode will give you a black border, measured in pixels. Here’s a
\n400-pixel wide, 100-pixel high mashed example with a 10 pixel border,
\nanticipating any “how big is a pixel?” questions in the next section.<\/p>\n

\"mashed<\/p>\n

How Big? How Many?<\/b>
\nLet your audience be your guide. If some of your readers have old,
\nsmall 640-pixel-wide monitors or don’t like to fill the screen with the
\nbrowser, smaller is better. If your blog’s margins and menus eat a
\nthird of that small browser window, then a 400-pixel-wide picture might
\nbe a good limit. A picture half that wide would give you room to wrap
\ntext alongside.<\/p>\n

On-screen size is only part of the story. Readers with slow modem connections will appreciate your limiting the number and file<\/i>
\nsize of pictures, too. Crop out unessential details and use Photoshop’s
\n“Save for Web” feature or some similar feature in another program to
\ncompress the file. A compressed JPG image can save as much as 98
\npercent of the load time required for a “print quality” digital camera
\nphoto, without hurting picture quality. (That’s because the computer
\nscreen shows fewer than 100 dots per inch, while common printers show
\nthree to six times that.) <\/p>\n

Examine the file size of any image
\nbefore you upload it. Most images can be cropped and compressed to
\nunder 50 KB. (Typical photos on the New York Times, Boston.com or CNN
\nhome pages are 20 KB or less; thumbnails, 4 to 8 KB. Even with so many
\nmenus, ads and images, these news sites’ whole home pages usually
\n“weigh” less than 500KB.)<\/p>\n

If you are going to use images in your
\nweblog very often, you should have a copy of Photoshop, PaintShop Pro,
\nThe Gimp, Fireworks or another image editing program and learn how to
\nrotate, crop, resize, and compress (“Save for Web”) pictures. Google
\ncan find you plenty of tutorials on the subject… or drop me a line.<\/p>\n

Want tips on writing style for your blog?<\/a>
\nor more general background?<\/a>\n<\/div>\n

Picture tips for new bloggers …<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1090,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1391],"tags":[],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-stepnostories"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/users\/1090"}],"replies":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":0,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"wp:attachment":[{"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/stepno\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}