Tipps & Tricks zu Webgrafiken

Zu Neu bebildert von Herbert Braun in c't 22/07

Zurück zu heb@ct

Bilder per CSS

Text über Hintergrundgrafik, die sich nicht wiederholt

Hier ein Link und da ein Link, die mit CSS-Pseudoklassen markiert sind (funktioniert nicht in IE)

Ein Absatz mit Pfeilchen, die Text durch CSS-Hintergrund markieren.

Per CSS eingebundene Grafiken als Listensymbole:

Inline-Bilder

Ein per JavaScript eingebundenes Inline-Bild (funktioniert nicht in IE): Kunstwerk
... und hier nochmal: Kunstwerk

PNG8

Unter der halbtransparenten Grafik schimmert Text durch.

Würfel

Ein Haufen Text als Unterlage für ein nur 14 KByte großes halbtransparentes 8-Bit-PNG-Bild: Dass mit PNG ein drittes Web-Bildformat neben JPEG und GIF getreten ist, dürfte sich herumgesprochen haben. Die Verbreitung des Formats lässt allerdings zu wünschen übrig: Im kollektiven Gedächtnis haben sich die Halbwahrheiten eingeprägt, dass PNG deutlich mehr Platz braucht als JPEG und dass Internet Explorer irgendwie Probleme damit hat. Für Web-Fotos bringt PNG tatsächlich wenig, denn das Format geht schonender mit dem Ausgangsmaterial um (in der Regel sind PNGs verlustfrei komprimiert), sodass die Dateigröße mit JPEGs nicht mithalten kann. Dafür gibt es allerdings auch keine Artefakte bei scharfen Kanten, etwa bei Screenshots.

Einbinden per object-Tag

Ein mit object eingebundenes Bild:
Ihr Browser kann das Objekt leider nicht anzeigen!
Möglicherweise versucht Internet Explorer, das PNG-Bild mit einem Plug-in zu öffnen, weil er sich für den MIME-Typ image/png nicht zuständig fühlt.

Eine standardkonform eingebundene Flash-Animation:
Flash-Grafik kann nicht angezeigt werden!

SVG/Silverlight

Ein eingebundenes SVG-Bild, das Internet Explorer per XSLT in Silverlight konvertiert:

Das Format dieser Vektorgrafik ist SVG.