Ăśbersicht: Image-Replacement-Techniken

Artikel vom 13. Mai 2005 (↻ 8. Dezember 2015), exklusiv für Dr. Web. ISSN 1614-3124, #13. Schwerpunkt: (RSS-Feed für alle Themen).

Dieser Artikel ist stellenweise veraltet.

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 (fortlaufend aktualisiert). Auf Varianten, die ausschließlich auf JavaScript/DOM beruhen (DOM Image Replacement), die zu trivial sind (img-Element anstelle des Textes, wie in Aaron Gustafsons iIR oder im etwas anspruchsvolleren Thierry Image Replacement) oder keinen signifikanten Unterschied oder Mehrwert gegenüber bereits aufgezählten Methoden bieten (wie zum Beispiel das Single Pixel Replacement), wird nicht näher eingegangen. Empfehlenswerte Lösungen sind die Phark-Methode sowie SIIR (siehe Zusammenfassung).

Inhalt

  1. Fahrner Image Replacement
  2. Dwyer-Methode
  3. Gilder-/Levin-Methode
  4. Radu-Methode
  5. Phark-Methode
  6. Leahy-/Langridge-Methode
  7. Lindsay-Methode
  8. Malarkey Image Replacement
  9. Definitive Solution to Image Replacement
  10. GIR Image Replacement
  11. Scalable Inline Image Replacement
  12. Dynamic Text Replacement
  13. Scalable Jens Image Replacement
  14. Scalable Inman Flash Replacement
  15. SwishMAX Text Replacement
  16. PHP + CSS Dynamic Text Replacement
  17. Zusammenfassung

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 vorlesen können – siehe Joe Clarks Artikel für A List Apart, wobei der von eben Joe Clark unmittelbar danach angeregte reader-Medientyp Abhilfe schaffen könnte –, 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(example.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; ein Manko, 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.

Beispiel
Muster
HTML 
<h1><span>Muster</span></h1>
CSS 
h1 {
  background: url(example.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. Das von beiden beschriebene Vorgehen setzt wie die Dwyer-Methode auf FIR auf, gebraucht also Extra-Markup. Gravierende Zugänglichkeitsprobleme sind nicht bekannt, und das Verfahren erlaubt sogar die Darstellung des Textes, wenn die Anzeige von Bildern deaktiviert ist. Neben dem benötigten span-Element ist es nicht unproblematisch, transparente Bilder zu verwenden, da der Text durch diese hindurchscheinen würde.

HTML 
<h1><span></span>Muster</h1>
CSS 
h1 {
  height: 25px;
  position: relative;
  width: 250px;
}

h1 span {
  background: url(example.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 von Haus aus im wenn doch nun irrelevanten Internet Explorer 5.0. Das Szenario »Bilder aus, CSS an« ist auch hier ein Problem.

HTML 
<h1>Muster</h1>
CSS 
h1 {
  background: url(example.gif);
  height: 25px;
  margin-left: -1000px;
  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 einer großen Ausrückung über die text-indent-Eigenschaft. Rundles Vorgehen ist vermutlich der weitaus beliebteste Weg, um Elemente durch Bilder zu ersetzen; vervollständigt man die Kurzanalyse, besteht jedoch auch hier die »Bilder aus, CSS an«-Problematik.

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

Leahy-/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 im Gegensatz zu FIR auch mit assistiven Technologien wie Screenreadern funktioniert. Schwachpunkt dieser Methode ist das Szenario, ja, »Bilder aus, CSS an«.

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

Lindsay-Methode

Von Russ Weakley kommt die Lindsay-Methode, die darauf basiert, den Text nicht 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(example.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: -999em;. Aus Sicht der Barrierearmut stellt »Bilder aus, CSS an« die übliche Achillesferse dar.

HTML 
<h1>Muster</h1>
CSS 
h1 {
  background: url(example.gif);
  height: 25px;
  letter-spacing: -999em;
  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 WebKit-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 K.O.-Kriterium, ein Tabu dar. Aus diesem Grund wird die Methode technisch auch nicht detaillierter vorgestellt, von der Anwendung von DIR prinzipiell sogar abgeraten.

GIR Image Replacement

GIR ist eine von Jason Davis erdachte Technik, die hier nur angerissen wird, da sie ebenfalls auf invalidem CSS basiert, mit JavaScript-AusdrĂĽcken wie bei DIR. Es wird davon abgeraten, GIR zu benutzen.

Scalable Inline Image Replacement

Ryan Petrellos SIIR (Dezember 2004) ist eine Bildersatztechnik, die auf JavaScript basiert – ü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; Leistungsproblemen 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 Benutzer die Anzeige von Bildern, wird bei gleichzeitig zugelassenem JavaScript der alt-Text angezeigt.

Dynamic Text Replacement

Das von Stewart Rosenberger auf A List Apart veröffentlichte Dynamic Text Replacement (DTR) verwendet ebenfalls PHP, JavaScript und CSS. Es ähnelt vom Prinzip recht stark dem zuvor vorgestellten SIIR, weshalb es hier trotz einiger Abweichungen (noch) nicht näher erörtert wird.

Scalable Jens Image Replacement

sJIR entstammt der Feder von Jens Persson, und es ist eng mit dem Dynamic Text Replacement verwandt.

Scalable Inman Flash Replacement

sIFR wurde im August 2004 erstmals von Mike Davidson vorgestellt und basiert 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; speziell aber setzt die Technik 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 abgeraten.

Wer aber nicht hören will …: Zum Weiterlesen sind der entsprechende sIFR-Artikel bei Dr. Web sowie Gerrit van Aakens Mutmaßung der Revolution der Webtypographie zu empfehlen; Interessierte finden auf der sIFR-Webseite weitere Informationen sowie die benötigten Dateien zum Download.

SwishMAX Text Replacement

STR ist eine von Alessandro Fulciniti erdachte IR-Technik, die vom Grundgedanken dem zuvor präsentierten sIFR gleicht. Auch wenn eine genaue Analyse und Beurteilung noch aussteht, kann eine Empfehlung nicht abgegeben werden, denn STR generiert im mitgelieferten JavaScript in bestimmten Fällen embed-Elemente, zudem werden die ebenso erzeugten param-Elemente nicht geschlossen (was allerdings aber rasch anzupassen wäre).

PHP + CSS Dynamic Text Replacement

Siehe Alex Girons Informationsseite zu P+C DTR sowie Anmerkungen von Tom S. Weber.

Zusammenfassung

Die Bewertung der vorgestellten Techniken muss gewisses Augenmerk auf die Barrierefreiheit legen: Ein Punkt ist die bei jeder Methode angesprochene Handhabung von »Bilder aus, CSS an« – dies ist ein Szenario, auf das zu achten, als Problem tatsächlich aber eher selten anzutreffen ist. Ein anderer Punkt wurde nur angerissen, und das ist die Textskalierung – durch die steigende Verbreitung verbesserter Browser, die sowohl Texte als auch Bilder vergrößern können, nimmt dieses Kriterium in seiner Bedeutung jedoch ab.

Von einer Aufwertung, die Dave Shea als Shea Enhancement proklamiert (aufsetzend auf der Gilder-/Levin-Methode), mögen einige der 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.

Richard Rutter hat des weiteren eine kleine JavaScript-Funktion gezaubert, die bei nahezu allen Techniken dazu beiträgt, »Bilder aus, CSS an« zu umschiffen, indem bei nicht angezeigten Bildern die angewandten CSS-Regeln wieder »neutralisiert« werden (hier die Phark-Methode; die Funktion checkImages sollte nach Laden des jeweiligen Dokuments aufgerufen werden): 

function checkImages() {
  if (document.getElementById) {
    var x = document.getElementById('logo').offsetWidth;
    if (x != '250') {
      document.getElementById('pharkelement').style.textIndent = '0';
    }
  }
}

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 Potential sowie dadurch, dass sie die zugänglichste Lösung darstellt. Standards zu brechen, wie es das durchaus interessante sIFR, STR oder das weniger »definitive« DIR tun, disqualifiziert bei der Beurteilung. Andere Techniken, allen voran das Fahrner Image Replacement, stellen mit ihren Defiziten hinsichtlich Zugänglichkeit sowie dem Bedarf nach zusätzlichem Markup keine Alternativen dar. Und das, obwohl zur Wartbarkeit der Methoden noch kein einziges Wort verloren wurde.

Nachtrag (8. Dezember 2015)

Über die Jahre hatten sich auch PNG Image Replacement und Yet Another Image Replacement Method eingefunden, und ebenso wollten SwFIR und Cufon mal erwähnt werden. Leider folgt dies sehr, sehr spät. Einen aber recht neuen Artikel zum Thema finden Sie bei CSS-Tricks: The Image Replacement Museum. Das Kapitel Image Replacement machen wir hier nun aber dicht.

War dies nützlich oder interessant? Teile (toote) diesen Beitrag, oder lad mich vielleicht auf einen Kaffee ein. Danke!

Ăśber mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Mit meinem aktuellen Umzug nach Spanien bin ich offen für eine neue Remote-Führungsposition im Frontend-Bereich. Beachte und empfehle gerne meinen Lebenslauf oder mein LinkedIn-Profil.

Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.