Image Replacement Methods

How they affect a sites Findability.

Lokin Crook

Interactive Media Designs

Primer: What is Image Replacement?

Facts and opinions about Fahrner Image Replacement - http://www.alistapart.com/articles/fir/ C.z. Robertson - http://rtnl.org.uk/words/19990709-site_updates.shtml Douglas Bowman's full coding details - http://www.stopdesign.com/articles/replace_text/ Jeffrey Zeldman's Designing with web standards - http://www.zeldman.com/dwws/

How FIR Affects Findability

By using images to replace important aspects of a pages semantic markup such as heading tags etc. we are hindering our page ranking and search engine optimization attempts. keywords listed in alt attributes did not affect or count towards the density rating. search engines dont place much importance on alt attributes these days. black hat technique keyword stuffing is the reason

An Example of the FIR Method

Alternative Methods

(LIR) http://www.moronicbajebus.com/playground/cssplay/image-replacement/ (RUNDLE'S TEXT-INDENT METHOD) http://phark.typepad.com/phark/2003/08/accessible_imag.html (COVER UP METHOD) http://wellstyled.com/css-replace-text-by-image.html (SFIR) http://www.mikeindustries.com/blog/archive/2004/08/sifr (WAC-FR) http://www.ridingtheclutch.com/entry.cfm?id=36

LIR Method

Leahy/Langridge Image Replacement (LIR) http://www.moronicbajebus.com/playground/cssplay/image-replacement/ This method eliminates the span by setting height of the parent element to 0 and overflow to hidden, which hides the text. Then it uses top padding to force the element to the height of the image in the background. Conceived at similar times by Seamus Leahy and Stuart Langridge. Stuart Langridge had this to say http://www.kryogenix.org/code/browser/lir/ Instead of setting our image height as the height of the header, we set that height in padding in the header. Then we set the height of the whole image to zero (so the header is only the height of the top padding), and hide the overflow (so that the text doesn't show, because it's outside the header's dimensions). And there you have it: image replacement headers without having to add a span.

Rundle’s Method

Rundle’s Text-Indent Method http://phark.typepad.com/phark/2003/08/accessible_imag.html Mike Rundle devised a simple method of using the CSS text-indent property to shift contained text outside the visible element window. What I have been doing is this: With this kind of CSS attached to it: #replaceText { text-indent: -9000px; background: url(bg.gif); } Now, what this does, is move the text 9000 pixels to the left (or "before", depending on in which direction your text is written), such that is it no longer viewable in the parent container. The text is "still there", however you cannot see it. The background image shines through proudly, and the screen reader will happily read your extremely negatively-indented text, disregarding the background! Update: Thanks to my friend "Vavoom"'s usage of his screen-reader, the above-mentioned technique is now verified to work with the JAWS screen-reading software. Note: IE5 on Windows has a problem with the technique, where it negatively indents the text and background image.

Cover-up Method

Cover-up Method http://wellstyled.com/files/css-replace-text-by-image/example02.html http://wellstyled.com/css-replace-text-by-image.html Gecko, Opera 7 and IE6, IE5 and safari Another method devised by both Petr Stanicek (a.k.a. “Pixy”) and Tom Gilder uses an empty span element to position a background image on top of the text, allowing the text to show up when images are turned off (or don’t load) in the browser. The idea to assure the element is usable even with unreachable image, is following. The text won't be enclosed in the neutral element span, but it's placed beside it. The span stays empty, but we format it with the background image and absolutely positioned, replacing the original text. The usage is demonstrated in the example 2. The text will be visible, if the image (for any reason) cannot be displayed. Otherwise, the image covers the text. For a case when the text is longer then the image width, the overflow:hidden is used (otherwise the text would "protrude" under the image). Note: We can format links in similar way. We make the A-element a block and treat it as the title in previous examples. We can also add second image for the hover-state. The overflow declaration tells the browser what to do with content that doesn't fit in a box. You can assign four values to overflow and they should give the following results:

Disadvantages of previous methods

The one real disadvantage here is the accessibily issue of users that can see images, but have impaired vision. One of the techniques used to accomadate these users, is setting the font sizes with ems. This enables all users to scale the sizes of the text to larger sizes enabling them to read the text. If a user were to attempt this task the image would not increase in size. (that is until gifs become expandable and supported) The user would most likely not know that they can turn off the images and reveal the test that is underneath. As a way to overcome the issue of scalability, and many of the problems that exist with the standard fir method, a new technique was introduced using Flash. It is widely known as sFIR or Scalable Inman Flash Replacement.

sFIR Method

sFIR To The Rescue? You create your page as you normally would using xhtml / semantic markup. Then you create javacript file to find and cover specific sections with a flash file. Thus if the user doesnt have flash 6 or higher, they see the normal markup. If they do have it, they then see the new flash markup. sfir only scales on page load. (but it is thought that if a user is visually impaired they most likely will already have their browswer adjusted to a specific size regardless.

WAC-FR Method

Which Method Is Best?

Cover Method will work accross more browsers with less design headaches that may arise from how different browsers parse your markup. SFir Method will address more users, Addresses the target group of visually impaired users, uses smaller files.

Discussion



Questions and Answers

extra stuff for print out here, such as code