Wenn ihr Bilder in einem Grafikprogramm abspeichert, werden ganz verschiedene Grafikformate angeboten. Welches davon soll man aber wählen, wenn es um darum geht, das Bild in eine Webseite einzubinden?



Will man auf seiner Webseite ein Bild präsentieren, hat man die Wahl zwischen drei Formaten.

• GIF

• JPEG

• PNG

Welches Format wählt man aber für welchen Einsatzzweck? Nimmt man für Fotos lieber GIF oder PNG? Zunächst ein kurzer Überblick über die Fähigkeiten der einzelnen Formate.

Diese kleine Übersicht zeigt bereits die unterschiedlichen Eigenschaften der Formate. Da verwundert es natürlich wenig, dass sich bestimmte Formate für einzelne Einsatzzwecke besser eignen als andere. Genau an diesem Punkt setzt der folgende Abschnitt an. Dort wird gezeigt, wann man am besten welches Format einsetzt.

Fotos

Keine Frage, für Fotos setzt man JPEG ein. Denn hierin lassen sich Bilder sehr gut komprimieren, wobei die Qualität variabel gewählt werden kann. Man findet hier die richtige Balance zwischen Qualität und Kompressionsrate.

Screenshots/Diagramme

Hierfür eignet sich das PNG-Format am besten. Interessant ist PNG auch für technische Zeichnungen, Grundrisse usw. PNG kann außerdem bei Bildern verwendet werden, bei denen man mit transparenten Bereichen arbeitet.

Schriften/Logos

Wenn ihr in eurem Logo Text stehen habt oder überhaupt Schrift darstellen wollt, solltet ihr GIF oder PNG verwenden. Aufgrund der besseren Performance greift man jedoch üblicherweise zu PNG. JPEG ist für die Darstellung von Schriften jedenfalls ungeeignet, da die Ränder unsauber angezeigt werden.

Transparenz

Wenn es um die Darstellung transparenter Bereiche geht, scheidet JPEG vor vorneherein aus. Übrig bleiben also GIF und PNG. Welches dieser beiden Formate verwendet man aber nun, wenn es auf die Transparenz ankommt? GIF kann prinzipiell zwar mit Transparenz umgehen, die Ergebnisse sind aber meistens unsauber. Ein Pixel kann im GIF-Format nämlich entweder nur vollständig sichtbar oder aber eben vollständig transparent sein. Bei PNG tritt dieses Phänomen nicht auf. Dieses Format besitzt einen zusätzlichen Alphakanal, dank dem feinere Transparenz-Ergebnisse erzielt werden.

Bilder einbinden

Grafiken lassen sich über das img-Element einbinden. (Beachtet bitte, dass Bilder mittlerweile sehr oft über CSS eingebunden werden. Ausführliche Informationen zu CSS folgen natürlich noch. Der gezeigte HTML-Weg ist aber völlig standardkonform und kann auch in HTML5 bedenkenlos genutzt werden.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Das, was in die Zwischenablage geladen wird, sollte im Endeffekt so aussehen:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Hierbei handelt es sich also um die vollständige Adresse des Bildes. Diese Information genügt bereits, um das Bild einzubinden.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Das Problem an diesen absoluten Pfaden ist aber letztendlich, dass man keine wirkliche Kontrolle über den eingebundenen Inhalt hat. Wird die von euch referenzierte Grafik also vom Server gelöscht oder dort in ein anderes Verzeichnis verschoben, gibt es einen Anzeigefehler.





Daher sollte dieses absolute Referenzieren tatsächlich die Ausnahme sein.

Absolute Pfadangaben relativ zur Basis-Adresse

Diese Variante bietet sich immer dann an, wenn die Grafik auf dem gleichen Rechner/Server wie die HTML-Datei liegt und über das aktuelle Protokoll erreichbar ist. Das klingt kompliziert, ist es aber nicht.

Ein Beispiel:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dabei handelt es sich um die vollständige Adresse. Der folgende Teil ist dabei die absolute Pfadangabe.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Diese absolute Pfadangabe bezieht sich relativ auf die Basis-Adresse http://4eck-media.de.

Relative Pfadangaben relativ zur Basis-Adresse

src="images/logo.png"

Wie würde das Ganze aber aussehen, wenn sich das Bild in einem Verzeichnis befindet, das oberhalb der HTML-Datei liegt?

projekt
--images
-----logo.png
--archiv
-----index.htm

In diesem Fall liegt die index.htm ein Verzeichnis unterhalb des einzubindenden Bildes logo.png.

src="../images/logo.png"

Die Syntax bedeutet hier also: Gehe eine Ebene nach oben, wechsle dort in das Verzeichnis images und zeige die logo.png an.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

Hier sieht die Syntax so aus:

src="../../images/logo.png"

Das Bild logo.png liegt in diesem Fall zwei Ebenen oberhalb der index.htm im Verzeichnis images.

Der Vorteil der relativen Pfadangaben ist deren Flexibilität. Ihr könnt so beispielsweise das Projekt lokal entwickeln und dann auf einen "echten" Server kopieren. Die Pfade stimmen danach unverändert.