In the comments from my most recent article, “Supporting Standards that Support Accessibility,” a number of interesting thoughts were raised concerning the requirement (or lack thereof) of the alt attribute in HTML 5.
It’s a difficult issue.
I’ve seen numerous articles around the web which discuss the fact that HTML 5 does not require the alt attribute. To some degree, this is true: HTML 5 provides exclusions to the requirement. In situations where an image is significant but no alternative text can be provided, HTML 5 recommends that the alt attribute be left off as an indicator that the image is significant (not a purely decorational image).
It’s actually quite a bit more complicated than that — the specification describes detailed guidelines for when the alt attribute should be left off, when it should be given a value, and when it should be provided without a value.
My complaint, and the complaint of many others involved in the web standards world is against the concept of providing any reason that the alt attribute may be left off. Ian Hickson states:
Empty alt text means the image is unimportant (decorative) and should be ignored. Missing alt text means that the image is important, critical even, but that there is no fallback text provided. The user agent is expected to treat the two cases differently.
At least, that’s what the HTML5 spec says at the moment.
I believe that it is important to provide a way to distinguish the two cases above; putting both of them into the empty alt=â€?” category would be, IMHO, bad for the accessibility of the aforementioned pages.
He’s right, of course — it is quite important to distinguish between insignificant images such as decorational graphics and between significant but undescribed or undescribable images. The challenge, then, is to come up with a solution to the problem which allows the alt attribute to remain.
So…what are some possible alternatives?
The first thing that comes to mind is to add a signifier attribute. Something which indicates whether an image is significant or non-significant. This would require some revision to HTML generating tools, but certainly no greater a change than that expected for new elements. It would be best to assume a default value when the element is not provided which assumes the image is significant, for backwards compatibility.
A second possibility would be to introduce a key term available to the alt attribute which would indicate significance. This strikes me as a bad idea, since it would have relatively poor backwards compatibility, and would require selecting a term which would become unavailable as normal alt text. Nah, that’s not really going to work.
Third…I’m struggling to come up with another idea…
I’m very open to any thoughts on the subject. Problems with these ideas are welcome, as are suggestions of any off-the-wall idea you may have!
This is a basic guide to dealing with images on the web — file formats, sizing, naming protocols, and adding them to a page.
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:
GIF Version (18 kilobytes)
PNG Version (19 kilobytes)
JPG Version (5 kilobytes)
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:
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.
