Grafikformate spielen eine wichtige Rolle beim Einsatz auf der eigenen Website, im Blog oder Shop. Hier die drei wichtigsten Formate für den täglichen Einsatz und einige Tipps, wann du welches Format nutzen kannst.

Bei der Auswahl der richtigen Grafikformate gibt es viele Faktoren zu beachten. Trifft man allerdings die richtige Auswahl, hat das nicht nur einen positiven Effekt auf die Website selbst, sondern wirkt sich auch positiv auf die Nutzererfahrung deiner Besucher:innen aus!
Prinzipiell stehen drei wichtige Optionen zur Verfügung: Pixelgrafiken, Vektorgrafiken und sogenannte Base64-Grafiken. Alle drei Varianten bieten ihre eigenen Vor- und Nachteile. Entscheidend ist hier, wie so oft, der jeweilige Kontext.

Wie der Kontext über das Grafikformat entscheidet

Der Kontext einer Grafik ist die jeweilige Umgebung auf einer Website. Sozusagen das Umfeld, in dem sie erscheint. Hier kann es deutliche Unterschiede geben: eine Grafik, die auf der Startseite aufwändig animiert wird ist prinzipiell anders zu bewerten, als ein detailreiches Hintergrundbild oder eine Illustration, die Informationen über ein Produkt liefert. Ebenso verhält sich ein einzelnes Icon anders, als eine aufwändige Infografik mit vielen Icons, Text und ähnlichen Elementen. Um das richtige Format zu finden, dabei spreche ich noch nicht über die jeweilige Datei-Endung, sondern lediglich über den Typ der Datei, sollte man diesen Kontext bedenken.

Vektorgrafiken und Pixelgrafiken im direkten Vergleich

Besonders mit Blick auf immer hochauflösendere Displays und Websites mit einem hohen Grad an Flexibilität in Sachen Layout und Format sind Vektorgrafiken sehr attraktiv: sie sind kompakt, scharf und lassen sich gut skalieren. Pixelgrafiken hingegen sind größer, dadurch träger und skalieren einfach nicht so gut. Es gibt aber auch Situationen, in denen die Pixelgrafiken ganz klar im Vorteil sind:

  • Fotos lassen sich optimal abbilden
  • Dateiformat (.jpg, .png, etc.) kann situationsbedingt gewählt werden
  • Grad der Kompression kann fein abgestimmt werden
  • Einbindung sehr einfach

Sieht man von sehr detailreichen Illustrationen, Layoutbildern oder Fotos ab, tendiere ich insgesamt mehr zu den Vektorgrafiken. Denn egal ob es sich um ein Logo handel, Diagramme, Infografiken, Icons oder Schriftzüge: wo auch immer eine klare Auflösung und saubere Linien entscheidend sind, helfen Vektorgrafiken ohne großen Aufwand weiter. Man spart sich auch das Hinterlegen mehrerer Pixelgrafiken in verschiedenen Auflösungen und/oder Formaten.
Im Code der Website lassen sich Vektorgrafiken (in der Regel im SVG-Format) auch sehr einfach einbinden. Doch gibt es selbst hier noch Einzelfälle, in denen eine dritte Alternative bedacht werden sollte!

Was sind Base64-Grafiken und wann solltest du über ihren Einsatz nachdenken!

Was sind Base64-Grafiken und wieso habe ich noch nie davon gehört?” Das sind gute (und berechtigte) Fragen! Die einfachste Antwort darauf ist zunächst die Tatsache, dass es sich dabei nicht wirklich um Grafiken handelt, sondern um Code, nämlich den namensgebenden Base64-Code. Mit Hilfe dieses Base64-Codes lassen sich Grafiken in reinem Text/Code abbilden. Dieser Code lässt sich wiederum direkt in den HTML-Code deiner Website integrieren. Am Ende wird die gewünschte Grafik (z.B. ein Icon) dargestellt, allerdings ohne eine separate Grafikdatei hierfür zu hinterlegen. Man spricht hier von einer Inline-Lösung.

Doch wozu solltest du den Aufwand dieses Grafikformats in der Umwandlung und die evtl. etwas umständlichere Einbindung der Grafik überhaupt eingehen?

Entscheidend bei Grafikformaten ist die Website-Performance!
Bei der Auswahl der passenden Medienformate, so auch bei Bildformaten, ist die Performance, also die Ladegeschwindigkeit deiner Website ein kritischer Faktor. Zu große Grafiken benötigen länger zum Laden. Gerade bei langsamen Internetverbindungen (man denke beispielsweise an Mobilgeräte die einen schlechten Empfang haben) ist das zu berücksichtigen. Es geht letztlich oft um einen Kompromiss aus Komprimierung (“Wie klein kann ich die Datei machen?”) und Qualität (“Bis zu welcher Komprimierung sieht die Datei noch gut aus?”). Neben diesem Kompromiss gibt es aber noch einen weiteren Faktor: die Zahl der HTTP-Requests. Ohne diese recht technische Angelegenheit zu detailliert zu behandeln, ein einfaches Bild: Jede Datei, die auf deiner Website dargestellt wird, muss zum Besucher transportiert werden. Je mehr Dateien transportiert werden müssen, desto größer ist der Aufwand dieses Transports. Der Faktor hier ist, wie so oft, Zeit. Reduzierst du die Anzahl der zu übertragenden Dateien spart das also nicht nur das Datenvolumen, das übertragen wird, sondern auch den Übertragungsaufwand. Der Einsatz von Base64-Grafiken erfolgt, wie bereits erklärt, inline. Sie stehen also mitten im sonstigen Code deiner jeweiligen HTML-Datei und werden nicht separat, sondern mit ihr ausgeliefert. Das spart entsprechende HTTP-Requests und das macht deiner Website performanter.

Wieso du nicht alle Grafiken in Base64-Grafiken wandeln solltest

Wie bereits erwähnt geht es bei Grafikformaten oft um einen Kompromiss aus Kompression und Qualität. Ich möchte diese Aussage erweitern: Häufig geht es um einen Kompromiss aus Kompression, Dateimenge und Qualität. Base64-Grafiken können, gerade bei aufwändigeren Inhalten, schnell ziemlich groß werden. Man spart also eine Dateiübertragung, erzeugt aber unter Umständen eine sehr große HTML-Datei. Der erhoffte Performance-Vorteil ist so schnell verspielt. Deshalb ist es enorm wichtig nicht aus dem Bauch heraus zu handeln, sondern die Entscheidung bewusst zu fällen. Grafikgröße (z.B. eines PNGs) und Ausgabegröße eines Base64-Grafik-Codes miteinander vergleichen. Ist die Base64-Lösung kleiner, spricht schon einiges dafür.

Ich empfehle diese Variante vor allem beim Einsatz von sehr kleinen und schlichten Elementen, wie einfarbigen Icons. Erfahrungsgemäß lassen diese sich sehr performant einbinden!

Die richtige Auswahl des Grafikformats kann im ersten Moment kompliziert sein. Ich hoffe, dieser Artikel hat dir ein etwas bessere Verständnis vermittelt und lässt dich die Entscheidung bei nächster Gelegenheit bewusster und effektiver treffen! Bei Interesse wirf einen Blick auf meinen Blog für mehr interessante Inhalte rund um deine Website!

close

Newsletter Abonnement

Der Newsletter informiert über neue Inhalte, Kurse, Leistungen, Tipps und ähnliche Inhalte. Mit einem Abonnement bleibst du informiert!