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.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

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.