Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Jetzt testen
Jens Meiert 30. Juni 2005

Image-Replacement-Techniken

Kein Beitragsbild

Image Replacement beschreibt das Ersetzen von HTML-Elementen durch Bilder, wobei der eigentliche Textinhalt selbst nicht mehr angezeigt wird. Bilder bieten mehr Freiheiten, was unter anderem die Typographie anbelangt, und solche Ersetzungsverfahren sollen trotz der Darstellung von Bildern die Struktur und Semantik eines Dokuments erhalten.

Populäres Ziel solcher Techniken sind Überschriften; bekannte Techniken sind das „Fahrner Image Replacement“ (FIR; FIR-Beispiel) oder „Scalable Inman Flash Replacement“ (sIFR), andere hören auf Namen wie „Malarkey Image Replacement“ (MIR) oder „Definitive Solution to Image Replacement“ (DIR).

Vorgestellt wird eine Vielzahl anwendbarer und verbreiteter Methoden. Auf Varianten, die ausschließlich auf JavaScript beruhen, die zu trivial sind (Img-Element anstelle des Textes) oder keinen signifikanten Unterschied oder Mehrwert gegenüber bereits aufgezählten Methoden bieten (wie beispielsweise das „Single Pixel Replacement„), wird nicht eingegangen. Empfehlenswerte Lösungen sind die Phark-Methode sowie SIIR.

Fahrner Image Replacement

FIR ist vermutlich der Urahn aller „Image Replacement“-Methoden und mindestens seit März 2003 bekannt (Stopdesign). Die Methode arbeitet mit separaten span-Elementen, die entweder über die display- oder die visibility-Eigenschaft ausgeblendet werden. FIR ist nicht nur aufgrund des zusätzlichen Markups problematisch, sondern vor allem, weil die meisten Screenreader den ausgeblendeten Text nicht (mehr) vorlesen können – siehe Joe Clarks Artikel für „A List Apart“ -, und gar nichts angezeigt wird, wenn die Anzeige von Bildern deaktiviert, CSS aber zugelassen ist.

HTML
 <h1><span>Muster</span></h1>
CSS
 h1 { background: url(muster.gif); height: 25px; width: 250px; } h1 span { visibility: hidden; }

Dwyer-Methode

Die Dwyer-Methode wurde von Leon Dwyer entworfen und entspricht einem FIR-Derivat, verwendet also ebenfalls zusätzliches Markup in Form von span-Elementen – was man generell als Manko ansehen kann, auch wenn span-Elemente über keine Semantik verfügen. Von der Schwachstelle „Bilder aus, CSS an“ abgesehen arbeitet diese Methode fehlerfrei, es gibt keine bekannten Probleme mit bestimmten Browsern.

HTML
 <h1><span>Muster</span></h1>
CSS
 h1 { background: url(muster.gif); height: 25px; width: 250px; } h1 span { display: block; height: 0; overflow: hidden; width: 0; }

Gilder-/Levin-Methode

Die Gilder-/Levin-Methode verdankt ihren Namen ebenfalls ihren „Entdeckern“, in diesem Fall Tom Gilder und Levin Alexander, die diese im August 2003 publik machten (siehe bei Levin Alexander). Das von beiden beschriebene Vorgehen setzt wie die Dwyer-Methode auf FIR auf, gebraucht also Extra-Markup. Zugänglichkeitsprobleme sind soweit nicht bekannt (wenn auch laut Dave Shea noch nicht verifiziert), und das Verfahren erlaubt sogar die Darstellung des Textes, wenn die Anzeige von Bildern deaktiviert ist. Neben dem benötigten span-Element ist es ein Problem, transparente Bilder zu verwenden, da Text durch diese hindurchscheinen würde.

HTML
 <h1><span></span>Muster</h1>
CSS
 h1 { height: 25px; position: relative; width: 250px; } h1 span { background: url(muster.gif) no-repeat; height: 100%; position: absolute; width: 100%; }

Radu-Methode

Radu Darvas war neben einer Erweiterung von FIR, die das „Single Pixel Replacement“ hervorbrachte, noch an einem anderen IR-Verfahren beteiligt, das nun als „Radu-Methode“ bekannt ist. Diese funktioniert im Gegensatz zu FIR ohne Sonder-Markup und auch mit allen Screenreadern, da die Methode über einen großen negativen Außenabstand (via margin-Eigenschaft) arbeitet; im Gegensatz zur Phark-Methode funktioniert sie außerdem im Internet Explorer 5.0. Das Szenario „Bilder aus, CSS an“ ist auch hier ein Problem.

HTML
 <h1>Muster</h1>
CSS
 h1 { background: url(muster.gif); height: 25px; margin-left: -1000em; width: 1250px; }

Phark-Methode

Die Phark-Methode von Mike Rundle ist ähnlich einfach wie die Radu-Methode, arbeitet aber nicht mit einem großen negativen Außenabstand, sondern mit einem großen „Outdent“ über die text-indent-Eigenschaft. Rundles Vorgehen ist vermutlich der weitaus beliebteste Weg, um Elemente durch Bilder zu ersetzen. Zwei Probleme tauchen jedoch beim Verwenden der Phark-Methode auf: Zum einen funktioniert sie nicht mit dem Internet Explorer 5.0, zum anderen besteht auch hier die „Bilder aus, CSS an“-Problematik.

HTML
 <h1>Muster</h1>
CSS
 h1 { background: url(muster.gif); height: 25px; text-indent: -500em; width: 250px; }

Leahy- bzw. Langridge-Methode

Relativ zeitgleich sollen sowohl Seamus Leahy als auch Stuart Langridge (letztere dann als „Langridge Image Replacement“ bekannt, LIR) eine weitere Ersetzungstechnik erfunden haben, die auf dem Hinzufügen der Deklaration overflow: hidden; aufsetzt und damit auch mit assistiven Technologien wie Screenreadern funktioniert. Schwachpunkte dieser Methode sind das Szenario „Bilder aus, CSS an“ sowie die erforderliche Anwendung eines Boxmodell-Hacks.

HTML
 <h1>Muster</h1>
CSS
 h1 { background: url(muster.gif); height: 0 !important; height /**/:25px; overflow: hidden; padding-top: 25px; width: 250px; }

Anmerkung: Die Verwendung von em ist den im Original gebrauchten Pixeln als Einheit vorzuziehen, da der Abstand auch bei Skalierung der Schrift auf jeden Fall groß genug bleibt.

Lindsay-Methode

Von Russ Weakley kommt die Lindsay-Methode, die darauf basiert, den Text nicht wirklich auszublenden, sondern ihn stark zu verkleinern und dabei in der Farbe des Hintergrunds zu kolorieren. Das bekannte Problem „Bilder aus, CSS an“ wird auch hier nicht gelöst, zudem muss die Übereinstimmung der Text- mit der Hintergrundfarbe gewährleistet sein.

HTML
 <h1>Muster</h1>
CSS
 h1 { background: url(muster.gif); color: #FFF; /* Farbe des Hintergrunds */ font-size: 1px; height: 25px; width: 250px; }

Malarkey Image Replacement

Im März 2005 veröffentlichte Andy Clarke das Malarkey Image Replacement. MIR ist ähnlich simpel wie die Phark-Methode und verwendet prinzipiell nur eine einzige Deklaration, um den zu ersetzenden Text aus dem Weg zu schaffen, und zwar letter-spacing: -1000em;. Soll der Internet Explorer auf dem Macintosh bedient werden, ist eine zusätzliche CSS-Regel zur Verwendung des „Commented Backslash Hack“ erforderlich. Aus Sicht der Barrierefreiheit stellt „Bilder aus, CSS an“ die übliche Achillesferse dar.

HTML
 <h1>Muster</h1>
CSS
 h1 { background: url(muster.gif); height: 25px; letter-spacing: -1000em; width: 250px; }

Definitive Solution to Image Replacement

DIR wurde fast unmittelbar nach MIR von Anatoly Papirovsky präsentiert. Es geht die Problematik von zwei Seiten an, vereinfacht dargestellt: Bei Gecko- oder KHTML-Browsern wird das ersetzende Bild über die content-Eigenschaft eingebunden und der entsprechende Block über einen negativen Außenabstand über den Text geschoben; der Internet Explorer, der content (noch) nicht versteht, wird mit zwei anderen Regeln bedient – eine verwendet einen JavaScript-Ausdruck, um ein span-Element in den Code einzufügen, die andere definiert die Maße sowie das Hintergrundbild dieses eingefügten span-Elements.

Diese „definitive Lösung“ ist aus Zugänglichkeitssicht interessant, da sie eigentlich alle regulären Hindernisse – auch „Bilder aus, CSS an“ – umschifft, die Verwendung von JavaScript-Ausdrücken im Stylesheet aber stellt ein KO-Kriterium da, denn dies entspricht nicht der CSS-Spezifikation. Dies ist der Grund, warum die Methode hier technisch nicht detaillierter vorgestellt und zudem von der Anwendung von DIR prinzipiell abgeraten wird.

Scalable Inline Image Replacement

Ryan Petrellos SIIR ist ebenfalls eine der neueren Bildersatztechniken (Dezember 2004), und sie basiert auf JavaScript – über dieses wird ein PHP-Skript angestoßen, was aus im JavaScript angegebenen Parametern Bilder für die Texte der zu ersetzenden Elemente generiert. Neben den spezifizierbaren Parametern kann eine Schrift vorgegeben werden, die in den Bildern verwendet wird; Performanzproblemen beugt SIIR durch einen Cache für bereits generierte Bilder vor.

Das „Scalable Inline Image Replacement“ funktioniert bei allen User-Agents, in denen JavaScript verfügbar und aktiviert ist, es treten andernfalls aber keine Probleme auf. Das Szenario „Bilder aus, CSS an“ ist ebenfalls nicht kritisch – deaktiviert der Nutzer die Anzeige von Bildern, wird bei gleichzeitig zugelassenem JavaScript der ALT-Text angezeigt. Die Skalierung des Textes stellt das einzige Haar in der Suppe dar, denn sie ist auf regulärem Wege über den Browser nicht möglich – wird aber durch zwei spezielle JavaScript-Funktionen adressiert.

  • SIIR-Download (270 KB) funtioniert leider nicht mehr

Scalable Inman Flash Replacement

sIFR wurde im August 2004 erstmals von Mike Davidson vorgestellt und ist somit ebenfalls eine der jüngeren IR-Techniken. Im Allgemeinen basiert sie auf der Idee, Elemente bzw. deren Texte mit allen typographischen Vorteilen sowie einem generischen „Fallback“ versehen dynamisch durch Flash-Filme zu ersetzen, was Davidson eigenen Angaben zufolge auch bereits 2001 bei ESPN umgesetzt hat; im Speziellen aber setzt sie auf dem im April 2004 präsentierten IFR von Shaun Inman auf. Da sIFR invalides Markup in Form nicht spezifizierter Elemente (embed) und Attribute (sifr) generiert, wird es an dieser Stelle jedoch nicht weiter erörtert und von seiner Verwendung von vornherein abgeraten.

Zum Weiterlesen ist der entsprechende sIFR-Artikel bei Dr. Web sowie Gerrit van Aakens Artikel „sIFR – Revolution der Webtypografie?“ zu empfehlen; sehr Interessierte finden auf der Seite zum aktuellen Release „sIFR 2.0, RC4“ weitere Informationen sowie die benötigten Dateien zum Download.

Résumé

Die Bewertung der vorgestellten Techniken muss Augenmerk auf die Barrierefreiheit legen, und hier gilt es besonders auf zwei Punkte einzugehen: Ein Punkt ist die bei jeder Methode angesprochene Handhabung von „Bilder aus, CSS an“ – dies ist ein Szenario, worauf zu achten ist, was aber tatsächlich eher selten vorkommt. Der andere Punkt wurde nur einmal kurz angerissen, und das ist die Textskalierung – in der Regel lassen sich die ersetzten Texte nicht skalieren (Ausnahmen sind technik- – wie bei SIIR – oder browserabhängig – wie bei Opera). Die schlecht mögliche Textskalierung kann und sollte zum Beispiel durch eine möglichst große Schriftgröße auf den Bildern adressiert werden.

Von einer Aufwertung, die Dave Shea als „Shea Enhancement“ proklamiert (aufsetzend auf der Gilder-/Levin-Methode), können zudem alle vorgestellten Techniken profitieren, indem nämlich dem zu ersetzenden Element (in den obigen Beispielen das h1-Element) ein title-Attribut geschenkt wird, das den darzustellenden Text beinhaltet.

Wenn es darum geht, eine Empfehlung auszusprechen, heben sich zwei Techniken deutlich ab, nämlich die Phark-Methode, bedingt durch ihre Einfachheit, und SIIR, bedingt durch ihr Potenzial sowie dadurch, dass sie die zugänglichste Lösung darstellt. Standards zu brechen, wie es das durchaus interessante sIFR und das nicht „definitive“ DIR tun, disqualifiziert bei der Beurteilung. Andere Techniken, allen voran das „Fahrner Image Replacement„, stellen mit ihren Defiziten hinsichtlich der Barrierefreiheit sowie dem Bedarf nach zusätzlichen Markup keine Alternativen dar.

Jens Meiert

Jens O. Meiert, Webentwickler und Informationsdesigner (Google, W3C) und Autor (O’Reilly), ist spezialisiert auf professionelles Webdesign, Webentwicklung, Barrierefreiheit und Usability.

5 Kommentare

  1. Schöne Übersicht! Der Beitrag stammt aus dem Jahre 2005.
    Wie ist Euer Eindruck – werden die Technicken heute noch häufig eingesetzt? Oder ist das durch Webfonts, Googlefonts usw. ein wenig hinfällig?

    Viele Grüße, Stephan

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.