Index-Farben

Paletten von 'abzählbaren Farben'

Wenn es darauf ankommt, sehr schnell und sparsam zu arbeiten, kann man in der IT die übliche Anzahl von 17 Millionen darstellbaren Farben auf wenige Farben einer 'Palette' reduzieren. Wenn die Palette erst einmal festgelegt ist, dann genügt die Angabe einer Farb-Nummer (Index), um die gewünschte Farbe festzulegen.
FarbeFarbe Das komplexe Thema 'Farbe' in der Informatik
Palette Künstlerische Palette und IT-Farbtabelle
GIF Graphics Interchange Format
PNG Portable Network Graphics
Office-Programme Speichern von Diagrammen als Grafik mit Index-Farben
Standard-Paletten Ausgewählte Paletten der Informatik (VGA, WebSafe, ...)
Live-CLUT Farb-Tabelle einer beliebigen (hochgeladenen) Grafik-Datei
Verwandte Themen Programmierung von Index-Grafik mit Basic (LibreOffice-Basic, Visual Basic, VBA), PHP, ANSI-Escape-Codes für Farben an der Text-Konsole
Links Ausgewählte Links zum Thema 'Index-Farben'

Palette

Palette Die Palette ist ein klassisches Mal-Werkzeug.
Auf einem ergonomisch geformten Holzbrett werden die für ein Bild benötigten Farben aufgetragen.
Eine Palette enthält niemals alle Farben des gesamten Vorrats, sondern nur die kleine,überschaubare Anzahl, die für ein bestimmtes Bild benötigt wird.
Für ein anderes Bild kann die gleiche oder eine andere Palette verwendet werden.
Eine Palette hat nur Platz für eine begrenzte Anzahl verschiedener Farben (in der Infomatik max. 256).
Jede einzelne Paletten-Farbe kann aus einem sehr großen Vorrat unterschiedlicher 'Farb-Tuben' gewählt werden.
In der Informatik wird eine Palette eher nüchtern durch eine Farb-Tabelle (Color Lookup Table, CLUT) dargestellt:
Die Tabelle rechts enthält die gleichen 8 Farben wie die künstlerische Palette oben.
Die Farben einer CLUT bezeichnet man auch als Index-Farben, weil sie durch eine eindeutige Index-Zahl (Spalte links) bezeichnet werden.
Die Farben einer CLUT-Tabelle können (in der Informatik) nicht gemischt werden: In einem Bild mit Farbtabelle können nur diese und keine anderen Farben verwendet werden.
Farb-Tabelle (CLUT) dieser Palette:
IndexFarbeHex-CodeRGB
0#000000000
1#0000FF00255
2#00FF0002550
3#00FFFF0255255
4#FF000025500
5#FF00FF2550255
6#FFFF002552550
7#FFFFFF255255255
Eine CLUT-Tabelle darf nur maximal 256 Zeilen enthalten, weil die Index-Zahl durch genau 1 Byte dargestellt wird.
Die Technik von Paletten mit Index-Farben kann daher nur für Bilder verwendet werden, die nicht mehr als 256 verschiedene Farben enthalten.
Jede einzelne der Paletten-Farben kann allerdings aus dem großen Vorrat aller 17 Mio RGB-Farben ausgewähltr werden.
Eine CLUT enthält die Definition für eine begrente Anzahl (max. 256) verschiedener Farben. Zur Angabe der Farbe eines Objekts wird die Index-Zahl verwendet.
Jede Farbe wird durch → Addition der 3 RGB-Grundfarben (Rot, Grün, Blau) angegeben. Jede Grundfarbe wird durch eine Dezimalzahl 0..255 oder Hexadezimalzahl #00..#FF angegeben. Durch Kombination dieser Werte sind 256*256*256=16777216 (ca. 17 Mio) Farben von #000000 bis #FFFFFF einstellbar.
Der Vorteil einer Farbtabelle liegt in der Einsparung von Speicherplatz:
Die Angabe aller 3 Grundfarben erfordert für jeden Bildpunkt (Pixel) 3*8=24 Bit = 3 Byte.
Index-Bilder benötigen nur max. 8 Bit = 1 Byte, weil für jedes Pixel nur der Farb-Index angegeben wird.

Zusätzlich muss allerdings die Farbtabelle gespeichert werden, welche den Index wieder in RGB-Farben mit je 24 Bit übersetzt.
Das spart mindestens 2/3 des benötigten Speicher-Platzes: Bild-Dateien mit Index-Farben benötigen weniger Speicherplatz und im Internet weniger Übertragungszeit.

Wenn ein Bild nur wenige (abzählbare) verschiedene Farben enthält, dann ist die Technik von Farbtabelle und Index-Farben die optimale Speicherform.
Nachteil ist die zusätzlich benötigte Prozessor-Zeit beim Lesen und Schreiben von Index-Farben. Ein Programm muss jede Index-Zahl mit Hilfe der CLUT-Tabelle in eine RGB-Farbe mit 24 Bit übersetzen.
Dieser Nachteil ist wegen der hohen Geschwindigkeit heutiger PC-Prozessoren fast bedeutungslos.

Ein weiterer (nicht zu umgehender) Nachteil ist die Einschränkung auf maximal 256 Farben.
Nur Bilder mit "abzählbaren" Farben können mit Index-Farben gespeichert werden (z.B. GIF, PNG).
Für Bilder mit "unendlich" vielen Farben muss man für jeden einzelnen Punkt die volle Farb-Information (24 Bit) speichern (z.B. TIFF, JPEG).

GIF - Graphics Interchange Format

GIF ist ein Standard für Grafik-Dateien. Entscheidend ist die Verwendung von Index-Farben.
Free Patents Rechts die Original Farbtabelle dieser Grafik. Man erkennt die Optimierung der Tabellen-Farben für dieses Bild: Die Tabelle enthält nur wenige ausgewählte blaue und gelbe Farbtöne.

In ähnlicher Weise ist die Farbtabelle für jede einzelne GIF-Grafik individuell optimiert.

Mit geringerer Qualität ließe sich dieses Bild noch sparsamer mit nur 2 Farben (blau #0000A9 und gelb #F7F641) darstellen.
Farb-Tabelle (Color Lookup Table, CLUT) der links gezeigten GIF-Grafik
IndexFarbeCodeAnzahl Pixel
0#010058842%
1#0000C81263%
2#0000A9329482%
3#1313FF241%
4#242400932%
5#979720612%
6#F7F6413188%
80 * 50 = 4000100%
Die Spalte 'Anzahl' ist in der Original CLUT-Tabelle nicht enthalten. Sie enthält als anschauliche Information die Anzahl der Bildpunkte (Pixel) in der jeweiligen Index-Farbe.

Größen-Vergleich:

Die Demo-Grafik enthält 80*50=4000 Punkte (Pixel). Das entspricht bei Verwendung von 24-Bit RGB-Farben einer Daten-Menge von 96000 Bit = 94kB.
Die hier verwendeten 7 Index-Farben sind mit je 3 Bit darstellbar, das ergibt für alle 4000 Pixel eine Daten-Menge von 12000 Bit = 12kB. Dazu kommt noch die Farbtabelle mit ca. 200 Bit.
Insgesamt benötigt dieses Bild mit Index-Farben nur ca. 13% des Speicherplatzes und der Internet-Übertragungszeit !
In der Praxis werden die Daten zusätzlich komprimiert. Damit wird die Speichergröße weiter reduziert, und zwar umso mehr, je größer die Flächen einheitlicher Farben sind (Im Beispiel auf 1.5 kB).
Der Vorgang ist verlustfrei, d.h. die Grafik ist vor und nach der Kompressioin exakt gleich (Das gilt nicht für JPEG !).

Faustregeln:

Wenn ein Bild abzählbare Farben enthält, dann wird es bessser mit Index-Farben gespeichert (PNG oder GIF).
Geschäfts-Grafik (Diagramme), Firmen-Logos usw. sind meist typische Bilder mit Index-Farben.

Wenn ein Bild unzählig viele Farben enthält, dann wird es besser mit RGB-Farben gespeichert (PNG, JPEG).
Portraits, Blumen, Landschaften usw. sind typische RGB-Bilder.

Transparenz

GIF Transparenz GIF bietet die Möglichkeit, eine der Index-Farben als durchsichtig (transparent) zu definieren. Die Transparenz lässt sich allerdings nur aus- (0%) oder ein-(100%)-schalten.
Die häufigste Anwendung ist die Darstellung nicht-rechteckiger Objekte. Mit GIF-Transparenz und CSS lassen sich einige Tricks ausführen (Klicken sie den Kreisring).

GIF Transparenz+Animation

Animation

GIF bietet die Möglichkeit einer einfachen Animation. Dazu werden mehrere GIF-Grafiken nach Art eines 'Daumenkinos' hintereinander gezeigt.

Interlace

Eine weitere Option ermöglicht es, die GIF-Grafik in Teilbilder zu zerlegen und diese zeilenweise anzuzeigen, ähnlich wie die TV-Teilbilder. Das verbessert den Komfort nur bei der Anzeige sehr großer oder sehr langsam übertragener Bilder. Daher wird diese Option nur selten verwendet.

Programmierung

Alle modernen Programmiersprachen bieten die Möglichkeit, GIF-Grafik herzustellen oder zu verändern.
Das Beispiel zeigt eine mit → PHP programmierte Demonstration der Standard → WebSafe-Palette (216 Farben).
Websafe Farben Die Grafik ließe sich zwar auch manuell erzeugen, die Herstellung mit einem winzigen PHP-Programm ist jedoch eleganter.
GIF-Animationen von systematisch veränderten oder bewegten Objekten lassen sich mit einem Programm rasch und exakt herstellen.
GIF-Programmierung mit → PHP

Lizenz

GIF war ursprünglich ein patentiertes Verfahren. Je nach Staat ist das Patent in den Jahren 2003-2004 abgelaufen. Während der letzten Lizenz-Jahre nahm vor allem im Internet das Grafik-Volumen sehr rasch zu. Das beschleunigte die Entwicklung des freien ↓ PNG-Standards (nächstes Kapitel), welcher gegenüber GIF viele Vorteile bietet.

PNG - Portable Network Graphics

PNG ist ein sehr leistungsfähiger Offener Standard, welcher die meisten Vorteile von Index-Farben (GIF) und 24-Bit TrueColor Farben (JPEG) miteinander verbindet. PNG kann wahlweise Index-Farben darstellen (wie ↑ GIF) oder Bilder mit dem vollen Farb-Umfang von 24 Bit (TrueColor wie JPEG oder TIFF). In beiden PNG-Varianten kommt auch Daten-Kompression zur Anwendung, ebenso wie bei GIF oder JPEG.

PNG Index-Farben

Wenn man PNG zum Speichern von Index-Farben verwenden willl, dann muss man bei manchen Grafik-Programmen darauf achten, dass nicht ungefragt die 24-Bit Variante gespeichert wird.
Das ist nicht gleichgültig, denn erstens sind Dateien mit Index-Farben wesentlich kleiner, zweitens ist nur die Kompression von Index-Farben verlustfrei.

Dazu stellt man das geladene Bild vor dem Speichern von RGB-Farben auf Index-Farben um. Zumindest alle professionellen Programme bieten diese Option.
Allerdings ist der entsprechende Menü-Befehl je nach Programm unterschiedlich formuliert und angeordnet.

Transparenz

PNG bietet die Möglichkeit, eine der Index-Farben als durchsichtig (transparent) zu definieren. Die Transparenz lässt sich wie bei GIF nur ein- oder abschalten.

PNG bietet auch variable Transparenz (0..100%), allerdings nur in seiner 24-Bit Variante.

Lizenzfrei

PNG ist ein Offener Standard und daher lizenz- und kostenfrei verwendbar. Der IT-Marktführer hat zu den meisten Standards ein gestörtes Verhältnis. Immerhin kann man PNG sogar mit dem MSIE Browser ab Version 7 in vollem Umfang verwenden - viele Jahre nach allen modernen Browsern.

Programmierung

PNG-Grafik lässt sich mit allen modernen Programmiersprachen erzeugen. Die Methoden für verschiedene Formate (GIF, JPEG, PNG, ..) sind weitgehend identisch, sie unterscheiden sich meist nur in einem einzigen Befehl (Sicherung der fertig erstellten Grafik in einem bestimmten Format).

Animation mit PNG (APNG)

In der ursprünglichen Variante bot PNG keine Animation. Deshalb sind die meisten Web-Animationen nach dem (Animated) GIF-Standard erzeugt.
Im Jahr 2004 wurde der PNG-Standard vom Mozilla Entwickler-Team auf die animierte Variante APNG erweitert.
Quelle: Wikipedia
PNG-Animationen bieten weit mehr Qualität als einfache GIF-Animationen, sind jedoch noch wenig verbreitet.
Alle modernen Browser unterstützen APNG. Nur der veraltete Versionen des MSIE Browsers beherrschen diese Technologie nicht, zeigen jedoch wenigstens eine statische PNG-Grafik.

Diagramme aus Office-Programmen

In Büro-Programmen (LibreOffice, OpenOffice, MS-Office, ...) werden häufig Diagramme (Geschäfts- oder Business-Grafik) hergestellt.

In diesem Arbeitsgebiet müssen die einzelnen Farben gut voneinander unterscheidbar sein.
Extrem feine Abstufungen sind dagegen fast nie erforderlich.
Dieses Profil spricht eindeutig für die Verwendung von Paletten bzw. Index-Farben.
In den meisten Programmen kann man die verwendete Palette genau auf den Bedarf abstimmen und als Standard speichern. Es ist sinnvoll, sich dabei an der 'Corporate Identity' zu orientieren.

Meist kann man sogar mehrere Paletten erstellen und zwischen ihnen wahlweise umschalten.

Das ist jedoch den meisten AnwenderInnen ebenso unbekannt wie die Unterscheidung zwischen 8-Bit Index-Farben und 24 Bit TrueColor.
Obwohl es häufig erforderlich ist, mit Kalkulations-Programmen erzeugte Diagramme als Grafik-Datei zu speichern, ist diese Arbeit derzeit leider nicht AnwenderInnen-freundlich ausführbar.

LibreOfffice & OpenOffice

Grafik markieren und kopieren
Menü Datei | Neu | Zeichnung
In OpenOfficeDraw: Menü Bearbeiten | Einfügen
Menü Datei | Exportieren | Dateiformat = GIF, PNG, ...

MS-Excel:

Grafik markieren.
Shift-Taste niederhalten.
Menü Bearbeiten | Bild kopieren | Darstellung & Größe wie angezeigt, Format Bitmap
Beliebiges Grafik-Programm öffnen
Menü Bearbeiten | Einfügen
Menü Datei | Speichern unter | GIF oder PNG

Nachbearbeitung

Wenn es notwendig ist, die erzeugte Grafik zu adaptieren, dann verwendet man dazu ein Grafik-Programm.
Für OpenOffice eignet sich am besten OpenOffice-Draw. Ansonsten verwendet man z.B. Gimp (professionelle Pixel-Grafik, kostenfrei für alle gängigen Betriebssysteme).

Säulen-Grafik (Column Chart)


Kreis-Grafik (Pie Chart)

ScreenShot

Aus jedem angezeigten Fenster (d.h. auch aus jedem Programm) lässt sich ein ScreenShot machen, d.h. ein Pixel-Bild des aktuell angezeigten Fensters.

Linux-ScreenShot
unter Gnome Desktop: Ausführung von gnome-screenshot (Sammlung gnome-utils)
unter K-Desktop: Ausführung von ksnapshot

Windows-ScreenShot
Tasten Alt+Druck
Die Grafik wird anschließend aus der Zwischenablage in ein beliebiges Grafik-Programm eingefügt und als GIF oder PNG gespeichert.
Unabhängig davon gibt es zahlreiche Freeware und Shareware Programme zur Ausführung von ScreenShots mit verschiedenen zusätzlichen Optionen.

Automatisierung

Die Erstellung von Geschäfts-Grafik wird in den meisten Betrieben und Organisationen regelmäßig (mit den jeweils aktuellen Zahlen) manuell wiederholt.

Die periodische manuelle Ausführung hat Nachteile:
Die MitarbeiterInnen sind oft nicht dazu ausgebildet, verwenden umständliche Verfahren und sehr viel Zeit.
Zur Überführung der Grafiken ins Intranet oder Internet werden abenteuerliche und meist sehr aufwändige Verfahren verwendet.
Wenn die zuständigen MitarbeiterInnen gestresst, krank oder auf Urlaub sind, gibt es keine Grafik, oder die Diagramme sehen ganz anders aus.
Nicht alle erstellten Diagramme werden wiedergefunden, schon gar nicht bei Abwesenheit der/des Mitarbeiters.
Die teuer hergestellte Grafik wird oft zu spät, manchmal gar nicht an alle geplanten oder interessierten MitarbeiterInnen verteilt.

Es ist nur wenig bekannt, dass es vergleichsweise einfach ist, die Erstellung von Geschäftsgrafik zu automatisieren.
Das kostet einmalig ca. so viel Aufwand wie die manuelle Herstellung von 10 Diagrammen.
Vorteile:
Die Arbeit wird stets pünktlich und zuverlässig erledigt.
Die Diagramme werden automatisch am vorgesehenen Platz gespeichert und sind dort jederzeit auffindbar.
Von allen Daten und Diagrammen werden automatisch Sicherungs-Kopien hergestellt.
Die Grafik wird automatisch ins Internet übernommen.
Das Format ist genau reproduzierbar und daher immer gut vergleichbar.
Für die individuelle Bearbeitung kann man alle notwendigen Daten vom Server an den eigenen PC übernehmen.
Die Zugriffs-Rechte lassen sich genau planen und strikt einhalten.

Automatisierung mit Basic (LibreOffice-Basic, Visual Basic, VBA)

Mit → Basic 'Makro'-Programmen kann man die Arbeit in LibreOffice oder MS-Excel automatisieren. Diese Variante wird von AnwenderInnen meist bevorzugt, weil sie weiter mit dem gewohnten Programm arbeiten können, darin jedoch zusätzliche Menü-Punkte finden.

Es ist sinnvoll, mit Basic-Programmen standardisierte Diagramme herzustellen und zu speichern.
MS-Excel ist allerdings (auch mit Basic-Hilfe) kaum geeignet, Webseiten für die betriebliche Verwendung herzustellen.

Ein derartiger Einsatz von basic führt zu einer Teil-Automatisierung: Die Grafik wird rasch und genau reproduzierbar hergestellt, erfordert jedoch weiterhin persönlichen Einsatz.

Automatisierung mit Standard-Server

Ein Standard-Server ( → LAMP oder → WAMP) ist bei etwa gleichem Aufwand wesentlich besser zur Automatisierung geeignet:
Die Daten werden von einem Datenbank-Server verwaltet, der wesentlich mehr Sicherheit bietet als lokal gespeicherte Excel-Dateien.
Die Grafik wird automatisch, zuverlässig und genau reproduzierbar aus den jeweils aktuellen Daten erzeugt.
Die Daten und Grafik-Dateien müssen nicht verteilt werden, sie stehen im eigenen Web jeder/m berechtigten MitarbeiterIn zur Verfügung.

Die Programmierung erfolgt in diesem Fall meist mit → Java, → Perl oder → PHP. Wenn der Betrieb ein Server-Programm-Paket verwendet, dann benötigt man keine Programmierung sondern nur eine Adaptierung.

Grafik-Programme

Fast jedes noch so einfache Grafik-Programm kann Bilder in unterschiedlichen Formaten öffnen und speichern.
Folgende Arbeiten können daher mit jedem gängigen Grafik-Programm ausgeführt werden:
Öffnen einer Grafik-Datei (BMP, GIF, JPEG, PNG, TIFF, ...)
Einfügen einer Grafik aus der Zwischenablage
Speichern einer Grafik (Index-Farben als GIF oder PNG).
Die meisten Grafik-Programme können darüber hinaus die Grafik verändern (z.B. Zuschneiden, Ausschneiden, Freistellen, ...).
Andere Änderungen (z.B. Skalierung = Vergrößern oder Verkleinern) erfordern meistens eine manuelle Nachbearbeitung.
Beispiele für ausgezeichnete FreeWare Grafik-Programme:

IrfanView IrfanView gibt es derzeit leider nur für Windows-Systeme. Man kann damit nicht nur Bilder ansehen (Viewer), sondern in alle gängigen Formate umwandeln, zuschneiden, drehen und mit verschiedenen Filtern bearbeiten.

Gimp Gimp ist ein OpenSource Programm zur Bildverarbeitung auf professioneller Ebene. Man kann es aus dem Internet beziehen und lizenzfrei verwenden. Läuft auf Linux und Windows.

Es gibt hunderte von PhotoShop Filter-Modulen für alle denkbaren Grafik-Aufgaben. Man kann fast alle problemlos auch mit IrfanView und Gimp verwenden.


XHTML CSS