Web-Grafiken mit Gimp erstellen Gimp fürs Web von Simon Budig und Hans-Georg Eßer

---

Gimp ist das bekannteste Grafikprogramm unter Linux. Wie Sie damit auch Ihre Web-Seiten verschönern können, zeigt unser Workshop zu GIF-Animationen. Außerdem gibt es Hintergrundwissen zu den klassischen Web-Formaten GIF, JPG und PNG.

---

Eigene Web-Seiten zu gestalten, ist eine populäre Freizeitbeschäftigung. Vielleicht haben Sie auch unsere Schwerpunktartikel aus der letzten Ausgabe gelesen, in denen es um die eigene Homepage ging. Diesmal beschäftigen wir uns mit dem Werkzeug, das Grafiken und Bilder für das Internet aufbereiten kann: Gimp.

Banner und andere Grafiken auf Web-Seiten sind häufig kleine Animationen, mit denen sich der Platz auf der Seite besser nutzen lässt, da mehrere Informationen an gleicher Stelle angezeigt werden.

GIF in Bewegung

GIF ist nach wie vor das einzige Format, das Animationen erlaubt und von nahezu allen Web-Browsern unterstützt wird. Daher wird es auch trotz der lizenzrechtlichen Probleme rund um die LZW-Kompression noch gerne im Web Design eingesetzt.

Animationen sind eigentlich nichts anderes als eine Sammlung von Bildern, die nacheinander dargestellt werden. Insofern liegt es nahe, dass Gimp die Einzelbilder einer Animation in Ebenen abspeichert. Wenn Sie ein beliebiges animiertes GIF aus dem Web in Gimp laden, sehen Sie im Ebenendialog die einzelnen Stadien der Animation.

Wie lange ein Einzelbild sichtbar ist, können Sie über den Namen einer Ebene festlegen. Wenn der zum Beispiel Erster Teil (500ms) lautet, wird das Bild eine halbe Sekunde lang dargestellt. Beachten Sie, dass außer ms (Millisekunden) keine andere Einheit erlaubt ist. Falls Sie keine Dauer festlegen, wird beim Abspeichern des fertigen Bildes nach einer Standarddauer gefragt.

Zum Gähnen!

Eine schnelle Methode, eine Animation zu erzeugen, ist das IWarp-Plugin, das Sie im Kontextmenü (rechter Mausklick ins Bild) unter Filter/Verzerren/Iwarp finden. Mit diesem Plugin können Sie Bilder freihand verzerren. Besonders leicht ist es, aus Gesichtern Karikaturen zu erzeugen, indem man markante Gesichtszüge verstärkt. Sie können Bildbereiche verschieben, aufblähen (Vergrößern), zusammenziehen (Schrumpfen) und in und gegen den Uhrzeigersinn umrühren. Über Zurücksetzen führen Sie ein Bild wieder in den Originalzustand zurück. Die oberen Schieberegler legen die Größe des beeinflussten Bereichs und die Intensität des Effekts fest, mit der Maus können Sie dann in dem Vorschaubild verzerren -- nach ein paar Versuchen hat man den Dreh raus.

Abb. 1: Das IWarp-Plugin erlaubt verschiedene Verunstaltungen eines Fotos.

Das IWarp-Plugin bietet nun die Möglichkeit, eine Animation vom unverzerrten zum verzerrten Bild (und eventuell wieder zurück) zu erzeugen. Dazu klicken Sie einfach auf die Karteikarte Animation und wählen die Anzahl der zu erzeugenden Zwischenschritte. Mit Umgekehrt wird nicht vom Ursprungs- zum verzerrten Bild, sondern in anderer Reihenfolge animiert. Bei Auswahl der Option Ping-Pong wird nach dem Verzerren zum ursprünglichen Bild zurück animiert.

Abb. 2: Mit dem IWarp-Plugin wurde eine Animation erzeugt, die vom Ausgangsbild zum verzerrten hin läuft.

Ansehen können Sie sich das fertige Kunstwerk mittels <Bild>Filter/Animation/Animation abspielen. Die Bedienung des Plugins ist klar, aber es gibt hier noch einen netten Trick: Sie können auf die Anzeige der Animation klicken und sie "aus dem Fenster hinaus ziehen". Dies ist ganz besonders praktisch, wenn Sie nur schnell begutachten wollen, wie die fertige Animation in der Web-Seite aussehen würde, ohne Änderungen am HTML-Quelltext vorzunehmen. Ziehen Sie die Animation einfach über den Web-Browser, sie verschwindet wieder, wenn das Fenster geschlossen wird.

Animationstipps

Halten sie den Dialog Ebenen & Kanäle immer offen, wenn Sie mit Animationen arbeiten. Er ist ein sehr nützliches Werkzeug, mit dem sich schnell eine Ebene duplizieren, die Reihenfolge der Ebenen (also die Abfolge der Einzelbilder) ändern oder zwei Ebenen miteinander kombinieren lassen. Als kleines Beispiel können Sie etwa einen kurzen Text erscheinen lassen.

Text einblenden

1. Erzeugen Sie ein neues Bild z. B. in der Größe 500 x 100. Wählen Sie das Textwerkzeug und erzeugen Sie den Text, der erscheinen soll, in einer eigenen Ebene.
2. Duplizieren Sie nun den Hintergrund und die Textebene je zehn mal. Per Drag & Drop können Sie nun die Kopien der Textebene zwischen die Kopien der Hintergrundebenen einsortieren (Abbildung 3).

   

   Abb. 3: Sortieren der Ebenen.

3. Wenn Sie nun die Animation abspielen, sehen Sie einen blinkenden weißen Text vor schwarzem Hintergrund. Um daraus eine Einblendung zu machen, wählen Sie als Deckkraft der Textebenen mit dem Schieberegler im Ebenendialog in 10-Prozent-Schritten Werte zwischen 0% und 100%.
4. Aus technischen Gründen können Sie diesen Effekt in der Animationsvorschau noch nicht sehen, es ist aber im Prinzip immer noch ein blinkender Text. Um das auch noch zu beseitigen, verschmelzen Sie immer je zwei aufeinanderfolgende Ebenen. Dafür müssen Sie per Mausklick nacheinander die Textebenen aktivieren und mit dem Kürzel [Umsch+Strg+M] den Befehl Nach unten vereinen auslösen (Abbildung 4). Nun blendet der Text sanft ein.

   

   Abb. 4: Ebenen zusammenfügen

5. Dieses Bild können Sie nun als animiertes GIF abspeichern. Geben Sie einfach einen auf .gif endenden Dateinamen ein, erscheint automatisch der Export-Dialog (Abbildung 5), der Sie darauf hinweist, dass mehrere Ebenen vor dem Abspeichern zusammengefügt werden können -- das soll hier aber nicht geschehen. Klicken Sie daher auf Als Animation abspeichern. Da das GIF-Plugin nur indizierte Farben unterstützt, wird das Bild automatisch in ein solches Format umgewandelt.
6. Klicken Sie schließlich auf Exportieren und in dem dann erscheinenden Dialog auf OK, die Voreinstellungen sind vernünftig. Wenn Sie dieses Bild nun z. B. in Netscape anschauen, sehen Sie den Effekt.

Abb. 5: Die relevanten Dialoge für GIF-Animationen.

Size matters

Beim Erstellen von Web-Grafiken sollte man die Dateigrößen im Auge behalten. GIF-Animationen können sehr groß werden und die Ladezeit einer Web-Seite drastisch verlängern. Wenn man die Animation von vornherein günstiger gestaltet und manche Effekte etwas anders anlegt, kann man viel Platz sparen. Die Animation, die oben erzeugt wurde (Abbildung 6), ist ca. 34 KB groß, über eine ISDN-Verbindung würde sie fünf Sekunden brauchen, um auf den heimischen Rechner zu gelangen. Da sie jedoch nur eine Sekunde lang ist, wird sie zu langsam ablaufen und ruckeln.

Abb. 6: Einblenden von Text -- große Dateien...

Um die Größe zu reduzieren, sollten Sie zwei Dinge tun: Erstens das Bild von Hand indizieren (möglichst wenige Farben und möglichst ohne Farbrasterung) und dann den Menüpunkt Filter/Animation/Animation optimieren aufrufen. Dieser Befehl versucht, Redundanzen aus dem Bild zu entfernen und ein paar Spezialitäten des GIF-Formats auszunutzen, um noch etwas Platz zu sparen. Das lohnt sich besonders, wenn von Bild zu Bild große Bereiche gleich bleiben und daher nicht erneut abgespeichert werden müssen. Dieser erste Schritt verkleinert die Animation auf etwa 24 KB.

Das Hauptproblem mit der Dateigröße ist aber hausgemacht: Da der Text im Beispiel langsam eingeblendet wird, ändern von Bild zu Bild viele Pixel ihre Farbe. Es wäre besser, wenn sich jeweils nur kleine Bereiche ändern würden. Wird die Animation so umgestaltet, dass Buchstabe für Buchstabe erscheint, ändert sich von einem Bild zum nächsten immer nur ein kleiner Bereich. Wenn Sie das machen wollen, lohnt es sich, vom kompletten Text auszugehen, eine Kopie der Ebene zu machen und dann einen Buchstaben zu löschen. Diesen Vorgang wiederholen Sie, bis der Text leer ist. Das Ergebnis sieht etwa so aus wie Abbildung 7.

Abb. 7: Einblenden von Text -- kleine Dateien...

Nachdem das Bild indiziert und optimiert wurde, ist es noch 4 KB groß. Da hat sich die leichte Umstellung der Animation doch gelohnt. Generell kann man sagen, dass Bewegungen und Einblendungen mehr Platz brauchen als das "Erscheinen" von Bildteilen.

Andere Bildformate

Das GIF-Format ist zwar ein der Klassiker, es gibt aber viele Gründe, Web-Grafiken im PNG- oder JPG-Format zu verwenden. Es hängt von der Art der Bildinformation (z. B. Schrift, Foto, Liniengrafik) ab, welches Format das bessere ist.

Werfen wir zuerst einen Blick darauf, was bei einer falschen Formatwahl eigentlich passieren kann. In Abbildung 8 sehen Sie eine Überschrift, die als JPG-Datei gespeichert wurde. Deutlich sind um die Schrift herum so genannte Artefakte -- also Strukturen, die nicht zum eigentlichen Motiv gehören -- zu erkennen. Um den Effekt deutlich zu machen, wurde beim Erzeugen der JPG-Datei eine sehr niedrige Qualitätsstufe (hohe Kompression) gewählt.

Abb. 8: Harte Kontraste stören die JPG-Kompression.

JPEG

Um dieses Phänomen zu verstehen, braucht es ein wenig Hintergrundwissen. JPEG steht für "Joint Photographic Experts Group". Das JPG-Format wurde zur Kompression von Fotos entwickelt. Es nimmt leichte Verluste in Kauf, um gute Kompressionsraten zu erreichen. Während die Verluste bei Fotos normalerweise nicht ins Gewicht fallen, sind Bilder mit sehr harten Kontrasten (wie eben unsere Überschrift) in der Regel nicht für das JPG-Format geeignet. Die der Kompression zugrunde liegende Diskrete Cosinus-Transformation kann scharfe Kanten nur dann einigermaßen gut abbilden, wenn in den umgebenden Pixeln (JPG teilt das Bild in 8 x 8 Pixel große Bereiche auf) Abweichungen zugelassen werden. In Abbildung 9 sieht man dieses Raster und die Abweichungen. Es ist deutlich, wie sich die Abweichungen, die durch die Kanten provoziert werden, von Kasten zu Kasten unterscheiden.

Abb. 9: JPG-Bild mit Artefakten in Blöcken.

Um die Artefakte abzuschwächen, kann man beim Speichern in Gimp eine geringere Kompression einstellen und mit dem Schieberegler Glättung dafür sorgen, dass das Bild noch etwas weichgezeichnet wird. Dabei zeigt Gimp immer an, welche Dateigröße das Bild nach dem Abspeichern haben wird.

Das JPG-Format eignet sich für Bilder, die überwiegend aus weichen Farbübergängen bestehen. Auch Fotos, die man mit der Digitalkamera geschossen hat und ins Web stellen will, sind im JPG-Format gut aufgehoben -- daher werden diese meistens schon von der Digitalkamera als JPG-Dateien gespeichert. An die Grenzen von JPG stößt man mit Bildern, die große, einfarbige, von Konturen umgebene Flächen, also typische Design-Elemente, beinhalten. Die JPG-Unterstützung durch die verschiedenen Web-Browser ist gut.

GIF

Das ursprüngliche GIF-Format verwendet LZW-Kompression und ist deswegen lizenzrechtlich problematisch. Zwar ist in den USA gerade das Patent für LZW abgelaufen, in Deutschland besteht aber noch bis Juni 2004 Patentschutz (http://www.unisys.com/about__unisys/lzw/). Lediglich die nicht komprimierende GIF-Variante kann derzeit frei verwendet werden.

Auch technisch hat GIF eine große Beschränkung: Es kann nur 256 Farben in einem Bild darstellen. Wenn man also Fotos als GIF speichern will, stößt man schnell an Grenzen. Man kann diese Beschränkung umgehen -- erhält dann aber wieder riesige Dateien, und die Unterstützung durch die verschiedenen Browser ist nicht sichergestellt. Außerdem lassen sich solche Bilder mit mehr Farben nicht mit Gimp erzeugen.

Bilder indizieren

GIF speichert in den Bildern eine Farbpalette, die bis zu 256 Farben umfasst. In den eigentlichen Bilddaten werden dann nur noch Querverweise in die Farbpalette gespeichert. Um mit Gimp ein Bild auf 256 oder weniger Farben zu reduzieren, müssen sie es über Bild/Modus/Indiziert in den "indizierten Modus" umrechnen. Im erscheinenden Dialog (Abbildung 10) können Sie im oberen Teil auswählen, nach welcher Strategie Gimp die Farbpalette erzeugen soll: Gimp kann eine auf das Bild zugeschnittene Farbpalette erzeugen (die die angegebene Anzahl von Farben hat) oder eine schon vorhandene Farbpalette nutzen; typisch ist hier der Einsatz der "Web-Palette" (siehe unten).

Abb. 10: Farben reduzieren für die GIF-Speicherung.

Im zweiten Bereich des Dialogs legen Sie fest, ob Gimp den einzelnen Pixeln einfach stur die ähnlichste Farbe zuordnet (Keine Farbrasterung) oder ob er Dithering-Techniken verwendet, um den Gesamteindruck des Bildes zu verbessern. Stünden beispielsweise nur die Farben Schwarz und Weiß zur Verfügung, würde ein Grau durch ein Raster angenähert. Abbildung 11 zeigt verschiedene Rastermethoden; die Anordnung entspricht der im Dialog, der untere Streifen ist das Original.

Abb. 11: Verschiedene Modi um Graustufen in Schwarz-Weiß umzuwandeln.

Während man bei Design-Elementen mit harten Kontrasten an die Grenzen des JPG-Formats stößt, ist das GIF-Format deutlich besser dafür geeignet, da diese Design-Elemente typischeweise wenige Farben haben. Abbildung 12 zeigt ein Beispiel, das drei Grundfarben hat. Wenn man das Bild aber in den indizierten Modus umrechnen lässt, erkennt man, dass es in Wirklichkeit 60 Farben hat, da die Kanten geglättet sind. Um einen guten Glättungseffekt zu erreichen, sind so viele Farben nicht notwendig: Für eine gut geglättete Kante zwischen zwei Farben sind etwa vier Zwischenstufen erforderlich. In diesem Fall ergibt das elf Farben (drei Grundfarben, je vier Farben für den Übergang Türkisgrün-Schwarz und Türkisblau-Schwarz).

Abb. 12: Ein Design-Element einer Web-Seite: 11 Farben reichen.

Die unsägliche Web-Palette

Sie werden vielleicht schon einmal über die so genannte Web-Palette gestolpert sein. Das ist eine standardisierte Palette, die von nahezu allen Browsern verwendet wird, wenn die Grafikkarte (oder deren Einstellung) nicht mehr als 256 Farben auf dem Bildschirm zulässt (8-Bit-Displays). Sie besteht aus 216 Farben, die den RGB-Farbraum gleichmäßig unterteilen: Die Rot-, Grün- und Blauwerte nehmen von den je 256 möglichen Schattierungen nur die Werte 0, 51, 102, 153, 204 und 255 (hexadezimal 00, 33, 66, 99, cc, ff) an, was nach Adam Riese 6*6*6 = 216 Farben ergibt. Die restlichen Farben werden je nach System (Linux, Windows, Mac) unterschiedlich genutzt.

Dieser Ansatz hat leider den Nachteil, dass er die Wahrnehmung durch das Auge ignoriert. Das Auge ist bei helleren Farben wesentlich empfindlicher. Durch die gleichmäßige Aufteilung des Farbraums gibt es also bei dieser Aufteilung einige dunkle Farbtöne, die kaum voneinander zu unterscheiden sind, während man sich in den hellen Farbtönen eine feinere Unterteilung wünscht (Abbildung 13).

Abb. 13: Die Web-Palette hat nur wenige Anwendungen.

Wenn sie ein Bild indizieren müssen (weil es etwa transparente Bereiche haben soll) ignorieren Sie die Web-Palette. Lassen Sie Gimp die optimale Palette für das Bild finden und vertrauen Sie darauf, dass der Browser das Bild selbst auf alten 8-Bit-Displays akzeptabel darstellen wird.

PNG

PNG (Portable Network Graphics) ist ein verlustfreies Format. Im Gegensatz zu JPG kann man sich sicher sein, dass das abgespeicherte Bild alle Bildinformationen enthält -- die Dateien sind dann allerdings auch deutlich größer. PNG kann aber auch indizierte Dateien abspeichern. Vergleicht man es auf dieser Ebene mit GIF, sind die Kompressionsraten deutlich besser. Das Design-Element von oben braucht mit elf Farben im GIF-Format 827 Bytes, als PNG-Datei nur noch 415 Bytes.

Alle aktuellen Web-Browser können PNG-Dateien anzeigen -- wenn es wirklich reine PNG-Dateien ohne jeden Schnick-Schnack sind. Leider unterstützen nicht alle Browser das Transparenz-Feature des PNG-Formats: PNG (und Gimp) bieten einen echten Alpha-Kanal und darüber echte, verschiedene Transparenzgrade. Damit wäre es für Web-Designer kein Problem, saubere Kantenglättung vor beliebigen Hintergründen zu erzeugen, nur spielen eben einige Browser hier nicht mit.

Abb. 14: Mozilla: Ein- und dasselbe PNG-Bild vor verschiedenen Hintergründen.

Auch in Punkto Animationen kann PNG nicht mit GIF mithalten. Im Design von PNG wurde auf Animationen explizit verzichtet. Es gibt ein Schwesterformat namens MNG (Multiple Network Graphics), das bewegte Bilder unterstützt, doch dieses Format kennen noch weniger Web-Browser.

PNG kann man inzwischen fast bedenkenlos für rechteckige Grafiken ohne Transparenz einsetzen. Je nach Bildmotiv sollte man allerdings JPG als platzsparende Alternative erwägen. Bei Bildern im indizierten Modus kann man mit PNG meist gegenüber GIF noch einige Bytes herausholen -- und das ohne Lizenzprobleme.

Situationsabhängig entscheiden

Leider gibt es das ideale Format für das WWW noch nicht. Jedes der hier besprochenen Formate trägt ein Problempäckchen mit sich herum. JPG versagt bei harten Kontrasten, ist aber ungeschlagen, wenn es um große Fotos geht, GIF trägt schwer am Lizenzproblem, ist aber das einzige Format, mit dem man zur Zeit zuverlässig Transparenz und kleine Animationen handhaben kann, und PNG wird noch nicht von allen Browsern perfekt unterstützt. (hge)

Dieser Online-Artikel kann Links enthalten, die auf nicht mehr vorhandene Seiten verweisen. Wir ändern solche "broken links" nur in wenigen Ausnahmefällen. Der Online-Artikel soll möglichst unverändert der gedruckten Fassung entsprechen.