Grafik-Formate

Datei-Formate für Pixel-Grafik

Vergleich von Pixelgrafik-Dateiformaten


Portrait

Dieses Bild ist stellvertretend für typische Bilder einer Digital-Camera:   Es enthält 'unzählbar' viele verschiedene Farben.
AnsichtDatei-FormatKommentar
BMP
(Windows BitMap)
girl.bmp
30056 Bytes (100.2%)
Nur auf Windows üblich
Keine Kompression, daher kurze Ladezeit aber sehr große Dateien
Nicht für portable Dokumente oder Webseiten !
Dateigröße hängt nur von der Bildgröße ab, nicht vom Inhalt.
GIF
( Graphics Interchange Format)
girl_i032.gif
3681 Bytes (12.3%)
Kann nur maximal 256 verschiedene Farben darstellen.
Hier wird eine Palette von nur 32 (Index)-Farben verwendet, die allerdings optimal zu diesem Bild passen.
Für so kleine Bilder ist der Verlust an Qualität noch tragbar, für größere Bilder dieser Art ist GIF ausgeschlossen.
Reversible Kompression (kein zusätzlicher Qualitäts-Verlust durch Kompression)
Details: → GIF-Analyse
JPG
( Joint Photographic Experts Group)
girl_05.jpg
2464 Bytes (8.2%)
Empfohlen für alle Bilder mit 'unzählbar' vielen Farben, z.B. Portrait, Landschaft, Blumen, ...
Irreversible Kompression (hier mit dem Qualitäts-Faktor 50%).
Qualität ↔ Kompression von 0..100% einstellbar.
Man kann die Qualität nur verringern, niemals vergrößern. Daher sollte man die Originale (Camera, Scanner, ...) so lange aufbewahren, bis man davon keine Derivate mehr braucht.
PNG
( Portable Network Graphics)
girl_05.png
18616 Bytes (62.1%)
Für alle Gebiete anwendbar, d.h. sowohl für abzählbare Index-Farben als auch für 'unendlich' viele Farben.
Variable Kompression, hier mit 50%.
Bietet mehr technische Möglichkeiten als JPEG (variable Transparenz), ergibt jedoch je nach Bild und Software unterschiedlich große Dateien.
SVG
( Scalable Vector Graphics)
→ Objekt-Grafik ist hier nicht sinnvoll.
Man kann zwar jeden Bildpunkt (oder benachbarte Gruppen von Pixeln) in ein Objekt umwandeln, das ergibt jedoch viel zu große Dateien und erfordert umfangreiche Resourcen zur Herstellung und Verarbeitung.

Monocolor

Ein einfärbiges Quadrat bietet extreme Test-Bedingungen:   Damit ist die maximale Kompression der Bild-Daten möglich.
AnsichtDatei-FormatKommentar
BMP
(Windows BitMap)
rot_100x100.bmp
30056 Bytes (100.2%)
Nur auf Windows üblich
Keine Kompression, daher kein Aufwand zum Decodieren, aber sehr große Dateien.
Nicht für portable Dokumente oder Webseiten !
Dateigröße hängt nur von der Bildgröße ab, nicht vom Inhalt.
GIF
( Graphics Interchange Format)
rot_100x100.gif
148 Bytes (4.9%)
Reversible Kompression, d.h. kein Verlust an Qualität durch Kompression und Expansion.
Verwendet eine 'Palette' von maximal 256 verschiedenen (Index)-Farben. (→ Details)
Jede einzelne Farbe ist mit 24-Bit (aus ∽17 Mio Farben) frei wählbat.
Gut für Bilder mit 'abzählbaren Farben', z.B. Logos, Diagramme, Büro-Grafik, ...
JPG
( Joint Photographic Experts Group)
rot_100x100-q50.jpg
409 Bytes (13.6%)
Irreversible Kompression (hier mit dem Qualitäts-Faktor 50%).
Gut für Bilder mit 'unzählbar' vielen Farben, z.B. Portrait, Landschaft, Blumen, usw,  jedoch nicht für Büro-Grafik (Säulen, Balken, Linien, Kreise), Zeichnungen, etc.
PNG
( Portable Network Graphics)
rot_100x100.png
92 Bytes (3.1%)
Reversible Kompression, d.h. kein Verlust an Qualität durch Kompression und Expansion.
Für alle Gebiete gut anwendbar, d.h. sowohl für abzählbare Index-Farben als auch für 'unzählbar' viele Farben.
Für neue Produkte gegenüber GIF meist vorzuziehen.
SVG
( Scalable Vector Graphics)
rot_100x100.svg
164 Bytes (5.5%)
♥ ♥ Objekt-Grafik.
Man kann den ↗ Quelltext ansehen, speichern, ändern, ...
Unbegrenzt ohne Verlust an Qualität skalierbar: Die SVG-Datei für ein 1000x1000 Pixel großes Quadrat ist trotz 100facher Fläche nur um 2 Bytes größer.
Gut für Diagramme, Büro-Grafik, technische Darstellungen, CAD, ...
Dieser Wert wird hier als Referenz für die Angabe der Datei-Größe verwendet. Zusätzlich enthält jede Grafik-Datei vor den eigentlichen Bild-Daten einige beschreibende Daten (Overhead).

Rauschen

Ein derartiges Bild enthält die maximal mögliche 'Unordnung':   Eine Kompression wäre nicht sinnvoll.
AnsichtDatei-FormatKommentar
JPG
( Joint Photographic Experts Group)
noise_100x100.jpg
22712 Bytes (75.7%)
Dieses Bild wurde Live mit einem Programm der Programmiersprache → PHP erzeugt.
Mit Klick auf das Bild wird es vom Webserver nochmals angefordert, dort neu 'berechnet' und auf ihren PC geladen.
Die Datei-Größe ist variabel (Die angegebene Größe ist ein typischer Wert).
Javascript + Canvas
canvas_noise.html
3203 Bytes (10.7%)
In diesem Fall wurde kein Bild geladen, sondern ein Programm in der Programmiersprache → Javascript (in der angegebenen Größe). Mit dem Programm wurde die Grafik (auf ihrem PC) Live erzeugt.
Mit dem gleichen Programm könnte man beliebig große Bilder mit Farb-Rauschen erzeugen.
Mit Klick auf das Bild wird die Grafik (ohne weiteren Download) neu 'berechnet'.