Es gibt viele Gründe, einzelne Teile einer Website als Grafik an Stelle von „normalem Text“ umzusetzen. Gerade dort, wo ein vorhandenes Corparate Design auch im Web möglichst weiter leben soll, werden vor allem Titel und Überschriften in einem „Hausfont“ als Grafik erstellt und in die Seiten eingebunden. Zur Optimierung für Suchmaschinen werden diese Bilder gern so implementiert, dass dynamisch beim Laden einer Seite normaler Text gegen entsprechende Bilder ausgetauscht werden. „Dynamic Image Replacement“ heißt das Zauberwort. Um den Text gegen die (hoffentlich) ansprechenderen Grafiken auszutauschen, existieren zahlreiche Methoden, die entweder auf CSS oder JavaScript – oder beidem – basieren. Dieser Beitrag stellt ausgewählte Methoden im Detail vor.

Image Replacement dient dazu, den Quellcode einer Seite möglichst so zu gestalten, dass er ebenso barrierearm wie auch optimiert für Suchmaschinen gestaltet ist, ohne dabei für den Konsumenten im Browser auf die Vorteile von Bildern zu verzichten.

Oft dient dieses Mittel, zu dem es verschiedene Methoden gibt, zum Austausch ganz gezielter Textinhalte wie z. B. Überschriften. Ob grafische Überschriften deswegen verwendet werden, weil die Schrift mit ausgefallenen Effekten oder Hintergründen ausgestattet werden soll oder ob schilcht und ergreifend eine existierende CI eines Unternehmens auch im Web durchgesetzt werden soll (Kompromisse mit ähnlichen Schriftarten sind aus welchen Gründen auch immer nicht akzeptabel): Das Ziel ist immer der möglichst reibungslose Austausch von semantisch „wohlgeformt“ im Text platzierten Überschrifen durch grafischen Ersatz im Browser eines typischen Besuchers, so dass der Konsument mit einem „normalen“ Browser in den Genuss der grafischen Inhalte kommt, während sich diese möglichst nicht störend für Suchmaschinen oder alternative Ausgabegeräte wie Screenreader oder PDAs mit „CSS-loser“ Darstellung von Webseiten.

Auswahl der Methode

Aus der Vielzahl der Techniken, die übersichtlich bei Dr. Web zusammengefasst sind (eine aktuellere Fassung findet man bei Jens Meiert), werden hier zwei Varianten ausgewählt und kurz vorgestellt.

Phark: Alt aber gut!

Die Phark-Methode hat den Vorteil, dass die ausschließlich auf CSS beruht – es wird also kein JavaScript oder eine Serversprache benötigt, um Überschriften gegen die passenden Grafiken auszutauschen. Die Lösung ist robust und stabil (funktioniert in allen „relevanten“ Browsern) und denkbar simpel. Auf der Nachteil-Seite steht die Erfordernis, für jede Überschrift eine passende Grafik erstellen zu müssen (was in den meisten – Ausnahmen siehe unten- anderen Fällen auch so ist) sowie ein wenig erforderlicher Markup in jeder nutzenden Seite in Form passender Verweise zum jeweiligen Bild nebst einer irgendwie gestalteten Kennzeichnung der entsprechenden Tags, die ausgetauscht werden sollen. Im Beispiel werden IDs und Klassen für die jeweiligen Abschnitte verwendet, um „allgemeines CSS“ individuell mit Bildern zu versehen. Die ID kann natürlich auch zu Gunsten von Inline-CSS ausgetauscht werden; die Bündelung im Kopf erscheint aber nicht nur für den „Quellocodeleser“ eleganter.

Die theorstische Gefahr, dass ein Besucher mit eingeschaltetem CSS aber deaktivierter Anzeige von Bildern daherkommt, soll hier irgnoriert werden; zumal diese Besucher auch nichts sehen, wenn die Grafik direkt eingesetzt wird – hier hilft ganz einfach nur der echte Verzicht auf Grafik zu Gunsten reiner CSS-formatierter Text – Überschriften.

Alternative für umfangreiche Sites

Wer es sich nicht erlauben kann, für jede Überschrift eine Grafik zu erstellen oder den Administrationsaufwand scheut – oder wenn ein Blog mit diesem Effekt ausgestattet werden soll, dessen neue Beiträge ständig eine neue Grafik erfordern würden – muss eine Methode her, die die erforderlichen Bilder dymanisch erstellt; möglichst mit Caching bereits erstellter Grafiken und einfach im Einbau. Da hier aktiv vom Server die passende Grafik für jede Überschrift erzeugt werden soll, fallen reine JavaScript – Lösungen aus und es muss eine Server-Lösung mittels PHP, ASP oder entsprechenden Mitteln her. Ein „Klassiker“ in diesem Bereich deckt die meisten Ansprüche ab: Scalable Inline Image Replacement (SIIR). Ein gutes Tutorial findet sich unter http://www.whaleofadive.com/misc/siir/about.php

Beispiele für die Anwendung der Phark-Methode

Erste Testüberschrift

Phark im Einsatz: Hier steht im Quelltext nichts anderes als:

<h2 class=“phark“>Erste Testüberschrift</h2>

Damit die Grafik an der Stelle des Textes erscheint, wird der Text selbst durch eine entsprechende text-indent-Anweisung außerhalb des sichtbaren Bereichs plaztiert. Den frei gewordenen Platz füllt eine Hintergrundgrafik, mit der der h2-Tag der Überschrift formatiert wird. Das geht natürlich auch mit allen anderen Tags und es muss auch keine separate Klasse sein, wenn man ein Tag wie „h2“ z. B. generell für grafisch zu ersetzende Überschriften verwendet – Im obigen Beispiel würde dann die Klassenzuweisung zur Klasse „phark“ entfallen und die folgende CSS-Definition einfach für alle h2 (oder h1, h3 oder wie auch immer…) – Tags vornehvornehmen.

Die erforderlichen CSS-Anweisungen stehen im vorliegenden Fall einfach im Quellocode der Seite; können aber natürlich (besser) in das zentrale CSS eingelagert werden, wenn die Ersetzung durch Bilder an mehr als einer Stelle statt finden soll:

Hierbei wird angenommen, dass alle Grafiken eine einheitliche Höhe von 20 Pixeln besitzen. Um die Breite möglichst nicht auch genau festzulegen, wird hier mit einer prozentualen Angabe gearbeitet; damit das Bild bei kleineren Überschriften nicht wiederholt wird, ist hier die Bildwiederholung explizit abzuschalten. Durch die Positionierung des Textes im unsichtbaren Bereich wird nur die Hintergrundgrafik angezeigt. Genau so gut ist natürlich auch eine feste Breitenangabe in Pixeln, die zur Grafik passt. Ohnehin würden nun alle Überschriften zweiter Ebene, die diese Klasse erhalten, das gleiche hier verwendete Hintergrundbild für die „ueberschrift1“ erhalten.

Bleibt die Frage: Wie also bekommt der nächste Abschnitt eine passende Grafik spendiert?

Zweite Testüberschrift

Antwort: Durch passende Zuweisung eines anderen Bilds und Beibehaltung aller anderen Anweisungen für den Block. Das kann entweder „inline“ geschehen oder über eine ID im allgemeinen CSS (ein Eintrag für jede Überschrift werforderlich) bzw. per CSS im Kopf der Seite. Dazu wird nur die Eigenschaft background-image überschrieben.

Inline-Lösung

<h2 class=“phark“ style=“background-image:url(‚testueberschrift2.png‘)“>Zweite Testüberschrift</h2>

Im Head individuell überschreiben

Hierbei wird die zweite Überschrift wie die erste mit der Klasse „phark“ versehen und erhält eine ID, über die die neue Grafik per CSS zugewiesen werden kann:

Dritte Testüberschrift

Diese Überschrift ist „Ungepharked“ – so sieht die Überschrift ohne Zuweisung der Phark-Klasse und Definition eines Hintergrundbildes aus – also „ganz normal“. Ist diese Schriftart – anders als hier – in Aussehen, Größe und Farbgebung an die grafischen Überschriften angelehnt, ist der Verlust gering, wenn die Methode auf dem konsumierenden System nicht greift…