Tools for Writing Posts

Once a writer starts blogging regularly, they notice the limitations of the tiny entry form provided by many blogging platforms. True, some platforms offer more robust editors, but all cause pain and suffering among users from time to time.  My personal favorite – #2 in the list below – is Windows Live Writer.  Alas, only available on Windows.

Microsoft Word would seem an obvious choice to write your prose in: it supports auto-save, spelling and grammar checking and just about every formatting option in the world. More importantly, you end up with a copy of your entry on your computer which can serve as a backup or allow you to continue writing blog entries when you don't have an internet connection. While Word is great for print and for sharing documents with other Word users, it's terrible at producing HTML, which is what you need when writing for the Web.

In this selection I’m only considering free tools.  If you do have money to throw at a good editor, consider some additional options such as DreamWeaver (Win/Mac), Ecto (Mac), and Blogo (Mac).

Here are a few options to consider:

1. Stick with the built-in tool. True, you don't get a copy on your computer and you can't continue writing when offline, but Blogger's built-in editor does have spell checking, auto-save (look next to the "Publish Post" and "Save Now" buttons to see when Blogger last auto-saved your draft), and basic formatting.
   • Pros: No new tools to learn, spell-check, auto-save, minimal tweaking of post HTML needed.
   • Cons: Sometimes finicky, no offline usage, no local backup of blog content.
2. Windows Live Writer.  This Microsoft tool is as close as you’ll get to a WYSIWIG blog editing tool.  It includes support for Flickr images, DiggThis badges and Twitter integration as well as a substantial image editing tools. Best of all you can download your blog’s template file (only works on public blogs) to get a nearly WYSIWIG editing experience. Not perfect, but damn close.
   • Pros: Produces excellent HTML, auto-save, allows you to work while offline, local backup of blog content, powerful image editing tools built-in, integrates with many networking tools, WYSIWIG editing.
   • Cons: Only available on Windows
3. Use a plain-text editor and copy/paste your code into Blogger's Compose window. A plain-text editor, such as Notepad, doesn't try to do anything fancy -- you type text in and save it. Not spell check, no grammar check, sometimes not even auto-save. But it does give you a copy of your blog entry to edit offline as well as a local backup. When posting new entries, you simply copy/paste from Notepad into the Blogger Compose window and let Blogger make the proper HTML for you.
   • Pros: Simple to use, allows you to work while offline, local backup of blog content
   • Cons: No spell-check, no auto-save, will likely require tweaking of HTML to get the formatting you desire.
4. Use Microsoft Word 2007. Didn't you just say that Word is a terrible HTML editor? Yes it is, but in Word 2007, they added a Publish to Blog feature that does a half-way reasonable job. Once you've gotten Word connected to your blogging platform and worked out some of the formatting idiosyncrasies, you'll have a fairly streamlined workflow.
   • Pros: Allows you to work offline, local backup of blog content, spell/grammar checking, most people are already familiar with Word.
   • Cons:Requires some work to get formatting correct, costs money if you don't already have a copy of Word.
5. Use Google Docs to publish to your blog. If you have a Blogger account, you've already got a Google Docs account which allows you to write documents, create presentations and build spreadsheets using Google's free, online tools. While Google Docs does not have the same formatting capacity as Word or Live Writer, it's integration with the Blogging platform is pretty good (they are both owned by Google, after all). You can also use it to upload entries to other blogging platforms. Most of the basics work great but (as always) there seems to be no good way to caption photos.
   • Pros: Word-like interface is already familiar to most, spell/grammar checking, decent integration with Blogger platform means minimal tweaking to get formatting correct.
   • Cons: Working offline and local backup requires some additional setup

Instructions for using Word with Blogger and several other blogging platforms can be found on Microsoft's website as well as introductory videos for the Windows Live Writer tool.

Finally, if you’re a Mac (“Hi, I’m a PC”) but are dying to try out Live Writer you can use one of several “virtual” PC programs to run Windows programs on your Mac.  A few options to consider are Parallels ($80), VMware’s Fusion ($80) and Microsoft’s Virtual PC ($60 – 80).  All have downloadable free trial version, so try before you buy.

Examine further blog editor options here. Also Robin Good reviews offline editors and web publishing tools for both platforms in this badly designed but informative article.

About the Tips & Tricks Articles

There are some aspects of the Blogger platform that require detailed, step-by-step instructions to make sense out of. These tend to be the subjects in our Tips & Tricks section. The hope is that by combining easy-to-follow directions along with screen shots we can simplify the complicated.

In general, one article will build on the information in earlier articles. So, while the first Tips & Tricks post may have screen shots showing how to reach the Edit Template HTML page, later articles will just say Layout -> Edit HTML.

So, keep an eye out in the Lectures and Articles sidebar for new subject popping up.

Blogger settings explained

Here is a list of some of Blogger settings and some additional information on them.  You can access these by heading to your blog’s settings page (click the “Customize” link in the upper-right, then click the “Settings” tab).  These notes are organized by sub-areas – the line of links just below the Postings/Settings/Layout/Monetize tabs.

Don’t forget to hit “Save Settings” at the bottom of the page before moving on to another sub-area!

The only critical setting you may need to change is the Basic –> Select post editor setting: set this to “Updated editor”.  Blogger blogs that pre-date the new editor will still be using the old editor.

• Basic:
  • Export blog: Always a good idea to export your blog before messing with any settings or making change to your blog’s template.  This is as close as you’ll get to undo.
  • Title and Description are self-explanatory.  What happens with them in your blog may not be.  For now, add text to these fields so that it makes sense.  We’ll go over how to use these to optimize your blog for search engines (SEO) later in the course
  • Add your blog to our listings, Let search engines find your blog and Show Email Post links are all options to increase the exposure of your blog.  Unless you are keeping your blog private, set all these to “Yes”.
  • Select post editor: If you plan to type your entries into Blogger, use the “Updated editor.”  No matter what, do not pick the “Old editor” – it was (and still is) horrible.  If you plan to use an HTML editor to create your blog posts (see my recommendations here), then you should select “Hide compose mode” so you don’t have to worry about accidentally copy/pasting into the wrong editor.
• Publishing:
  • If you register your own domain for your blog, this is the place to tell Blogger about it.  We’ll talk more about that later in the class.
• Formatting:
  • Show ??? Days/Posts on the main page can be a bit misleading.  If you set it to show 3 days, it’s not three calendar days but the previous three days that had posts.  So, if you made a post on Monday, Tuesday and Thursday letting your front page to show three days of posts would show all those posts even if it were Sunday.
  • When settings time formatting options, keep in mind who your audience is and what formats they expect to read dates: month/day/year or day/month/year?
  • Convert line breaks: This setting is ignored if you’re using the new editor (in Basic –> Select post editor) as this option is now available on a post-by-post basis.  Just click the “Post options” link when editing a post.
  • Post Template: If you find yourself using the same format for your posts, considering adding a post template to streamline your work.
• Comments:
  • Comments are what makes a blog interactive – it’s what turns an article into a conversation.  Unless you have a strong reason not to, make sure they are on by selecting “Show”.
  • Who Can Comment?: You can restrict who can comment with this setting.  Again, it is best to leave this as open as you feel comfortable with.  You can reduce the amount of Spam comments you get by adjusting some of the following options.
  • Comment Moderation: If it’s just you blogging, do not moderate your comments.  By allowing comments to appear on your site as they are written, you encourage the flow of conversations.
  • Show word verification for comments?: Set this to “Yes” or your blog will be full of comments involving cheap drugs or Nigerian princes looking for your bank account info.
  • Comment Notification Email: Getting an email when someone comments on your blog can help you participate in the conversation in real-time.  You can enter up to ten email addresses.
• Site Feed:
  • When we talk about syndication, we’ll get into more details with blog feeds.  For now set Allow Blog Feeds to “Full”.
• Permissions:
  • If you set up a test blog, it can be useful for me to diagnose problems if I can access the blog’s settings.  Blogger provides three levels of permissions: Admin, Author and Reader.  Set who can read your blog in the Blog Reader area.
  • Add Authors by clicking the “Add Authors” buttons.  This will send them an email with a link they use to accept.  Authors are allowed to create new posts and edit their own posts, but not those of others.  They do not have access to the blog’s settings page.
  • Authors can be promoted to Admins by clicking the “grant admin privileges” link once the Author has accepted the author invitation.

What happens when I move?

Changing your online address can be as painful a process as moving your physical address.  Say you’re using the standard Blogger domain, such as MyBlog.blogspot.com.  What if you want to move out of your parents house and rent an apartment on your own?  What if you’re sick of this fixer-upper domain and want to spend a few more bucks on a penthouse suite?

The most important consideration when moving your site to a new domain is ensure that your regular visitors and the search engines can find your new location from the old one.  Must like mail gets forwarded by the postal service, you can tell servers to redirect traffic to your new digs.  But not all redirects are created equally.

And the bottom of the pack are JavaScript or HTML meta-tag redirects.  These have been so abused by spammers and people trying to game the search engines that they actually looked down on them.  You’ll sour your Google-juice until the search engines find your new content and are reasonably confident that you’re not trying to pull a fast one.  As far as the search engines are concerned, you left town without leaving a forwarding address.  At least most of your visitors will find your new location.

The best options are server redirects better known by their response codes.  A 301 redirect is what you want.  It tells both browsers and search engines that your content has permanently moved to a different location.  No Google-juice is spilt and your visitors will be quickly redirected to the new site.  These redirects require fiddling with the server, though some services such as Blogger will allow you to configure it through their settings pages.  In Blogger’s case, you’ll find it at Dashboard –> Settings –> Publishing.  When you set up a custom domain, Blogger does the right thing and sets up 301 redirects from your old URLs to the new ones.  However, that requires you to continue using Blogger as your blogging engine.

One option that is occasionally mistaken for a 301 redirect is a 302 redirect.  302’s are used for temporary redirections (eg: pointing everything at an “Our site is down for maintenance” page).  These are designed to redirect human visitors while not affecting standing with search engines.  Just make sure that your temporary redirects are indeed temporary.  Occasionally, either by typo or misinformation, someone uses 302 redirects instead of 301’s.  Like the JavaScript and meta-tag redirects, it’ll get your human visitors there but will eventually spoil your Google-juice.

Unlike the real world, you can own your address on the Internet and move it from server to server without any loss of SEO or visitor traffic.  In geek-speak, domain name servers translate friendly domain names – such as bloggingfrontier.com – into an IP address – 69.4.229.64 in this case.  That blob of numbers points to a unique server and all traffic to bloggingfrontier.com will be sent there.  If you want to change to a new server, you just tell the domain name servers to point your domain to a new IP address and you’re good to go.

Adding Google Analytics to your Blogger blog

(As always, click on an image to see the full-sized version)

Google's free Analytics service gives you a multitude of information about your Web site's visitors. While it is aimed squarely at e-commerce sites, there is still a lot of good information in there for bloggers. There are two ways to add the Analytics code to your blog: add an HTML/JavaScript gadget to your blog's footer or add the code directly to your blog's template. The first is preferable if you think you may change templates at some point in the future -- gadgets remain while template customization are lost -- but some templates put visual breaks between gadgets which look odd when there is no visible content in the gadget.

So, if you're using a template (such as the class blog's template) that allows content-free gadgets to remain invisible, use option 1. If your template puts some visible divider between gadgets, use option 2. When in doubt, use option 2.

Adding Google Analytics to your Blogger blog:

1. Go to the Analytics site, click the "Access Analytics" button and, if needed, log in using your Google account information.
   
2. Click on "Add Website Profile"
   
3. Select "Add a Profile for a new domain," enter the URL for your blog, double-check the timezone settings and click the Finish button.
4. This brings up a page with lots of information. Down towards the bottom is a bunch of code you will need to copy/paste into your blog to enable Analytics to track your visitors. Select and copy all this code and click finish at the bottom of the page.
5. Header over to Blogger and, from your Dashboard, click Layout for the blog you want to add Analytics code to.

Analytics can be added as a gadget (see above) or as as part of your blog template:

1. Click on the "Edit HTML" link.
   
2. Whenever editing your template's code, always download the current copy to you computer before making changes: click the "Download Full Template" link (screenshot). If anything goes seriously wrong, you can always undo your changes by uploading this file. (screenshot).
3. In the Edit Template section, scroll to the bottom of the text area and locate the </body> tag. Paste the code you copied above just before the </body> tag. The final result should look like this:
4. Click Preview just to make sure nothing got seriously messed up, then "Save Template" to finalize the changes.

Now for the hard part: waiting. It can take up to 24 hours to start seeing any results – the Google mothership only updates the reports once a day. So grab 40 winks and check back the next day.

However, you can check that the code you just installed is working by returning to the Analytics settings page, click Edit for the Web site in question, then "Check Status" and check the text in the Tracking Status section at the top of the page. You may need to wait a minute of two before Google finds the settings you just updated.

If you get any errors, please post a comment here along with the error messages you are getting.

Tell Google About Your Blog

Getting your site to show up in Google's search results can drive loads of traffic to your blog. But how can Google find your blog among the 50,000 new blogs created each day? Simple, you tell Google about it.

Google's Webmaster Tools give you a huge amount of information as to how Google sees your site, but first you have to register your site with Google. As with most Tips & Tricks articles in this class, you can click on any of the screenshots below to view a full-sized version.

1. Point your browser to Google's Webmaster Tools site and log into your Google account, if necessary.
   
2. Type your blog's Web address in the "Click here to add a site" text box. You want to submit your blog's home page, without any addition viewing options or query string bits and pieces. For example, http://bloggingfrontier.blogspot.com. Then hit "Add Site".
   
3. You should be told that your site has been added to your account. Click the "Verify your site" link.
   
4. Select "Add a meta tag" from the "Choose a verification method" drop down menu.
   
5. The page will expand to show you the meta tag you need to add to your blog. Select and copy the entire tag.
   
6. Go to your blog (it's best to do this in a second window or browser tab as you'll want to get back to the Google page later) and click "Customize" in the top bar (or Dashboard -> Layout will get you to the same page). Click "Edit HTML".
   
7. Now, first things first. Anytime you are going to mess around with your blog's template code, make a backup of your existing code first. That way, you've got something to revert to if things really go south... Click the "Download Full Template" link (screenshot) and save it on your computer. If things get really messed up, you use your Get Out Of Jail Free card by uploading this file (screenshot).
   
8. Find your template's <head> tag and add the meta tag you copied in step 5 right after the <head> tag.
   
9. Click Preview to make sure your change didn't mess anything up. If not, click "Save Template".
   
10. Return to the Google Webmaster Tools page and click the Verify button.
    
11. You should be told that your site has been successfully verified. (As always, post any errors in the comments below and we can troubleshoot them from there).
    
12. While we're here, let's tell Google about our RSS feeds so that it can quickly index new content as it's added to the site. Click on Sitemaps in the left-hand navigation menu. Enter "feeds/posts/default" in the text box and press "Submit Sitemap". If you get an error, double check that Dashboard -> Settings -> Basic -> "Let search engines find your blog" is set to Yes. If it's not, set it to Yes and wait an hour or so before resubmitting -- Blogger does not update this setting immediately.
    
13. Take pride: you are now a Webmaster!

Now you'll need to be patient. Google doesn't immediately go out and index your site -- it usually takes 24 hours or so for it to happen. At first Google will re-index your site every now and then. If it finds you're adding content regularly, it will visit more frequently. If it finds you only add content every week or so, it will visit less frequently.

There is a lot of information that Google will give you about your site. We'll go over that in a later in the course.

Deconstructing a URL

The Uniform Resource Locator, or URL, is what makes the Web possible. It provides a globally unique identifier for everything on the Internet. The official specification for URLs is fairly complicated – don't be discouraged – the most important part to understand is the hostname.

We start with a simple example:

http://www.example.com/test_page.html

“http://” is called the scheme. It tells the browser how to talk to the server (in this case with “HyperText Transfer Protocol” or HTTP) and what sort of reply to expect. A scheme is required in a URL, but most browsers will add it for you. Try typing “google.com” in your browser – it will be changed to “http://www.google.com”.

Everything between the scheme and the first forward slash (“/”) is called the hostname. This is further divided into sections of letters and numbers separated by periods: the domain name (“example.com”) and, optionally, one or more sub-domains (“www”). The hostname identifies the server on the Internet that will handle our request. The domain name is required in a URL.

Everything after the first forward slash is called the path, which tells that server where to find the file we're looking for. In our example, we tell it to look for a file name “test_page.html”. The path is optional in a URL. If it is not specified, the server will use its default path.

Now a more complicated example:

http://www.example.com/workers/directory/lookup.php?first_name=john&last_name=doe#birthday

(Note: this example is one long string with no spaces in it, but the browser wraps it into two lines so it can be shown without running into our sidebar.)  This example has a longer path (“workers/directory/lookup.php”). As before, this tells the server what file is being requested.

The question mark (“?”) allows us to add additional information called query strings. These strings are made up of simple pairs in the form of “name= value” and multiple pairs are separated by ampersands (“&”). Query strings are optional in a URL.

The hash (“#”) specifies a fragment, or a part of the page we are interested in. In this example, “#birthday” says that we're interested in looking up John Doe's birthday. Fragments are optional in a URL.

Query strings are often used to request dynamic information.  In our example, we want a Web page for every worker in our company but writing each page by hand would be prohibitive.  “lookup.php” is a program, or script, that runs on our server which looks up worker information in a database, allowing one URL to display information about everyone in our company.  The query string tells the script who we’re interested in.

Fragments are defined points on a page.  It allows us to tell the browser to scroll down to the relevant information when they follow a link.  Rather than say “follow this link and scroll down to page 24” we can say “as noted in the document’s footnotes.”

There are several ways to create anchor points – the destination of a fragment – but blog entries are generally not long enough to necessitate creating them.  Bloggers most often find themselves using fragments in outbound links.

Wrangling Google Analytics

Now that we've got a few weeks of data, let's look at what Analytics is telling us about our site and our visitors.  Hop over to the Analytics home page, click on the View Report link by your site (if you have more than one) and you should get a dashboard view of what's been happening on your site.  This gives you the high-level view of what's going on.  Let's drill down a few items.

Click on "Traffic Sources" in the left-hand sidebar.  This view splits up your visitors into three major chunks: those that typed your blog's URL in their address bar (direct traffic), those that followed a link on another site (referred traffic, this includes links in web-based email programs such as Gmail) and those who found your blog via a search engine.  Click on the links for any of those titles to be taken to a graph showing that segment of your visitors over time.

In general, that's how Analytics works: as you drill down you get much the same information but for smaller and smaller segments of your visitors.

Now, click on "Keywords" under "Traffic Sources" in the left-hand sidebar to see how folks arrived at your blog.  Occasionally, you end up with a weird entry or three... A previous session of this class had one visitor searching for Linda Ronstadt on July 1st.  You can ignore those oddballs until they start getting into your top 10% of keyword searches.

Now take a look at the top few keyword searches for your blog.  Did these readers have a good time?  Did they find compelling content?  You can tell by looking at the Bounce Rate and the Pages/Visit statistics.  Someone "bounces" when they click through to your site and then leave.  However it says nothing about how much time they spent reading the page they arrived on – they would have to follow a link elsewhere in your blog to register some time on the site with Analytics.  Look at your top few search terms and see if those readers are enjoying your content.  A low bounce rate or high pages/visit indicates that they are.

Click on "Content" followed by "Top Content" in the left-hand sidebar.  This gives a list of the most popular pages in your blog.  Often your blog's home page ("/") will be the top scorer by a wide margin.  To see details for a given page, click the link.  Once on the Content Detail page, you can select "Entrance Keywords" from the "Analyze" drop down (just under the graph) to see what search keywords brought readers to that page.  Again, pay attention to the bounce rate on your popular pages to see if people enjoy what they see.

As you can tell from this very brief overview, Analytics offers a wealth of information about your blog.  If you wanted to advertise your blog, Analytics an provide data to tell you if that ad campaign is working or not.  Lots more information can be found in the Google Analytics help pages.

Customizing your blog: Custom header images and good SEO

Custom-image headers bring branding dash and swagger, but eliminate a golden opportunity to woo the search bots. When you select "Instead of title and description" for your header image, Blogger cuts these elements from the high-value keyword space right at the page's top. The Google juice drains away like life blood ... But all is not lost.

Here's the patch. As always, consider tinkering on the test blog before the live one.

Go to Dashboard –> Layout –> Edit HTML.

Before we touch anything, backup your template.  Just in case...

Check the “Expand Widget Templates” checkbox.

Search for the line <div id='header-inner'> and add the following code immediately following that line:

<div class='titlewrapper' style='background: transparent'>
  <h1 class='title' style='background: transparent; border-width: 0px'>
    <b:include name='title'/>
  </h1> 
</div> 
<b:include name='description'/> 

The end result should look like this:

Now scroll up in your template to find the </b:skin> line.  Use your browser’s search function to help you find it – it’ll probably look something like:

...
body#layout #sidebar {   <-- This part will
padding: 0;              <-- vary based on
}                        <-- your template
]]></b:skin> </head>
...

Copy and paste the following code just before the </b:skin> line:

#header {
  position: relative;
  width: 648px;
  height: 150px;
}
#Header1_headerimg {
  position: absolute;
  width: 648px;
  height: 150px;
  top: 0;
  left: 0;
}

You will need to replace the width and height values with the actual width and height of your header image.

Click Preview to make sure things look correct and “Save Template” if they do.

Pages in Blogger

Blogger has (finally) added the concept of Pages to the mix.  Pages, often referred to as “static” though they can be edited at any time, are best used for information is outside the normal chronological flow of a blog.  “About this Blog” or “Contact Me” are perfect examples.  When comparing blogging platforms, Bloggers lack of Pages was a gaping hole in their feature set when compared to WordPress or TypePad.

For now Pages are only available on Blogger in Draft, Blogger’s beta-testing platform.  Eventually Pages will be migrated to the standard Blogger platform.  In the meantime, simply replace “www” with “draft” when viewing your blog and you’ll be good to go – those who have their own domain name will need to log into Blogger in Draft first and access their blog through the Dashboard.  You may notice a few other features available in Draft, including Thesaurus and Spell check features in the editor’s Compose mode.

Don’t let the “beta” designation scare you off, tools released to Blogger in Draft are quite stable and changes made in Draft show up on your blog as if you made the change using Blogger’s released tools.  Google, Blogger’s parent company, kept Gmail in “beta” for over five years, even with over 146 million users per month.  Personally I don’t think Google really understands what the term “beta” means…

To add a Page to your blog, go to Postings –> Edit Pages and click the New Page button.  From here, things should look pretty familiar.  You get most of the same options as if you were editing a blog entry.  The only real difference is that Blogger adds a “/p/” to your Page’s URL.

Once you’ve added your first page, Blogger asks you where you’d like to place the new links – basically, it’s asking where you’d like to place a new widget.  Currently there are three options: below your header, in your sidebar or no widget at all.  Best option is to select “No gadget” until you’ve added all your Pages, then add the Pages gadget (Layout –> Page Elements –> Add Gadget).  That way your readers don’t see your partially completed work.

You can also customize the location and look of the Pages widget if you’re willing to fiddle with your template code.  (We can get into that during the tech Q&A, if you’re interested).

Blogger limits the number of Pages to 10 – a reasonable limit to prevent people from using Blogger as a content management system.  Blogger is a blogging platform and lacks many of the features needed to provide true content management.

Photo Software Advice

Mike has already detailed some Tools for Writing Posts. Following are few more software recommendations...

Experiment with Adobe Photoshop Elements (free trial, US$139, often bundled), Google's Picasa download (this dovetails with Blogger's web albums) and the GNU Image Manipulation Program (GIMP).

This freely distributed piece of software is nifty for retouching, composition and image authoring (see this handy post about gimping a header and also notes about modification for Blogger's Minima template. This is the best option for folks who want to create a stylish banner and then not bother with photo-manipulating).

Web-friendly image formats and compression

The Internet deals best with certain types of images. JPGs (pronounced "jay-pegs") are optimal for items that contain photography or large gradients. For text and line-art, like ink-sketches, use PNGs and GIFs (pronounced "ping" and "gif," as in "gift" but without the "t"). Read about the techniques' differences on Webopedia.

Digital cameras typically shoot in RAW, high-resolution JPG or a proprietary format. So you'll need to resave photos in a web-friendly fashion – JPG, GIF or PNG – and bite-size them to suit the net. Most bloggers also compress images, so they download quickly. A slow-loading page, after all, alienates readers and ups the bounce rate (how quickly folks depart the site)...

When image-editing programs squish artworks, they simplify them. Depending on the process, they either remove or compress detail (JPG) or reduce the color palette (PNG/GIF). Thus things get blurry or blocky when you go too low. And yes, that's the cyber equivalent of pancaking on your back during the limbo: Very Very Embarrassing...

No more rum punch for you!

You can tailor PNGs for better results via algorithms, but those controls are only available on more expensive image-editing tools such as Adobe Photoshop Elements. Also, the files produced are larger – and unreadable on Internet Explorer 6. That's a generation or two back, browser-wise, and thus not a huge problem, unless your target audience might not have the latest software (silver surfers, readers in developing nations or places with limited Internet access, etc.).

Answers to frequently asked questions:

How do I compress an image for the Web?

Most image editing programs offer some sort of "Save As," "Save For Web" or "Export" functionality.  Each one has the controls in a different place, so check your software's help files for details.

Picasa is a photo cataloging and editing tool from Google available for both Windows and Mac. Use Picasa's "Export to Folder" function to resize and compress photos as JPGs all in one step.  By selecting several photos, you can perform the same operation in a batch. Picasa's especially groovy because its web albums sync with Blogger uploads – handy if you want to reuse images.

How much to compress?

Two ways exist to streamline a file: reduce the physical size of the photo or increase the level of compression (or both). Making the image smaller is a good first step for the web, since most monitors can't display an image more than 1,200 pixels wide. These days, even cheap digital point-and-shoots take photos that are 3,000+ pixels.

Many programs allow you to preview compression levels, as you experiment with different intensities via a slider bar. When you start to see a loss of detail or blockiness, ease the slider back a notch or two and you'll be fine.

Otherwise, a compression level of 70 – 85 (out of 100) works well: files retain clarity but still download briskly on most connections.

Some bloggers, myself included (Amanda), size photographs to specific widths, then upload. That method offers more control and also helps when embedding the captions in Photoshop, old-school style... However, it doesn't allow readers to click on an image and examine a larger version. Nor does it allow reuse in different sizes: The shot you ran full-width in a January post could be a great thumbnail in a related July entry.

Programs like Picasa save an original image, then produce three clones: small (144 pixels), medium (288px) and large (400px). Like Goldilocks, you decide which is just right for the task at hand.

You can then grab the embed code off your Picasa web album: click "Link to this Photo" in the right-hand sidebar. We recommend checking "hide the album link" as that eliminates some formatting drama. Then select a size, and cut and paste the "embed image" code into the photo uploader's URL field.

What about images like line-art, screenshots, icons, etc.?

For art with heavy gradients – elaborately inked comics, for example – your best bet is the JPG format. Shorter gradients – as you might find in a site's header image or logo – compress best with GIF or PNG. 

Transparency requires a GIF or PNG: helpful for a logo that repeats across various pages with different-colored backgrounds. PNGs rock when you need to fade into transparency and GIFs when you have sharp lines.

Having trouble?
Check out these trouble-shooting tips.