This is certainly a subject that I’ve covered before — in fact, it’s something I would hardly choose to cover yet again if it didn’t continue cropping up as an important issue. The use of text in alt attributes is an extremely sensitive subject.

Today, the good folks at SEOmoz published an extensive article documenting their statistical findings on web site ranking factors, as gathered from the data in their LinkScape analysis tool. It’s a good article, and demonstrates some interesting results they’ve garnered from the data available in the extensive LinkScape database.

One of their major takeaways in the article was a little disturbing to me.

“Alt attributes of images are probably pretty important places to use your keywords[.]” Explaining (Some of) Google’s Algorithm with Pretty Charts & Math Stuff, October 22nd, 2009

I’m not in anyway disputing their results; their data indicates that placing keywords in alt attributes is of benefit to search engine rankings. Whether that’s true or not is irrelevant to me; I simply want to discuss how this information should be best used.

SEOmoz, of course, is a company dedicated to the study and practice of search engine optimization and marketing. Their goal is to learn what they need to know in order to best put into practice the promotion of web sites. That’s great. My goal, however, is to make sure that users with disabilities are able to use and access web sites successfully without having to jump through unnecessary or unhelpful hoops along their way.

This is a particular case where the SEO method must be used cautiously and selectively if at all. What I want to convey in this article is the fact that while using keywords in alt attributes may help your web site rank, it can also result in a significantly less accessible web site, if applied poorly.

What’s the problem with alt attributes?

While sighted users will never even be aware of an alt attribute value in normal web browsing, screen reader users depend on them. Excess verbiage can render an image-based menu unusable, as I observed in a recent site review at Practical eCommerce. The same unnecessary use of keyword terminology in contextual images can easily confuse or distract a user; and the use of keywords with spacer or ornamental images can cause a web site to be completely unnavigable.

It’s all a question of information overload: practically speaking, if a web site uses images to convey information, a screen reader user can’t disable them without rendering the web site unusable. If the site also fills other images with extra text, the same user may be overwhelmed by an unnecessary volume of keyword phrases.

The SEOmoz report does continue to remark that “Keyword stuffing may be holding you back,” and the overuse of keywords in alt attributes can certainly qualify as keyword stuffing.

You shouldn’t take away from this article that using a keyword in an image alt attribute is totally unacceptable. That’s really not the case: just be selective. I wouldn’t condemn you for using the text “About ProductName” instead of “About” for a navigational image, or using a sensible alt attribute for a contextual image, such as “Woman using our ProductName.” Just remember that keyword stuffing is keyword stuffing, wherever you put the words.

And never place any value in the alt attribute for a purely decorational or spacing image. Please. Just an empty attribute.

This is a basic guide to dealing with images on the web — file formats, sizing, naming protocols, and adding them to a page.

• File Formats
• File Naming
• Coding for Images
• Editing and Sizing

Choosing the Right File Format

There are three common image file formats in use on the web: JPEG (also JPG), GIF and PNG. Respectively, these stand for Joint Photographic Experts Group, Graphics Interchange Format, and Portable Network Graphic.

The most simple and important way to divide between these three formats is to realize that JPEG is designed for use with photographic images; the others are intended for graphical images. This isn’t a hard and fast rule — in general, however, the “lossy” compression of a JPEG image file will result in a smaller, clearer image when used with more complex images.

PNG and GIF formats are most effective with images containing sharp edges and clear expanses of colors — cartoons, illustrations, lettering, or planar graphics.

You may find recommendations against using the PNG image format. These are usually based on older information. The Portable Network Graphics format is a relatively new format, developed in 1995. In general, the PNG format is an improved version of the
GIF format.

Examples:

These three example images look fundamentally similar; at this size and level of detail, the visual difference is minimal. However, the file size is substantially different — the JPG file will load 3 1/2 to 4 times as fast as the GIF or PNG versions.

Advantages of the PNG format:

• 24-bit Transparency: although not yet supported by all browsers, 24-bit transparency allows an image to allow a background of any complexity show through transparent regions of the image.
• 5% – 25% better compression than the GIF format.
• Lossless compression

Advantages of the GIF format:

• None, really.

Advantages of the JPEG format:

• Best reproduction of complex images.
• Controllable compression quality. (You can compress as far as needed in order to produce a clear image at the smallest file size.)

One of the things you want to do with web images is produce the smallest possible file size which will still be a clear, attractive image. Using the right file format will significantly help in this respect.

Setting Standards for File Names

In general, it’s allowable to use any of these for file extensions either capitalized or not; but I strongly recommend using a consistent method. In general, it’s best to establish a clear rule for file naming: all lowercase is a common preference.

One reason for using a consistent image naming scheme is for your own ease of use. An entire web directory filled with images names “DSC_00nn.jpg” is very difficult to reference when you’re attempting to incorporate those images into your site. Clear labels which indicate what’s depicted can save a great deal of your time.

Search engines like real words, and they will read the names of your files. An image named “joe-dolson-and-me-at-ses-chicago-2006.jpg” will be very clear to them. The hyphens are commonly understood as word separators, so search engines will have an easy time parsing the basic contents of your image.

Use of Code to Implement Images

The basic code to include an image follows this pattern:

<img src="" alt="" height="" width="" />

The src value is the location of your image, of course. alt is a place to put an alternative description of the image if one is needed. The alt attribute should always be included in your image code for accessibility reasons, whether the value is filled or not. For more on this subject, see Search Optimization, Accessibility, and Images: Best Practices.

height and width are commonly abused attributes. One thing I’ve seen many times is the use of these attributes to define the displayed size of an image. This is NOT what these attributes are for. Image files have absolute sizes. In your browser, if you right click on any image and select “Properties,” you’ll see a dialog box containing information about the image. One of those pieces of information is the dimensions of the image, as displayed. It may not, however, by the actual dimension of the image.

You can control what size an image will display at by setting the height and width attributes. It works. However, displaying any image at any dimensions other than its native dimensions will cause distortion in the image. The image is not being changed to these new dimensions; it’s simply being squashed or stretched.

Examples:

JPG Version, actual size 200 pixels by 150 pixels.

JPG Version, actual size 200 pixels by 150 pixels, displayed at 300 pixels by 225 pixels.

JPG Version, actual size 200 pixels by 150 pixels, displayed at 100 pixels by 75 pixels.

This is a relatively small shift for these images. The change is proportional; so the images aren’t being skewed out of their normal change, which helps keep the problems minimal. However, you’ll still easily be able to see that the two adjusted images are noticeably pixelated compared to the original image. These images should have been resized, instead:

JPG Version, actual size 300 pixels by 225 pixels, displayed at 300 pixels by 225 pixels.

JPG Version, actual size 100 pixels by 75 pixels, displayed at 100 pixels by 75 pixels.

When an image is warped (changed in a manner which changes the proportions) the effects can be much more substantial:

JPG Version, actual size 200 pixels by 150 pixels, displayed at 180 pixels by 60 pixels.

These changes can distort the image to a degree where it can become almost unrecognizable.

Editing and Sizing Your Images

There are two key rules to editing and sizing images: reduce the quality to the lowest level which provides a high-quality image and show what’s important. Both of these are rules which depend on your judgment. It’s up to you to decide whether the image you’re working on is acceptably high quality. There are no set rules for what a good quality image will be.

From a quality perspective, the degree to which you’ll be able to reduce is dependent on the complexity of the image. Extremely complex images with fine details can only be practically reduced so far. With JPG images, they’ll quickly lose definition in the detailed areas. With GIF and PNG images, you’ll either find yourself with a bloated file size or you’ll lose critical colors. Try different file formats if the default isn’t working; the actual choice of format isn’t what’s important.

“Showing what’s important” is an important rule for thumbnail generation. If you’re using a thumbnail view to provide a preview of larger images, what’s more important: that visitors can see the entire image at a tiny size, or that they can see a few details of the image and understand them?

Take these two example thumbnail images as food for thought:

JPG Version, 80 pixels by 60 pixels: full file reduced.

JPG Version, 80 pixels by 60 pixels: selected detail.

While the first image does provide the full image, the visitor isn’t really able to draw any practical conclusions about the product from the image. The second image, while still hardly detailed, is at least clear, and may do more towards drawing a visitor further into the product.

On the whole, working with your images in a consistent and systematic manner, paying attention to file size, file format, and the content of your images will help you a great deal in providing a faster, more attractive web site. It’s a simple step; but it’s well worth it.

One common suggestion concerning the search optimization of images is to use the alt attribute to place keywords relevant to the image contents.

I really loathe this.

If it was an amazing, perfect, incredible search optimization technique which would bring absolutely fantastic traffic I still wouldn’t recommend the technique. Appropriate alt attributes are one of the most critical areas for the user experience of screen reader users — using them inappropriately is a great way to give this section of your market a horrible experience on your site.

Read more: Search Optimization, Accessibility, and Images: Best Practices

There are a lot of PHP photo gallery scripts out there. I know; because I went looking for one some time ago, and found myself barraged with Javascript, AJAX, and complicated installations. I didn’t want any of those things, so in the end I just wrote one for myself — and this is the end result. Download the ZIP package.

It’s not a complicated script, and it doesn’t do a whole lot for you: but, assuming you’re running on Linux with PHP, it’ll be incredibly easy for you to install and configure. View the sample installation.

What’s in the Package?

There are six main files included in this zip package (Version 1.2):

1. gallery.php — the photo gallery script. Now contained in functions.php.
2. index.php — the home file which includes the gallery script and contains configuration info.Configuration now in separate file; gallery files now contain only a few gallery-specific variables. You can copy this page to create additional galleries just by saving it with a new name and changing the configuration information. test.php is a second example referencing a separate gallery, to demonstrate the multiple gallery features.
3. titles.txt — a simple text file which uses pipe-separated fields to indicate the image name, an image description, and an alt text option.
4. title.php — a script which provides a unique title element for each image in the gallery. Now contained in functions.php.
5. basic_styles.css — a very basic stylesheet so that your default photo gallery doesn’t look too boring. Warning: no attempt whatsoever has been made to test these styles outside of Firefox.
6. readme.txt — installation instructions

I’ve also supplied a (very) small gallery of images for the included gallery.

What does the script do?

This is pretty straightforward. The configuration information you’ll send to the script provides the title of the gallery, the relative path to your images folder, and the name of your text file containing the image information. Using this information, the gallery script creates a page containing (in order):

1. Navigation links to move between the previous and next images in the gallery. The sequence is the order in which you’ve listed the images in your text file. The navigation is circular, so in the initial position the previous link will send you to the last image in the gallery.
2. A full size image with a caption. The caption is the second field in your text file.
3. An unordered list of thumbnail images in the gallery. Again, the order is from the text file. In the default styling, the list is displayed as a panel of images rather than as a list. Each image is a link to the full sized image within the gallery.

The script does NOT automatically generate your thumbnail images. Sure, I could have done that — but my feeling is that manually creating thumbnail images will usually be more aesthetically pleasing. My preference is to create 80×80 square thumbnails cropped from the image. The tiling effect of the unordered list is much more effective with square thumbnails; and the ability to choose a particular section of the image for the thumbnail is much nicer than whatever programmatically selected truncation might have done.

Some Small Recommendations

The script allows the ability to use an alt text on your images. It also provides a description which can be used to caption the images in a paragraph either over or under the image. To me, it’s redundant to provide both descriptive text associated with the image AND a descriptive alt attribute. Therefore, I’ve also provided the option to turn off alt text in the full sized images. The default settings are what I’d recommend: visible descriptions enabled for the full size image, alt attributes left blank, and alt attributes enabled for all thumbnails.

I also recommend keeping your alt attributes short and to the point. The reason for having separate descriptions and alt attributes is because they serve different purposes: don’t try and use the description field as an alt attribute and don’t try and use the alt field for a description!

There’s nothing fancy about this script. Really — I mean it. It’s down and dirty “make me a photo gallery” programming. Use at your own risk!

Changes as of 2/6/2010

• Improved pagination feature, adding a control to set the number of visible page links at a time.
• Simplified support for multiple galleries.
• Generate a list of available photo galleries.
• Navigate through multiple galleries continuously.
• Separated most configuration options into an external file, rather than configuring the same options for every gallery.

These changes are very substantial to the core code; although the majority of the actual code has remained the same, the structure of the code usage has been significantly revised. See the readme.txt for details on usage.

On the whole, this should be easier than ever before; although you may be in for a little work if you’re trying to revise.

Note: The basic output (HTML, unique ID’s, classes, etc.) is unchanged. The format of the titles.txt file is unchanged. The only changes are in the addition of new features, in the way configuration options are set up, and in the way information is output from the scripts.