Responsive Images: Ladezeit sparen mit Vektorgrafiken (SVG)

Dieser Artikel ist ursprünglich am 05. 11. 2012 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

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

4 Kommentare zu “Responsive Images: Ladezeit sparen mit Vektorgrafiken (SVG)

  • Ich hab in meinem Blog auch mein „Logo“ als SVG eingebunden. Bin mit der Lösung aber nicht wirklich zufrieden, da sich die Positionierung als kompliziert heraus gestellt. Da ich in der SVG-Grafik mit festen Werte arbeiten musste (Schriftgrößen passend zueinander), lässt es sich nicht mehr einfach skalieren und anpassen. Es verhält sich nicht wie ein normales Bild und damit wird die Handhabung, in einem Fluid-Layout, schwierig.

  • Das Codefragment hat bei mir alles zerschossen. Erst nach dem Rauslöschen funktionierte die Seite wieder.

    • Hallo, Sophie,

      ich bitte um Entschuldigung. Mea culpa.
      Mit den Code-Schnipseln hier im Blog gibt es immer wieder Probleme, WordPress verändert gerne selbsttätig Teile in einkopiertem Code. So etwas wird als potenziell gefährlich eingestuft. Ich habe noch keine überraschungsfreie Lösung für das Problem gefunden.

      Der Artikel ist korrigiert. Der Schnipsel bei Chris Coyier sollte funktionieren!

      Schöne Grüße

      von Kirsten

  • Grüß Dich Kirsten
    ich fand dich auf G+ und stöbere mich nun durch euren Webauftritt ;)
    „Überraschungsfreien Code“ schaff ich mit php exec und dem Plugin WP-Syntax. Und ich habe den TinyMCE bei mir überall deaktiviert, das hilft auch ungemein.
    Und ja eine SVG Grafik einbinden ist eine irre Frickelei ;). Da benutz ich lieber jpegmini.com. komprimiert verlustfrei und bis dato hatte ich noch keinen Kunden, der auch nur annähernd bereit war in seiner sehr alten Website mit tausenden von Beiträgen und ebensovielen Bildern, diese alle zu ändern, damit sie korrekt auf den verschiedenen neuen Displays angezeigt werden. ;). Für ganz neue Projekte ansehenswert.
    lg Monika

Die Kommentare sind geschlossen.