Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

GIF, JPG, SVG, PNG oder doch lieber Webp? Wann du auf welches Bildformat setzen solltest

Seite 2 / 2

SVG: Vektorgrafiken

Die bisherigen Formate JPG, PNG und GIF waren alles Bitmapgrafiken (auch Pixelgrafiken genannt). SVG ist das einzige Vektorgrafiken-Format in unserem Vergleich. Es wurde extra für das Web entworfen und erlangt dort auch eine immer größere Verbreitung.

Was ist eigentlich der Unterschied zwischen Vektor- und Bitmapgrafiken?

Pixelgrafiken speichern für jeden Bildpunkt die Farbwerte. Die Kombination aller Punkte und Farben ergibt dann letztlich ein ganzes Bild. Die vielen Farbwerte sorgen aber auch für einen großen Speicherbedarf (bei FullHD-Auflösung müssen über zwei Millionen Farbwerte gespeichert werden, was beim RGB-Farbraum ohne Komprimierung über sechs Megabyte sind). Außerdem können Pixelgrafiken nicht verlustfrei hochskaliert werden. Logisch, da bei einer höheren Auflösung Farbwerte fehlen.

Dem gegenüber stehen Vektorgrafiken, bei denen Vektorinformationen gespeichert werden. Also beispielsweise starte in Punkt X und male einen Kreis bis Punkt Y mit dem Radius 100. Die entstandene Linie soll zehn Pixel dick sein und die Farbe Blau haben. Derartige Grafiken sind zwar in der Farb- und Schattendarstellung sowie im Detaillierungsgrad stark eingeschränkt, müssen aber nicht so viele Informationen speichern und können außerdem beliebig hochskaliert werden.

Das Format erlaubt das bedingungslose Skalieren der Grafiken. Somit ist es sehr gut für Logos, Icons und einfache Grafiken im Web geeignet: perfekt für das Responsive Design. Aber nicht nur im Web sind Vektorgrafiken sinnvoll. Unternehmen sollten ihre Logos immer als Vektorgrafik vorliegen haben. So kann die Größe des Logos ohne Verluste beliebig angepasst werden. Egal ob für einen Flyer oder ein großes Werbeplakat.

Der Nachteil ist leider, dass nicht jede Person, jedes Content-Management-System oder Social-Media-Plattform mit Vektorgrafiken so einfach umgehen kann. Wer seine Grafik aber als SVG erstellt hat, kann es ohne Probleme in eine handelsübliche Pixelgrafik der passenden Größe konvertieren. Inzwischen nimmt die Verbreitung von SVG stark zu, sodass jeder moderne Webbrowser das Format bereits unterstützt. Mögliche Grafiksoftware für das Format sind Inkscape, Illustrator oder auch Sketch.

Dafür ist das SVG-Format ideal:

  • Logos, Icons und einfache Grafiken im Responsive Design oder die in verschiedenen Größen, Farben und Formen benötigt werden
  • Grafiken, die im Nachhinein bearbeitet werden müssen

Webp – Das neue Format fürs Web

Der Name des vergleichsweise noch sehr jungen Bildformat ist Programm. Webp soll das Bildformat fürs Web werden, zumindest wenn es nach dem Entwickler Google geht. Es spricht aber auch einiges dafür. Webp gibt es in zwei Varianten: mit verlustfreier und verlustbehafteter Kompression. Gegenüber PNG spart das verlustfreie Format laut Googles Angaben rund 26 Prozent seiner Dateigröße bei gleichbleibender Qualität ein. Im Vergleich zu JPG sind es bei der verlustbehafteten Variante sogar bis zu 34 Prozent. Beide Versionen unterstützen auch einen Alpha-Kanal, welcher ebenfalls deutlich weniger Speicherplatz benötigt als beispielsweise PNG. Außerdem unterstützt Webp Animationen und steht damit in direkter Konkurrenz zu GIF. Vorteile: bessere Transparenz und RGB-Farbpalette. Konvertiert man GIF-Bilder in das Webp-Format spart man sogar bis zu 64 Prozent Speicherplatz ein.

Der große Nachteil des Formats ist die Unterstützung. Während jeder handelsübliche Browser und eine breite Sparte an Software mit GIF, JPG und PNG umgehen kann, sieht das Ganze bei Webp eher mau aus. Unterstützen kann Webp bislang hauptsächlich Google Chrome für den Desktop und Android, Opera und der native Android-Webbrowser. Solange die Unterstützung weiterer großer Webbrowser wie Firefox, Safari und Edge fehlt, dürfte das „Bildformat fürs Web“ jedoch ein Format für Chrome, Android und Opera bleiben. Wer jedoch eine Website betreibt, sollte stets darauf achten, dass jeder aktuelle Browser die eigene Seite richtig darstellen kann.

Dafür könnt ihr Webp verwenden:

  • Fotografien und weitere Bilder mit großem Farbraum
  • Grafiken, auch mit Transparenz
  • Alternative zu Animationen mit GIF
  • Kurz: fürs Web
  • Aktuell durch fehlenden Support von Firefox, Safari und Edge jedoch noch nicht empfehlenswert

Mehr Details zu Webp findet ihr in unserem Überblick.

Startseite
  • Seite:
  • 1
  • 2

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
E.

Warum hast du nach der Studie der Infografik Bilder mit 2 und 6 Farben als JPEG eingebunden? Hier wäre PNG die bessere Lösung gewesen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.