Bilder sind ein wichtiger Bestandteil der meisten Webseiten. Sie zeigen das Produkt, veranschaulichen Funktionen oder erzeugen eine gewisse Atmosphäre. Ganz auf Bilder zu verzichten möchten daher die wenigsten, dabei zählen gerade diese zu den Elementen, die Ladezeiten stark verschlechtern und auch hohe Emissionen verursachen. Doch es gibt eine klimafreundliche Alternative, SVGs!
Was ist SVG
Während Bilddateien wie PNGs oder JPEGs Pixelinformationen speichern, verwenden SVGs Pfad und Formdaten. Das führt dazu, dass die Dateigrößen sich zwischen den Dateitypen stark unterscheiden können. SVGs können jedoch nicht für Fotos genutzt werden, da diese nur digital gezeichnete Illustrationen und Icons unterstützen, die Pfadinformationen nutzen.
Vergleich Illustrationen
Für unser Beispiel haben wir eine detailreiche Illustration gewählt. Diese steht uns als SVG und PNG (2000px mal 2000px) zur Verfügung. Solche großen Bilddateien sollte man auf die gewünschte Größe zuschneiden, um Ressourcen zu sparen. Für unsere Analyse haben wir jedoch die Originaldatei genutzt, da dieser Schritt von vielen Webdesigner häufig übersprungen wird. Die Bilddatei ist mit stolzen 530KB um einiges größer als die SVG Variante mit nur 97KB und somit knapp fünfeinhalbmal kleiner. Selbst im komprimierten Zustand ist die PNG Datei mit 146KB (-73%) noch mehr als doppelt so groß wie die SVG Datei mit 58KB (-39%). Die Darstellungsgröße hat bei dem SVG keine Auswirkung, jedoch könnte man die Illustration auch kleiner darstellen, beispielsweise auf 500px. Dabei würde die Bilddatei wieder mit dem SVG mithalten können.
Vergleich Icons
In der Praxis werden SVGs häufig für Icons genutzt. Aber auch hier findet man auf so mancher Webseite PNG-Alternativen. In diesem Vergleich haben wir ein Icon in der Größe von 512px mal 512px mit der SVG Variante verglichen. Dabei ist die PNG Variante sowohl unkomprimiert (9KB), als auch komprimiert (4KB) vierzehnmal so groß wie die SVG Datei (0,625KB/0,281KB). Gerade bei Menü-Icons, die oft auf detailreiche Darstellungen verzichten, sind SVGs ein klares Muss.
Grundsatz bei der Wahl zwischen SVG & PNG
SVGs können keine Fotos darstellen, sondern nur digital gezeichnete Illustrationen und Icons. Daher bleibt bei realistischen Bildern gar keine Alternative zu pixelorientierten Dateiformaten, wie PNG oder JPEG.
Zusätzlich macht es für SVGs einen großen Unterschied, wie detailreich die Darstellung ist. Je mehr Formen, Farben und Linien, um so größer die Datei. Bei Icons werden meisten einfache Formen genutzt, was SVGs deutlich besser abschneiden lässt. Am besten geben Sie Ihre Illustrationen in beiden Formaten aus und vergleichen die Dateigrößen.