Webdesign mit Vektorgrafiken: Fluch oder Segen?

Flexibilität ist gefragt!

Im Web hat sich während des letzten Jahrzehnts vieles grundlegend verändert. Vergleicht man heutige Webseiten mit denen von vor 10 Jahren, dann wird neben dem offensichtlich grundverschiedenen Webdesign eine besondere Eigenschaft deutlich: Die Flexibilität, mit der sich die Seitenelemente automatisch an verschiedene Browser-Größen und Monitore anpassen. Lange waren Webseiten und deren Bilder statisch aufgebaut, sodass sie auf den standardisierten PC-Monitoren optimal dargestellt wurden, ohne sich jedoch der Browser-Breite anpassen zu müssen. Heutzutage wäre das nicht mehr denkbar. Getreu dem Motto „Mobile First“ müssen neben der Seitenstruktur auch die Grafiken und Bilder auf den Webseiten interaktiv und flexibel sein. Mit den meisten im Web eingesetzten Bildern ist das jedoch nur eingeschränkt möglich. In diesem Beitrag behandeln wir das Thema Webdesign mit Vektorgrafiken.

Gerade Pixelgrafiken, also aus quadratischen Bildpunkten zusammengesetzte Bilder, verlieren an Qualität, wenn man sie größer oder kleiner skaliert, als anlegt. Dieses Problem in Kombination mit ihren vergleichsweise großen Dateigrößen macht sie zu einem „Fluch“ für den Einsatz auf mobilen Endgeräten. Eine Flexible und ressourcenschonende Lösung muss her!

Vektorgrafiken bieten sich besonders bei einfachen Strukturen, wie Logos und Icons an. Es spart Ladezeit und ist praktisch in der Umsetzung.

Adrian Weinschenk, Webdesign-Experte unserer Webdesign-Agentur

Webdesign mit Vektorgrafiken – unbegrenzt skalierbar

Sogenannte Vektorgrafiken, eine zu den Pixelgrafiken grundverschiedene Darstellungsart von Bildern, versprechen eine unbegrenzte Skalierbarkeit ohne Qualitätsverlust und das bei einer verschwindend geringen Dateigröße. Doch wo ist dabei der Haken? Um diesen zu finden, muss man sich zunächst mit der grundlegenden Eigenschaft von Vektorgrafiken auseinandersetzen. Anders als Pixelbilder setzen sie sich aus mathematischen Formeln zusammen, welche die Farben, Formen und Konturen der Bildelemente beschreiben. Anstelle von mehreren Millionen Pixeln samt deren Farbinformationen müssen also nur vergleichsweise wenige Rechenoperationen abgespeichert werden. Multipliziert man diese Formeln mit einem beliebigen Faktor, verändert man die Größe der Vektorgrafik, ohne dass sie an Qualität verliert.

Pixel und Vektorgrafik Beispiel

Pixel und Vektorgrafik

Doch wie werden diese flexiblen Bilder letztendlich am Monitor dargestellt? Monitore bestehen wie Pixelgrafiken aus Pixeln. Bevor Vektorgrafiken überhaupt erst angezeigt werden können, müssen die Bildprozessoren (Raster Image Processor, kurz RIP) in den Computern ein Pixelraster über die Vektorformen legen. Erst dieses Raster ermöglicht die finale Ausgabe am Monitor. Zwar ist dies eine zunächst umständliche Art der Darstellung, weil immer erst ein Umrechnungsprozess stattfinden muss, jedoch ist dieser längst standardisiert. Das heißt alle modernen Monitore und Grafikkarten haben keine Schwierigkeiten mehr damit, Vektorbilder korrekt anzuzeigen. Die Flexibilität und Skalierbarkeit des Bildformats machen es ideal für den Einsatz im Responsive Webdesign.

Zum bereits angesprochenen Haken an der Sache: Vektorgrafiken eignen sich durch die mathematischen Formeln ideal für die Darstellung von geometrischen Formen wie Schriften, Infografiken oder Diagrammen. Bei der Anzeige von Detailreichen Bildern wie beispielsweise Landschaftsfotos stoßen sie jedoch an ihre Grenzen. Hier ist das Abspeichern von einzelnen Bildpixeln effizienter als das Berechnen von unzähligen Formeln, welche Millionen von kleinen Quadraten beschreiben.

Scalable Vector Graphics, ein Segen fürs Web

Es gibt viele verschiedene Vektorformate, von denen sich besonders ein Format für die Verwendung im Internet etablieren konnte. Die Scalable Vector Graphics (kurz SVGs) sind heute der Standard für die Anzeige von Infografiken, Logos und mehr auf Webseiten. Die geometrischen Formen und Konturen sind den Elementen, aus denen die Webseiten bestehen, sehr ähnlich. Eine gut angelegte und eingepflegte Vektorgrafik unterscheidet sich auf den ersten Blick nicht von einem HTML-Seitenelement. Während HTML- und CSS-Strukturen sehr blockhaft sind, bieten SVGs die Möglichkeit, organische Rundungen und freie Formen in die Webdesigns mit einfließen zu lassen. Wenn man die Stärken und Schwächen der Vektorgrafiken kennt, dann sind sie ein wahrer Segen und eröffnen ungeahnte Möglichkeiten und Spielräume.

0 Kommentare

Beitrag kommentieren

Wir freuen uns auf Ihr Feedback!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diesen Beitrag bewerten