Webseiten im Responsive Design haben einen schlechten Ruf, wenn es um die Performance geht. Nicht ganz zu unrecht, viele Seiten sind sehr datenlastig. Das liegt in der Regel an den Bilddaten, die auch auf hochauflösenden Displays gut aussehen sollen.

Es gibt vier einfache, aber sehr wirkungsvolle Methoden, Bilddaten schlank zu halten. Die Stichwörter dazu sind eine gute Bildkompression, CSS3-Effekte*, Iconfonts und das SVG-Grafikformat. SVG ist die Abkürzung für „Scalable Vector Graphics“.
[* Ein Artikel dazu erscheint demnächst]

Pfade statt Pixel

SVG ist ein Vektorformat. Das heisst, das Bild setzt sich nicht aus vielen Pixeln zusammen, sondern die Bildinformation ist in Pfaden gespeichert. Damit lässt sich das Bild stufenlos vergrößern und verkleinern.
Ganz gleich, wie groß ein SVG-Bild ist, die Dateigröße ist immer dieselbe. Und es ist auch unerheblich, welche Auflösung ein Display hat, eine SVG-Grafik wird immer knackig scharf dargestellt.

Ein pixelbasiertes Format, wie zum Beispiel ein jpeg-Bild, ist dagegen an eine Größe gebunden. Ein gepixeltes Bild kann man zwar verkleinern, aber nicht vergrößern. Dazu müsste man nämlich Pixel dazudichten. Die FBI-Spezialisten im Kino können das natürlich, in der Realität ist das nicht machbar.

Welche Bilder eignen sich für SVG?

Für das SVG-Format eignet sich im Prinzip jedes Bild, das kein Foto ist. Alle Grafiken und Logos können als SVG-Datei abgespeichert werden. Allerdings kennen nicht alle Programme svg als Exportformat. Für Adobe Fireworks gibt es eine Erweiterung, die unter anderem den SVG-Export bereitstellt: „Export Commands“ von Aaron Beall.

Seit Firefox 4 und Internet Explorer 9 wird SVG von allen Browsern unterstützt. Opera, Chrome und Safari sind auch mit dabei. Für ältere IE-Versionen sollte man eine png-Datei als Fallback hinterlegen.

SVG und WordPress

Versucht man, eine SVG-Datei über die Mediathek hochzuladen, bekommt man eine Fehlermeldung. Das Problem kann man aber recht einfach lösen.

Ein Codeschnipsel in der functions.php erlaubt den Upload von SVG-Formaten in die WordPress-Mediathek:
siehe Snippet bei css-tricks.com