This is the third in a series of three tutorials on how to optimize your website for text-only browsers. If you're interested, check out the other tutorials in the series:

Part I Download and Install Lynx on an Intel Mac
Part II Writing Logical HTML Code

In today's tutorial I'm going to show you a few ways to deal with images when optimizing your website for text-only browsers. The basic rule of thumb when dealing with images is to repeat all the essential information from your images as text in the HTML code.

The first thing you should do to optimize your site for text-only browsers is fill in the 'alt' attribute in all your '<img />' tags with a good description of your image. Lynx will display what is in the 'alt' attribute of images as yellow text, and most search engine spiders will include the 'alt' attribute as part of their key-wording algorithms. When you write your 'alt' attributes make sure to include the keywords you want your site associated with, while making it human readable at the same time.

The following code...

looks like this in Lynx.

Many websites use images as titles because they allow more control over the font and appearance of the text. The problem is that these words, which are essential to the meaning and strategy of your site, are invisible to text-only browsers and search engine spiders. While the 'alt' attribute will put the text onto the page it won't give it the emphasis that a title should have. Here are a couple of ways to work around this problem.

The first is to make the image into the background image with plain HTML text over-top. You can find my detailed tutorial on how to do just that here.

A second, but more sneaky, work around is to repeat the title as a header in the HTML but change the text color to match the background of your site. People using a conventional browser will see your customized text in the image, while search engine spiders and users with text-only browsers will see the HTML title. This is a simple solution, however some search engines may be able to detect and penalize this trick. It can also create unnecessary clutter in your code.

It is probably best to simply avoid using images to replace text whenever you can. Unless you have a logo, or trademarked text that is essential to the design and branding of your site, there is usually little need to use fonts and text features that conventional browsers don't support.

I’m still working on the design and usability review of my open source web directory software. I want to give a warm thank you to everyone who has sent me suggestions and advice. But it’s not too late to help me out. If you’re so inclined, take a look at my sample web directory and let me know what you think. I’ll be sure to give you credit when I roll out the new and improved design.

Today’s tutorial is all about how to create a transparent background on an image using GIMP. You might have heard of a certain other fancy and expensive photo editing program. It can get the job down as well, but I’m going to use GIMP because I love open source software. You can find more information about GIMP, and download it for free at http://www.gimp.org/.

Images with transparency are useful in web design because they save you from editing your image every time you want to change the colours of your site. The background colour will simply shine through the transparent portions of your image. They also let you use gradients and allow more subtle transitions between the colours on your site.

First, open the image in Gimp and select the foreground of your image. The most accurate method is to use the paths tool to painstakingly trace around the edges of the foreground.

Today I’m feeling lazy, so I’m going to use the fuzzy select tool, but for a ‘real’ page I would take the time and do it right.

Once you have a satisfactory selection, press Control-C, or use the drop down menu to copy your selection.

Next make a new layer. Make sure that the transparency button is selected in the new layer dialogue.

Make sure the new layer is selected and press Control-V, or use the drop down menu to paste your selection.

Now select the floating selection in the layers palette, and click on the anchor to attach it to the new layer.

You can now delete the background layer, and you are left with your foreground on a transparent background.

Save the image as a png file and make sure to check interlacing in the save as dialogue.

Now we’ll just change the css code we wrote last week to point to the new png file:

Which will give us:

It looks just like it did last week, but what if we change the background colour?

Viola!

Note: Internet Explorer 6.0-

Version’s of Microsoft Internet Explorer earlier than 7.0 don’t have native support for transparent png’s. They have a tendency to turn transparent pixel’s into ugly tones of grey and black. Here’s a quick workaround.

You can use conditional comments to give alternate instructions to specific versions of Internet Explorer. These comments will be ignored by other browsers, so they make a powerful tool for working around Internet Explorer’s many quirks.

The following code will display the text between the<p> </p> tags only in IE 6.0 or earlier:

There are plenty of other conditional codes, and you can read all about them on Peter-Paul Koch’s site.

But, in this case we want to tell Internet Explorer to use jpg’s, or gif’s, which it can handle, instead of the png’s, which it can’t. Put the following code between the <head> </head> tags on your page.

This will create an inline style-sheet that is only visable to early versions of Internet Explorer, and will override the instructions given in the external style-sheet. Just don't forget to put the images where you tell the code to look for them, and edit them whenever you change the colour scheme of your site.

This is the simplest way to work around this problem, but it’s also possible to convince IE to display transparent png’s correctly using Microsoft’s proprietary AlphaImageLoader filter. If you choose this route you may have to make some tradeoffs with the fluidity of your design, but there are open source scripts that can help you take advantage of this tool:

Angus Turnbull’s, IEPNGFIX
Drew McLellen’s, SuperSleight

I’m still working on the design and usability review of my open source web directory project. I want to give a warm thank you to everyone who has sent me suggestions and advice. But it’s not too late to help me out. If you’re so inclined, take a look at my sample web directory and let me know what you think. I’ll be sure to give you credit when I roll out the new and improved design.