Es gibt die unterschiedlichsten Grafikformate. Nicht alle sind für jede Art von Bildern geeignet.

Diese lassen sich grob in zwei Kategorien aufteilen:

  • Vektorgrafik, z. B. SVG, EMF
  • Bitmap- / Rastergrafik, z. B. PNG, GIF, JPEG, WebP

Über die genannten Beispiel-Formate und deren Verwendung gebe ich im Folgenden einen Überblick.

Grundlegendes

Das Folgende ist eine Übersicht, welche Art von Grafikformaten in Dokumenten oder Webseiten sinnvoll ist.
Technische Details zu den einzelnen Formaten oder was es für die Verwendung in Druckereien, zu beachten gibt, werde ich hier nicht behandeln.

Vektorgrafik

Diese Grafiken bestehen aus Grundelementen wie Kreisen, Linien oder anderen Kurven. Dadurch, dass hier nur Angaben wie Koordinaten, Durchmesser, Linienbreite usw. gespeichert werden, sind einfache Grafiken sehr kompakt und lassen sich verlustfrei skalieren und rotieren.
Egal wie groß Sie eine Vektorgrafik darstellen, die Dateigröße bleibt immer gleich.

Bitmap- / Rastergrafik

Bei diesen Grafiken wird jeder einzelne Bildpunkt eines Bildes definiert und gespeichert. Dadurch steigt die Dateigröße mit steigender Breite und Höhe des Bildes an.
Rastergrafiken eignen sich vor allem für komplexe Bilder (Fotos).
Durch Kompression kann die Dateigröße verringert werden. Hier müssen Sie zwischen verlustfreien Formaten wie PNG und verlustbehafteten wie JPEG unterscheiden.


Vergleich zwischen gebräuchlichen Formaten

SVG PNG GIF JPEG WebP
Maximale Anzahl an Farben 16,7 Mio. 16,7 Mio.
Graustufen (256)
Indiziert (256)
Indiziert (256) 16,7 Mio. 16,7 Mio.
Transparenz
(eine Farbe)
Progressiv


Optischer Vergleich zwischen Vektor- und verschieden Rastergrafik-Formaten

Vergleich bei einfacheren Strukturen, wie Logos

Als Vektor-Format hab ich hier SVG verwendet. Dieses ist von Webbrowsern direkt darstellbar.
Das Original ist jeweils die SVG-Datei
SVG PNG GIF JPEG WebP
Logo_SVG
Logo_PNG
Logo_GIF
Logo_JPG
Logo_WebP
Dateigröße 8,8 kB 126 kB 48 kB 28,19 kB 18 kB
Kompression Inkscape - Optimiertes SVG 9 + PngOptimizer 100 % Dithering, Octree optimiert 70 / Baseline / ohne Chroma-Subsampling 70 / Alpha 70 / Picture

Vergleich bei photoähnlichen Bildern

Für die SVG habe ich das Original mit Inkscape vektorisiert und für die Darstellung hier wieder in das PNG-Format umgewandelt.
SVG PNG GIF JPEG WebP
Logo_SVG
Logo_PNG
Logo_GIF
Logo_JPG
Logo_WebP
Dateigröße 6740 kB 364 kB 150 kB 49 kB 23 kB
Kompression Inkscape - Optimiertes SVG 9 + PngOptimizer 100 % Dithering, Octree optimiert 70 / Baseline / ohne Chroma-Subsampling 70 / Alpha 70 / Picture
Bei komplexen vektorisieten Bilder steigt die Größe der Vektorgrafik erheblich an. Bleiben Sie dafür besser bei einer Rastergrafik.
Dadurch, dass die Rastergrafik beim Vektorisieren auf wenige Farben reduziert wurde, sehen Sie auch erhebliche Farbabweichungen.
Grafikformate für Webseiten

Software

Weiterführende Informationen

Downloads