Haben Sie eine Webseite und ärgern sich über überdurchschnittlich lange Ladezeiten? Vielleicht liegt das an den von Ihnen eingebundenen Bildern. Im Grundsatz gilt, umso kleiner das Bild, desto besser ist die Ladezeit. Doch kurze Ladezeiten alleine machen keine gute Webseite aus, wenn dafür die Qualität der Bilder nicht stimmt. Das Stichwort für dieses Problem lautet Dateiformat. Doch welches Dateiformat wird bei welcher Art von Grafik eingesetzt und welche Dateiformate gibt es überhaupt? Keine Sorge, die Antwort darauf ist simpel.

Raster und Vektorgrafiken

Im Wesentlichen gibt es zwei Dateiformate welche Sie kennen sollten. Die Raster- sowie Vektorgrafiken. Beide haben Ihre Vor- und Nachteile welche geschickt angewendet, zur optimalen Performance beitragen.

Die Rastergrafiken haben die Eigenschaft, Bildpunkte (Pixel) Rasterförmig anzuordnen und somit einer vorgegebenen Struktur zu folgen. Jedem einzelnen Bildpunkt ist eine Farbe zugeordnet weshalb sich aus allen Bildpunkten zusammen dann ein Bild ergibt. Je mehr Bildpunkte es gibt, desto besser wird dementsprechend die Auflösung des Bildes sein. Typische Beispiele für Rastergrafiken sind JPEG und PNG-Dateien.

Die Vektorgrafiken hingegen werden über grafische Primitive definiert und sind dadurch nicht an eine feste Grundordnung wie bei einem Pixelraster gebunden. Grafische Primitive sind zum Beispiel eine Linie, Kreis oder Polygon welche die Objekte einer Grafik durch Vektoren beschreiben. Da diese Vektoren stufenlos skalierbar sind, können Vektorgrafiken verlustfrei vergrössert oder verkleinert werden. Typischerweise wird das SVG-Format verwendet um Vektorgrafiken darzustellen.

JPEG

Das JPEG-Format ist ein typisches Rasterformat und ermöglicht die Darstellung von bis zu 16,7 Millionen Farben. Vorteil des JPEG-Format ist es, dass die Dateigrösse enorm reduziert werden kann. Leider verliert das Bild durch die Komprimierung an Qualität. Dies äussert sich indem einzelne Pixel mit ähnlichen Farbwerten zusammengefasst werden. Auch lassen sich JPEGs nicht animieren und können keine transparenten Bereiche darstellen.

Deshalb sind JPEGs am besten für Bilder ohne transparente Bereiche dafür mit einem hohen Farbumfang geeignet. Als Beispiel eignet sich das Produktbild oder klassische Werbebilder.

PNG

Auch PNG ist eine typische Rastergrafik welche 1994 als Alternative zum GIF-Format entwickelt wurde. PNG Dateien können verlustfrei komprimiert werden, was jedoch grössere Dateien zur Folge hat. Jedoch erlaubt PNG die Darstellung transparenter Bereiche welche die Einbindung von Logos unabhängig vom Hintergrund ermöglicht. Mit einem transparenten Hintergrund bei einem Logo wird nach der Einbindung automatisch die Hintergrundfarbe der Webseite zu sehen sein.

Verwenden Sie deshalb PNGs für Bildformate, welche transparente Bereiche besitzen. Meistens wird dies bei Logos der Fall sein.

SVG

Scalable Vector Graphics, kurz „SVG“, ist nun eine, wie der Name bereits verrät, Vektorgrafik. Im Gegensatz zu PNG- oder JPEG-Dateien können SVG-Dateien direkt in den HTML-Code einer Website integriert werden. Dies hat natürlich eine positive Wirkung auf die Performance, besonders auf die Ladezeiten. Da hierbei die Grafik nicht vom Server geladen werden muss sondern direkt im Browser erstellt wird werden Ressourcen eingespart und Anfragen zwischen Server und Browser verringert. Auch transparente Bereiche sind für SVGs kein Problem. Zusätzlich können SVGs auch noch mit Hilfe von Java Script animiert werden.

SVGs sind deshalb sehr gut für geometrische Formen wie Logos, Diagramme oder Icons geeignet. Auch für das responsive Design eignen sich SVG-Dateien sehr gut da sie eine verlustfreie Skalierbarkeit bieten und keine Qualitätseinbussen entstehen.