Websiteentwicklung: XHTML: Grafiken

Websiteentwicklung XHTML Grafiken

Bei XHTML kann nicht nur Text zur Anzeige gebracht werden. Für viele Menschen mit stark visuellen Präferenzen kann es eine Verständnishilfe sein, zusätzlich oder alternativ zum Text eine graphische Repräsentation eines Sinnzusammenhanges angeboten zu bekommen. Dann kann es auch für manche Menschen die Ergonomie oder das Wohlbefinden bei der Nutzung erhöhen, wenn die Information graphisch dekoriert wird.

Daher bietet XHTML einige Möglichkeiten, auch graphische Inhalte und andere Medien nicht nur per Verweis zu referenzieren, sondern direkt in die Darstellung des aktuellen Dokumentes einzubinden, entweder alternativ zu anderen Inhalten oder zusätzlich dazu. Dient die Graphik allerdings ausschließlich dem Layout der Seite oder dem Design, so ist dies nicht Aufgabe von XHTML, sondern wird nach der Erstellung des XHTML-Dokumentes mit einer Stilvorlagensprache wie CSS ergänzt.

Besonders bei Pixelgraphik können die Dateien allerdings relativ groß werden, weswegen derart automatisch eingebettet angezeigte Inhalte direkten Einfluß darauf haben, wie lange es dauert, bis ein Dokument direkt angezeigt wird. Diese Ladezeit (und die damit verbundenen Kosten) hängt wiederum davon ab, was für eine Netzanbindung der Leser verwendet. Für Autoren gilt daher im Interesse der Nutzer das Gebot der Effizienz. Größere Bilder können zum Beispiel über Verweise und kleine Vorschaubilder mit dem Hauptinhalt verbunden werden. Bei voller Größe und ins Dokument eingebundenen Bildern ohne Vorauswahl über eine Vorschau empfiehlt sich in der Regel bei zufälligem Publikum eine Dateigröße von nicht wesentlich mehr als 50kB. Dies kann auch Verärgerung des Publikums durch zu lange (teure) Ladezeiten vermeiden. Besucher von Bildergalerien können hingegen auf der Seite mit den Vorschaubildern auf die Dateigröße hingewiesen werden, wenn diese selbst für jene als groß angesehen werden muß, die beim Besuch einer Bildergalerie mit qualitativ hochwertigeren Bildern rechnen müssen.

Element img

Das Element img ist ein leeres, inzeiliges Element zum Einbinden von graphischen Inhalten wie Bildern. Es kann also im normalen Textfluß verwendet werden. Wenn es eine eigenständige Struktur darstellen soll, ist die Struktur hingegen mit einem Blockelement zu realisieren, in welchem das Element img notiert wird.

Erforderlich sind die Attribute src und alt. Optional sind die Attribute longdesc, width, height, name.

Bei einer verweissensitiven Graphik kommen die Attribute usemap und ismap noch hinzu, welche im Kapitel über verweissensitive Graphik erläutert werden und ohne diese Funktionalität ohne Belang sind.

Ferner können auch die allgemein verfügbaren Attribute verwendet werden.

Attribute src und alt

Mit dem erforderlichen Attribut src wird die Quelle (englisch source) des Bildes angegeben und zwar in Form einer URI entsprechend dem Wert von href des Elementes a, also auch je nach Bedarf relativ oder absolut. Die ausschließliche Verwendung eines Fragmentidentifizierers wird hingegen bei XHTML allein selten sinnvoll sein, weil XHTML selbst ja keine graphischen Inhalte bereitstellt. Ob ein Fragmentidentifizierer zusammen mit einer URI sinnvoll ist, hängt vom referenzierten Format ab und ist dort definiert. Dies kann zum Beispiel bei der Referenzierung von SVG-Dateien hilfreich sein. Detailliertere Informationen zu URIs sind beim Attribut href des Elementes a beschrieben und gelten entsprechend für src. Siehe Kapitel Verweise.

Zu beachten: Das Darstellungsprogramm wird das referenzierte Dokument fast immer ohne vorherige Nachfrage beim Nutzer von der angegebenen Quelle zu laden versuchen. Bei der Referenzierung einer externen Quelle mittels absoluter URI gelangt so Information ohne Wissen des Nutzers auf den externen Dienstrechner. Hinsichtlich des Datenschutzes und der Privatsphäre des Nutzers ist dies bedenklich, folglich also besser zu vermeiden. Ist trotzdem eine externe Referenzierung erwünscht, ist im Sinne des Datenschutzes zuvor besser ein von dem Sachverhalt nicht betroffenes Dokument vorzuschalten, in welchem der Nutzer über das potentielle Datenleck informiert wird, sich damit also einverstanden erklärt, wenn das betreffende Dokument mit der externen Bildreferenz aufgerufen wird. Sofern das überhaupt getan wird, sollte den Nutzern eine lokale Alternative bereitgestellt werden oder jedenfalls eine Variante des Projektes, welche auf derartige externen Quellen verzichtet, Nutzer also frei entscheiden können.
Üblich sind etwa derartige externe Bilder als sogenannte Zählpixel, Anmeldungs- oder Abstimmungsknöpfe, beliebt auch in Zusammenhang mit Anbietern wie Facebook oder Google, um Informationen über Personen zu sammeln und kommerziell zu nutzen.

Etwa bei Bewerbungen, Anhängen an elektronische Post und sonstigen Anwendungen, wo alles in einem Dokument vorhanden sein soll, bietet sich besonders die Verwendung des Pseudoprotokolls 'data' in src an. Im lokalen Dateisystem oder bei Verwendung von Netzdiensten ist es hingegen sinnvoller und effektiver, die einzubettenden Dokumente als eigenständige Dokumente zu belassen und einfach nur zu referenzieren. Bei kleinen Logos oder Piktogrammen, die untrennbar mit einem Dokument verbunden sein sollen, kann es sich allerdings auch lohnen, 'data' zu verwenden.

Mittels alt wird ein Alternativtext angegeben. Das ist so zu verstehen, dass dieser Text und das per src referenzierte Dokument jeweils alternativ zueinander verwendet werden können, je nach Präferenz des jeweiligen Lesers. Kann ein Leser etwa aufgrund von Sehschwäche oder Erblindung oder auch nur wegen Beschäftigung mit anderen Dingen keine graphische Repräsentation wahrnehmen, so ersetzt der Alternativtext das Bild, weswegen dieser entsprechend zu formulieren ist. Im normalen Textfluß ersetzt der Alternativtext das Bild also so, dass der Textfluß nicht unterbrochen wird. Der Wert ist also einfacher, kurzer Text. Für epische Erklärungen, die nicht in den Textfluß passen, wird dann zusätzlich das optionale Attribut longdesc notiert, siehe dort.

In diesem Sinne sind rein dekorative Bilder, die inhaltlich irrelevant sind, mit alt="" zu versehen, in der alternativen Darstellung werden die dann einfach weggelassen.

Jedenfalls wird generell als Alternative notiert, was das Bild in Kontext repräsentiert, nicht notwendig, was darauf im Detail dargestellt ist, wenn dies zum Verständnis im Textfluß belanglos ist.

Da der Alternativtext nur als Attributwert notiert werden kann und es mit img auch nicht möglich ist, verschiedene Formate alternativ zueinander anzubieten, kann das Konzept von img als sehr eingeschränkt betrachtet werden. Ein allgemeinerer Ansatz ist mit dem Element object möglich, welches stattdessen verwendet werden kann, besonders dann, wenn Alternativen angeboten werden sollen, die über die Möglichkeiten von img hinausgehen. Siehe Kapitel Objekte.

Beispiel:

<p>Dem Gerücht nach glaubten viele Menschen zu früheren Zeiten, 
die Erde sei eine 
<img src="ErdeAlsScheibe.svg" alt="Scheibe" />.
Durch einfache Messungen und Experimente verbreitete sich dann jedoch die Überzeugung, 
die Erde sei eine <img src="ErdeAlsKugel.svg" alt="Kugel" />.
Aufgrund der Rotation der Erde um die eigene Achse ergaben genauere Messungen jedoch, 
dass es sich bei der Erde eher um einen 
<img src="ErdeAlsRotationsellipsoid.svg" alt="Rotationsellipsoid" /> 
handelt.
Bei sehr schneller Drehung würde man wieder nahe an die Idee einer Scheibe kommen, 
bei der man am Rande vermutlich wegfliegen würde.
Genauere Untersuchungen der Massenverteilung des Erdkörpers 
mit Satelliten haben eine weitere Verfeinerung
der Erkenntnis ergeben, demnach ist die Erde eher 
<img src="ErdeAlsKartoffel.svg" alt="kartoffelig" />,
also von unregelmäßiger Form.
</p>

Oft findet sich auch ein Szenario ähnlich dem folgenden:
Bertine hat einen altruistischen Tag und möchte die Menschheit mit ihren leckeren Rezepten von Gebäck beglücken, welches nicht nur Spuren von Nüssen enthält.
Damit das nicht zu trocken gerät - also die Seite, bezüglich des Gebäcks finden sich Hinweise im Rezept - ist die Idee, diese mit einem graphisch gestalteten Titel oder Kopfbereich auszustatten. Bertine kann da nun verschiedene Konzepte verfolgen.

Zum einen kann sie die Graphiken rein dekorativ zusätzlich zum Texttitel verwenden:

<h1><img src="Bilder/Nuesse.jpg" alt=""/>
Bertines Nußecke
<img src="Bilder/Florentiner.jpg" alt=""/></h1>

Als Logo oder Erkennungsmerkmal (neudenglisch auch: "Allein Stellung's Merk mal" ;o) kann sie aber auch gezielt eine Graphik verwenden wollen, die sie selbst in einer Nußeckenverkleidung zeigt, um sich auf dem Markt der Nußeckenrezeptanbieter zu etablieren oder den eigenen Marktanteil auszubauen, sozusagen die Konkurrenz auszustechen wie ein Plätzchen:

<h1><img src="Bilder/Nussbertine.jpg" alt="Willst Du Nußgebäck backen, gucke in"/>
Bertines Nußecke
<img src="Bilder/Nussbertine.jpg" alt="nach den köstlichsten Rezepten!"/></h1>

Dies kann den Vorteil haben, dass Menschen, die über Suchmaschinen mit entsprechenden Suchwörtern nach irgendwelchen Nußgebäckrezepten gucken, ziemlich weit oben in der Ergebnisliste auf Bertines Seite stoßen, während zum Beispiel ihr Konkurrent Horst lediglich 'Horsts Nüsse' angegeben hat und dazu eine aufwendige Graphik, welche er von einem Kumpel mit einem kommerziellen Graphikprogramm extra hat erstellen lassen, deren Inhalt aber von Suchmaschinen ignoriert wird, weswegen er gar nicht in der Ergebnisliste auftaucht und sich nur in sehr engem Kreis an seinen Nußgebäckrezepten erfreuen kann. (Der enge Freundeskreis besteht zudem aus neuen Freunden aus dem Netz, deren spezifische Präferenzen Horst erst später offenbar werden...)

Bertine als künstlerische Offenbarung der Nußgebäck-Bäckerei mag allerdings auch den kompletten Namen ihres Projektes mit Mandeln etc gebacken bekommen haben. Davon hat sie ein schönes Bild angefertigt, welches als Dokumenttitel dienen soll:

<h1><img src="Bilder/BertinesNussecken.jpg" alt="Bertines Nußecken"/></h1>

oder entsprechend

<h1><img src="Bilder/BertinesNussecken.jpg"
  alt="Willst Du Nußgebäck backen, gucke in
       Bertines Nußecke
       nach den köstlichsten Rezepten!"/></h1>

Oftmals will ein Autor Bilder nicht direkt in den normalen Textfluß integrieren. Als eigenständige Struktur ergibt es hingegen meist eher Sinn, auch den Alternativtext eigenständiger zu fassen:

<p>
<img src="TimmUlrichsAugenlid.png" 
     alt="Portrait von Timm Ulrichs mit geschlossenem rechten Augenlid,
          auf welchem die Tätowierung 'The End' zu lesen ist." />
</p>

Redundant sind hingegen Hinweise auf Größe, Name oder sonstige technische Eigenschaften der referenzierten Datei, weil dies in der Regel keine Textalternative zum Bild darstellt, es sei denn, diese Informationen sind gerade zentraler Bestandteil der Bildinformation. Somit wäre für obiges Beispiel alt="Bild TimmUlrichsAugenlid.png, 600x400, 50kB" also keine sinnvolle Alternative, wenn nicht der Text "Bild TimmUlrichsAugenlid.png, 600x400, 50kB" zentraler Inhalt der graphischen Repräsentation des Bildes ist, was meistens nicht der Fall sein wird. Dass es sich um ein Bild handelt, ist übrigens bereits durch den Namen des Elementes img klar, sollte also nicht im Alternativtext auftreten.

Problematisch wird es bei dem Alternativtext, wenn eine Textbeschreibung eine in dem Zusammenhang ungewünschte Interpretation des Bildinhaltes implizieren würde. Dies wäre etwa bei einem Rohrschachtest der Fall oder vielleicht auch bei einem Kunstwerk, Gemälde oder einer Abbildung desselben, welches dem Leser zur eigenen Interpretation angeboten werden soll. In dem Falle kann es sinnvoll sein, als Textrepräsentation Angaben zum Titel des Bildes und zum Künstler zu machen, also Informationen, die es dem Leser ermöglichen, im Bedarfsfalle anderweitig verfügbare Informationen über das Dargestellte zu suchen.

Beispiel:

<p>
<img src="MonaLisa.jpg" 
     alt="Gemälde 'Mona Lisa' von Leonardo da Vinci, 
          entstanden um 1503." />
</p>

Dies kann auch allgemeiner dann ein hilfreiches Vorgehen sein, wenn das Bild zusätzlich zu vorhandenem Text angeboten wird, der das Bild ausführlich diskutiert und interpretiert - ohnehin vorhandener Text oder Offensichtliches sollte also nicht wiederholt werden. Wenn das ganze Dokument sich also mit der Mona Lisa beschäftigt und Angaben zum Künstler und Inhalt ohnehin bereits vorhanden sind, ist es zweifelsohne in Ordnung, nur alt="Gemälde 'Mona Lisa'" zu notieren. In diesem Falle handelt es sich wirklich um das Bild eines Gemäldes, nicht um das Gemälde selbst, daher ist der Begriff 'Gemälde' eine relevante Information.

In einer Bildergalerie über Schmetterlinge zum Beispiel ist es nicht unbedingt notwendig, implizit ohnehin eindeutige Zusammenhänge zu erläutern. Wenn es etwa im kompletten Dokument nur um Schmetterlinge geht, ist dem Leser ziemlich klar, was dargestellt ist, wenn nur notiert wird: alt="Kleiner Fuchs".
Ist allerdings eine spezifische Relation oder Aktion dargestellt, kann es nützlich sein, diese zu erwähnen: alt="saugender Kleiner Fuchs auf Sonnenhut bei Sonnenuntergang".
Beschäftigt sich die Seite hingegen auch mit anderen Tieren, kann es sinnvoller sein, alt="Kleiner Fuchs (Schmetterling)" zu notieren, wenn die Tierart nicht ohnehin aus dem umgebenden Textfluß eindeutig hervorgeht.

Eine weitere Variante ergibt sich etwa bei einem Künstler, welcher (abstrakte) eigene Bilder in einer Galerie ausstellt, welche die Werke ihm eindeutig zuordnet und nach Möglichkeit auch etwas begleitenden Text enthält. Er mag den Bildern keine Namen geben, die die Interpretation einschränken könnten, daher verwendet er ein ebenfalls abstraktes System zur Benennung, etwa mit Schaffensperiode, Datum und Variante. Der Begleittext der Galerie erläutert auch grob das Konzept der Titelfindung.

Der Titel des Bildes sei also zum Beispiel 'PRW 2009-07-13.V17':

<p>
<img src="PRW/B2009-07-13V17.svg" 
     alt="PRW 2009-07-13.V17" />
</p>

Als multimedialer Künstler wird er vermutlich ohnehin innerhalb der SVG-Datei eine ausführliche Textalternative notiert haben, die einem eigenständigen Kunstwerk gleichkommt und als Textvariante zusätzlich zum graphischen Werk verstanden werden kann. Wenn ein Format wie SVG also ohnehin eine eigene Möglichkeit für Textalternativen bietet und diese genutzt wird, ist eine Wiederholung auch redundant und ein minimalistischer Wert für alt kann ausreichen.

Beispiel als Separator:

<p class="Stilvorlagenmenue">Verfügbare alternative Stilvorlagen:
<a href="?s=DagaSu">Daga su</a><img src="s.png" alt="," />
<a href="?s=urduFaT">urdu FaT</a><img src="s.png" alt="," />
<a href="?s=BB">Bunga Bunga</a><img src="s.png" alt="," />
<a href="?s=nix">kein CSS</a>
</p>

(Wie solch ein Stilvorlagenmenü zum Beispiel mit XHTML, CSS und PHP realisiert werden kann, wird hier allerdings nicht erläutert, dies ist nur die XHTML-Ausgabe, mit der die Auswahl erfolgt.)

Das Trennzeichen wird hier mit einer einfachen PNG-Datei realisiert oder eben alternativ mit einem Komma. Vertikale Striche |, Sterne * werden auch öfter verwendet. Leider hat XHTML kein eigenes Element für solch einen inzeiligen Separator, was beim Vorlesen solcher Strukturen suboptimal sein kann, daher sind kurze Satzzeichen für Separatoren eine auch für Zuhörer erträgliche Alternative. Noch schlimmer kann es allerdings für den Nutzer kommen, wenn es aufgrund fehlender Separatoren unklar wird, wo der eine Verweis aufhört und der andere beginnt.

Während es zwischen Bild und Wert von alt einen alternativen Bezug gibt, das eine also nur dargestellt wird, wenn das andere nicht dargestellt wird, kann das Bedürfnis aufkommen, zusätzlich eine Kurzfinformation bei Bedarf anzugeben.

Wie bei anderen Elementen auch, wird dafür das Attribut title und nicht alt verwendet:

<p>
<img src="PRW/B2009-07-13V17.svg"
     alt="PRW 2009-07-13.V17"
     title="Tina meint, bei diesem Bild steppt der Bär bis das Parkett verdampft!" />
</p>

Bei graphischer Darstellung wird die Information von title typisch dann dargestellt, wenn ein Zeigergerät über Bild oder Alternativtext fährt. Ohne Zeigergerät oder graphische Darstellung ist der Zugang zu dieser Information natürlich stärker vom Darstellungsprogramm abhängig.

Attribute width und height

Beim Aufbau der graphischen Repräsentation eines Dokumentes gehen viele Darstellungsprogramme so vor, dass sie das Dokument bereits darstellen, während sie einzubettende Dokumente noch laden. Im Zweifelsfalle kann das nachgeladene Dokument aber die Anordnung der Inhalte wieder ändern, wenn es eingebettet wird. Um diesen Effekt zu vermeiden, gibt es die beiden Attribute width (Breite) und height (Höhe), mit welchen der Autor angeben kann, in welcher Größe das Bild dargestellt werden soll. Beim Seitenaufbau und gleichzeitigem Laden des Bildes kann so das Darstellungsprogramm erstmal eine Lücke lassen und dann das Bild dort nachträglich einfügen, sobald es verfügbar ist.

Obgleich die Attribute optional sind, ist dem Autor also zu empfehlen, die Attribute zu verwenden. Wird eines der Attribute nicht notiert, wird die im Bild angegebene Originalgröße verwendet. Ist im Bild selbst keine absolute Angabe vorhanden, kann das Verhalten undefiniert sein. Insbesondere im Zusammenspiel mit SVG kann es zu recht komplexen Regeln oder überraschenden Regelfindungen durch die Anbieter der Darstellungsprogramme kommen, wenn nur in der SVG-Datei prozentuale Größenangaben vorliegen. Was das bedeutet, ist in SVG recht präzise festgelegt. Da (X)HTML aber ein anderes Modell der Darstellung hat, ist es dort nicht unbedingt klar, was eine Höhe von 100% zu bedeuten haben mag, beziehungsweise dies kann von einer geeigneten Dimensionierung des Elternelementes mit CSS abhängen. Auch von daher ist eine eindeutige Angabe mittels width und height anzuraten, sofern im referenzierten Dokument keine Angaben sind, die in Bezug auf die Einbettung in ein (X)HTML-Dokument eine einfache und eindeutige Interpretation ermöglichen.

Der Wert ist jeweils eine Zahl als Angabe in Pixeln oder ein Prozentwert. Der Prozentwert bezieht sich auf die verfügbare Breite des Elternelementes, also width="80%" ergibt vier Fünftel der verfügbaren Breite. In der XHTML-Modul-Empfehlung findet sich auch die Angabe, eine height-Angabe bezöge sich auf die verfügbare Höhe, was bei reinem XHTML aber problematisch ist, weil sich dort wiederum bei den meisten Elementen die Höhe aus dem vorhandenen Inhalt ergibt. Bei einem Layout etwa mit CSS kann ein Autor natürlich in diversen Einheiten die Höhe und Breite festlegen. Dabei ist wiederum zu bedenken, dass ein CSS-Pixel nicht immer unbedingt einem Pixel auf dem Monitor entspricht.

In der Praxis zeigt sich, dass die Interpretation von Angaben in Prozent in gängigen Darstellungsprogrammen zumeist fehlerhaft implementiert ist. Von daher ist es ratsam, bei den beiden Attributen auf Angaben in Prozent zu verzichten. Die folgenden Beispiele und Erläuterungen, sofern sie Prozentangaben enthalten, beziehen sich wie immer in diesem Buch auf korrekte Implementierungen.

Beispiele:

<p>
<img src="PRW/B2009-07-13V17.svg" 
     alt="PRW 2009-07-13.V17" 
     width="75%" height="50%" />
</p>

SVG ist skalierbare Vektorgraphik, daher kann man es auch gut verwenden, um die Größe der Graphik an den verfügbaren Platz anzupassen. In der SVG-Datei sollten dann keine absoluten Größenangaben stehen, aber in der Regel eine viewBox. Sofern relevant, sollten dort allerdings Angaben gemacht werden, ob das Aspektverhältnis erhalten bleiben soll und wie der Ausschnitt angepaßt werden soll, wenn das Aspektverhältnis nicht zum notierten Anzeigebereich paßt.

<p>
<img src="Zitronenfalter.jpg" 
     alt="Zitronenfalter auf Zierdistel" 
     width="640" height="480" />
</p>

Dies ist die 'klassische' Variante für Pixelgraphik. In der Regel sollte hier auch die Originalgröße notiert werden. Ist eine kleinere Darstellung erwünscht, ist es besser, die Datei einfach entsprechend verkleinert bereitzustellen. Eine stark vergrößerte Darstellung gegenüber dem Original macht hingegen irgendwann störende Artefakte sichtbar, die auch bei der speziellen Kompression des Formates JFIF/JPEG recht schnell als optisch unschön auffallen. Bei anderen, rein pixelbasierten Formaten wie PNG oder GIF werden bei einer Vergrößerung Artefakte im Allgemeinen sofort sichtbar, die sind für Skalierungen also als komplett ungeeignet einzustufen.

Tipp: Bei Pixelgraphikformaten wie JFIF/JPEG, PNG oder GIF sind immer Größenangaben in der Datei vorhanden. Die Größe eines Bildes läßt sich mit den meisten Graphikprogrammen herausfinden.

Im Programm Paint (spezifisch für Microsoft windows) ist dies beispielsweise mit der Option "Bild" "Attribute" möglich. Entsprechend bieten allgemein verfügbare Programme entsprechende Informationen. Gimp etwa gibt die Größe des Bildes bereits in der Kopfzeile des Fensters an. Sogar die meisten graphischen Darstellungsprogramme zeigen diese Information bei Bedarf dem Betrachter an, manche sogar ganze Auszüge aus den gegebenenfalls ebenfalls vorhandenen EXIF-Daten des Bildes.

<p>
<img src="Regenbogenstrich.png" 
     alt="__________________" 
     width="100%" height="2" />
</p>

Der Strich soll über die komplette verfügbare Breite gehen und zwei Pixel hoch sein, hat inhaltlich die Funktion eines Trennzeichens. Alternativ könnte auch ein mit CSS gestaltetes Element hr verwendet werden, wenn die semantische Funktion der Trennung von Inhalt dominieren sollte und die graphische Repräsentation inhaltlich bedeutungslos ist.

<p>
<img src="Regenbogenstrich.png" 
     alt="__________________" 
     width="100%" />
</p>

Hier bestimmt sich die Höhe aus der PNG-Datei.

Attribut longdesc

Manchmal kann es zum Verständnis wichtig und hilfreich sein, den genauen Bildinhalt zu beschreiben. Es kann auch der Bedarf bestehen, weitere Informationen über das Bild bereitzustellen, welche nur optional für besonders interessierte Lesergruppen relevant sind. Für andere Lesergruppen könnten diese Informationen etwa offensichtlich sein, wenn das Bild dargestellt wird. Teils kann auch angenommen werden, dass viele Leser bereits über entsprechende Informationen verfügen, andere Gruppen diese aber zusätzlich benötigen könnten. Da das Attribut alt nur einfachen, kurzen, unstrukturierten Text enthalten kann, eignet sich dies für epischere Ausführungen zu einer Graphik nicht und deckt auch nicht den Fall ab, dass auch Leser mit Anzeige des Bildes Bedarf an mehr (Text-)Information haben könnten.

In dem Falle wird als Wert des optionalen Attributes longdesc die URI eines Dokumentes notiert, in welchem diese längere Information bereitgestellt wird. Es kann allerdings auch mit einem Fragmentidentifizierer auf eine Textpassage verwiesen werden, die diese Funktion übernimmt und zum Beispiel allgemein lesbar auf derselben oder einer anderen Seite zu finden ist. In solchen Fällen gewährleistet das Attribut, dass der eindeutige Bezug zwischen Text und Graphik nicht verlorengeht, wenn etwa aufgrund der fehlenden Bilddarstellung die Anordnung der Inhalte anders ist oder es etwa beim Zuhören sonst schwierig würde, genau zu erkennen, wie die Bezüge im Dokument sind, wenn es nur vorgelesen wird.

Wie das Darstellungsprogramm Zugang zum referenzierten Dokument oder Fragment realisiert oder auch nur zur Kenntnis bringt, dass eine solche Verweisrelation zu weiteren Informationen vorliegt, ist nicht präzise festgelegt. Leider gibt es da auch bei einigen gängigen Darstellungsprogrammen Implementierungslücken. Bei weniger kundigen Lesern mag auch der Mechanismus nicht bekannt sein, wie solche Verweise aufgerufen werden. Diese Zugänglichkeitsprobleme treffen eher Nutzer von graphischen Darstellungsprogrammen als solche, die gar keine Bilder darstellen lassen. So oder so ist der Zugang zu dieser Information aber bei Bedarf für alle Nutzer gedacht, ergänzend zum referenzierten Bild und dem Alternativtext, nicht etwa nur alternativ zum referenzierten Bild.

Beispiele:

<p>
<img longdesc="PRW/InterpretationenVonTina.xhtml#B2009-07-13V17"
     src="PRW/B2009-07-13V17.svg" 
     alt="PRW 2009-07-13.V17" 
     width="800" height="800" />
</p>

Hier wird also auf ein Fragment auf einer anderen XHTML-Seite verwiesen. Hat der Künstler etwas Relevantes direkt im SVG etwa im Element desc mit Fragmentidentifizierer 'info' notiert, kann er natürlich auch einfach schreiben:

<p>
<img longdesc="PRW/B2009-07-13V17.svg#info"
     src="PRW/B2009-07-13V17.svg"
     alt="PRW 2009-07-13.V17" 
     width="800" height="800" />
</p>

Damit ist dann bereits explizit im XHTML-Dokument klargestellt, dass die SVG-Datei eine relevante Beschreibung der graphischen Repräsentation enthält.

Der Bezug auf eine Passage mit Fragmentidentifizierer 'MonaLisa' im selben Dokument:

<p>
<img longdesc="#MonaLisa"
     src="MonaLisa.jpg" 
     alt="Gemälde 'Mona Lisa'" />
</p>

Attribut name

Das Attribut name wurde nur aus Gründen der Rückwärtskompatibilität zu älteren Formaten definiert. Heute sollte stattdessen nur noch das Attribut id verwendet werden. name hat ansonsten die gleiche Funktion und den gleichen Wertebereich. Entsprechend sollten auch nicht beide bei einem Element mit verschiedenen Werten notiert werden. Es darf auch kein Wert für name mit einem Wert notiert werden, der bereits anderweitig in selben Dokument für id oder name bei einem anderen Element notiert ist.

Bildformate

Vektorgraphik	Rastergraphik

Vektorgraphiken lassen sich ohne Qualitätsverlust beliebig skalieren.

XHTML fordert nicht, dass ein Darstellungsprogramm auch nur irgendein Bildformat darstellen können muß - wegen der Möglichkeit, Alternativtext stattdessen anzuzueigen, ist dies ja auch nicht notwendig für das Verständnis des Inhaltes eines Dokumentes.

Die häufigsten Pixelgraphik-Formate, die auch jedes graphische Darstellungsprogramm unabhängig vom Betriebssystem darstellen kann, sind PNG (image/png; Dateiendung: .png), JFIF/JPEG (image/jpeg; Dateiendungen: .jpg, .jpeg, .jpe), GIF (image/gif, Dateiendung: .gif) und Windows Bitmap (Kein offizieller Inhaltstyp, experimentell: image/x-bmp oder image/x-ms-bmp; Dateiendung: .bmp). Für das World Wide Web sind die Formate JFIF/JPEG und PNG am gängigsten.

JFIF/JPEG wird eher für Photographien verwendet, PNG dagegen für Graphiken, welche mit verlustfreier Kompression gespeichert werden sollten. Besonders bei größen Kontrasten wie etwa schwarzen Linien auf weißem Grund neigt die Kompression von JFIF/JPEG zu Artefakten in der Darstellung, was dieses Format dann für solche Computergraphik schlecht geeignet macht. Die Farbverläufe in Bildern von Digitalkameras eignen sich hingegen meist recht gut für die verlustbehaftete Kompression mit JFIF/JPEG. Allerdings beinhaltet die meist verwendete und lizenzfreie Variante JFIF/JPEG von JPEG keine Möglichkeit für transparente Teile. PNG hingegen beinhaltet auch die Darstellungen von teiltransparenten Bereichen.

GIF ist ein recht altes Format mit nur maximal 256 Farben pro Bild, eine davon kann optional als komplett transparent deklariert werden. Dank einer Erweiterung der Firma netscape kann damit auch ein einfaches Video ohne Ton (meist etwas irreführend GIF-Animation genannt) weitgehend korrekt und einheitlich in den gängigen graphischen Darstellungsprogrammen dargestellt werden. Da die Kompression allerdings relativ schlecht ist, sind für bewegte Bilder richtige Videoformate eher geeignet und für Animation von Computergraphik eher SVG.

Das Bildformat Bitmap ist für die Verwendung im Netz eher schlecht geeignet. Die Bilder werden praktisch nicht komprimiert. Daher benötigen Bilder in diesem Format extrem viel Speicherplatz, was zu langen Ladezeiten führt. Des weiteren werden Dateien im ICO-Format (.ico) von allen gängigen graphischen Darstellungsprogrammen angezeigt, wobei ICO-Dateien wiederum eine Kombination verschiedener Icon-Graphiken sind (meist in den Formaten PNG oder Bitmap).

Bei allen zuvor genannten Graphikformaten handelt es sich um Raster- oder Pixelgraphiken. Diese Graphiken werden in einer bestimmten Größe abgespeichert und können nur mit Einschränkungen skaliert werden (Verlust der Bildschärfe, Auftreten von Artefakten der Digitalisierung). SVG (image/svg+xml; Dateiendung unkomprimiert/komprimiert: .svg, .svgz) als vektorbasiertes Graphikformat setzt sich dagegen immer mehr für Computergraphik, auch animierte und interaktive Graphik durch und wird derzeit von allen graphischen Darstellungsprogrammen in der jeweils neuesten Version angezeigt - allerdings mit deutlich mehr Lücken und Fehlern als beim deutlich einfacheren Format XHTML. Das ist der Stand von 2012, tatsächlich können einige Darstellungsprogramme SVG schon seit 2005 oder gar noch früher eigenständig darstellen, also auch in relativ alten Versionen.

Vektorgraphiken lassen sich ohne Verluste auf jede Größe skalieren und eignen sich daher besonders gut für die Anzeige von Grafiken auf verschiedenen Ausgabegeräten mit diversen Bildschirmgrößen, beziehungsweise Auflösungen. Bei kleinen Strukturen ergeben sich dabei natürlich Einschränkungen der Nützlichkeit der Skalierung durch die Auflösung des verwendete Darstellungsgerätes und des betrachtenden Auges bei gegebenem Betrachtungsabstand. Bei einer Vergrößerung kommt es natürlich zumeist auch schnell zu Leervergrößerungen. Das bedeutet, das Bild wird zwar ohne Qualtitätsverluste vergrößert dargestellt, es offenbaren sich aber nicht mehr Details, wenn sie der Autor nicht für diese Maßstäbe im Dokument realisiert hat.

Zur Darstellung von Photos jedoch sind Vektorgraphiken allein ungeeignet. Für künstlerische Zwecke ist die mit der Vektorisierung meist einhergehende Abstrahierung oft aber ohnehin erwünscht, entsprechend gibt es allgemein verfügbare Programme wie Potrace (auch gleich in Gimp eingebaut), die eine solche Vektorisierung nach verschiedenen Gesichtspunkten erlauben. Ferner bietet SVG durch fortgeschrittene Methoden der Filterung, Überblendung und Maskierung, der deklarativen Interaktion und Animation auch bei der Darstellung von Rastergraphiken mehr Möglichkeiten als diese Formate allein. Insbesondere die Formate JFIF/JPEG und PNG müssen von SVG-fähigen Darstellungsprogrammen in SVG-Dokumenten interpretiert werden. Eine Kombination, Einbettung in SVG eignet sich also ausgezeichnet für entsprechende Manipulationen der Rastergraphik.

Einer der größten Vorteile von SVG ist jedoch, dass bei diesem Format aus der XML-Familie Alternativtexte direkt als Text im Dokument angegeben werden können. Der Autor wird damit also mit einfachsten Mitteln wie einem einfachen Texteditor in die Lage versetzt, zugängliche und barrierefreie Graphik samt Interaktion und Animation zu realisieren. Dafür bietet SVG dem Autor zahlreiche eingebaute Funktionalitäten, um die Zugänglichkeit gleich bei der Entstehung und untrennbar vom Dokument einzubauen.

Es gibt auch ein Wiki-Buch zu SVG, in welchem mehr über dies Format und über die Erstellung von Dokumenten zu finden ist.

Die Einbindung von SVG ist bei alten Darstellungsprogrammen wie etwa dem von Microsoft angebotenen Internet Explorer bis Version 8 nur mit zusätzlichen Hilfsmitteln möglich.

Zurück zu Verweise | Hoch zu XHTML | Vor zu Objekte