Grafikformate und Bildbearbeitung fürs Internet

: © LMZ

Im Internet haben sich zwei Dateiformate für Grafiken durchgesetzt, die von allen modernen Browsern "inline", also im eigenen Fenster angezeigt werden können: die Formate GIF und JPEG (beides Bitmap). Bei beiden Formaten handelt es sich um pixelorientierte Formate. Die Stärken beider Formate liegen jedoch auf unterschiedlichen Gebieten. Dazu kommt ein neues, vielversprechendes Format, das noch in der Entwicklung ist, aber die Vorteile von GIF und JPEG in sich vereint: das PNG-Format.

Das GIF-Format

Das graphic-interchange-format von CompuServe und wurde speziell für den Online-Einsatz entwickelt. Es zeichnet sich durch eine hohe Komprimierungsdichte aus (zum Vergleich: Bitmap-Dateien im BMP-Format sind bei gleichem Inhalt durchschnittlich zehnmal bis dreißigmal so umfangreich wie GIF-Dateien).

Der jetzt gültige Standard des GIF-Formats ist das sogenannte "89er-Format". Dieses Format bietet drei Möglichkeiten an, die das GIF-Format für den Einsatz im Internet besonders interessant machen:

Die Möglichkeit, eine Datei "interlaced" abzuspeichern. Eine Grafik, die so abgespeichert ist, wird beim Laden nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Dadurch entsteht schon eine undeutliche Vorschau während das Bild geladen wird.
Die Möglichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern, verbunden mit Optionen zur Steuerung der Einzelgrafiken. Damit lassen sich animierte Grafiken verwirklichen.
Die Möglichkeit, eine Farbe, die in der Grafik vorkommt, als "transparent" zu definieren. Mit Hilfe dieses Features lassen sich transparente Hintergründe bei Grafiken definieren, wodurch Sie auf Internetseiten sehr reizvolle Effekte erzielen können.

Transparentes Bild vor grauem Hintergrund

Transparentes Bild vor weißem Hintergrund

Ein Nachteil des GIF-Formates ist, dass es maximal 256 Farben pro Datei speichern kann. Außerdem werden Farbverläufe nicht schön umgesetzt.

Ein Pluspunkt ist dagegen, dass GIF-Grafiken verlustfrei komprimieren. Aufgrund seiner Charakteristik ist das GIF-Format für hochauflösende Grafiken wie Fotos oder fein strukturierte Wallpaper-Hintergründe nicht so sehr geeignet. Ideal ist das GIF-Format für Buttons, Dots, Bars, Symbole und Cliparts.

Das JPEG-Format

Bei JPEG, entwickelt von der Joint Photographic Expert Group, handelt es sich um ein Grafikformat, das auf dem Kompressionsalgorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung basiert. Da dieses Verfahren zunächst nur für statische Grafiken von Bedeutung war, entstand das gleichnamige Dateiformat für Bilder. Mittlerweile wird der JPEG-Algorithmus auch auf Videos angewendet und hat das zukunftsweisende Videoformat MPEG hervorgebracht.

Das JPEG-Grafikformat komprimiert ebenfalls sehr gut und hat gegenüber dem GIF-Format den Vorteil, dass es pro Bild bis zu 16,7 Millionen Farben speichern kann. Der Nachteil ist, dass JPEG mit Verlust komprimiert, d.h. je höher der Kompressionsfaktor, desto schlechter die Qualität der Grafik. Aufgrund seiner Charakteristik eignet sich das JPEG-Format vor allem zum internetgerechten Abspeichern von eingescannten Fotos, aber auch für andere Grafiken, in denen sehr feine Farbverläufe vorkommen.

Beim Abspeichern oder Exportieren in einem Grafikprogramm wird der Kompressionsfaktor festgelegt: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Ein Komprimierungsfaktor von 5 bis 10 ist für eine gute Bildqualität ein sinnvoller Wert.

Es gibt eine Variante von JPEG-Grafiken, sogenannte "progressive JPEG-Grafiken". Dabei wird, ähnlich wie beim GIF-Format in der Variante "interlaced", zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste noch nicht ganz deutliche Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15% der Grafikdatei an den aufrufenden Browser übertragen wurden.

JPG2000 ist die Weiterentwicklung von JPG, dabei sollen sich auch Animationen realisieren lassen und die Komprimierung der Dateien ist bei gleichbleibender Qualität noch stärker.

Das PNG-Format

PNG bedeutet Portable Network Graphic (ausgesprochen: "ping"). Es handelt sich um ein Grafikformat, das eigens für den Einsatz im WWW konzipiert wurde. PNG soll alle Vorteile von GIF und JPEG in sich vereinen:

PNG komprimiert verlustfrei wie das GIF-Format.
PNG unterstützt 16,7 Mio. Farben wie das JPEG-Format.
PNG ist wie GIF und JPEG plattformunabhängig.
PNG unterstützt transparente Hintergrundfarben wie das GIF-Format.
PNG erlaubt das Abspeichern zusätzlicher Informationen in der Grafikdatei, z. B. Autor- und Copyrighthinweise.

SVG - Scalable Vector Graphics

SVG basiert auf Vektoren, dabei lassen sich grafische Elemente wie Linien, Rechtecke, aber auch Text mit Hilfe von einer XML-Datei darstellen. So lautet der Programmiercode für einen roten Kreis mit dem Durchmesser von 30 Pixel und der Kreismitteposition auf dem Bildschirm von x=100 und y=100 wie folgt:

SVG-Grafiken lassen sich nur mit entsprechenden Plug-Ins darstellen.

Pixel und Vektoren

Die beiden Standardformate für Grafiken im WWW, GIF und JPEG, sind beide pixelorientiert. Um ansprechende Grafiken zu erzeugen, ist es jedoch in vielen Fällen besser oder sogar unerlässlich, ein vektororientiertes Grafikprogramm, z. B. Illustrator, Freehand, Fireworks, Flash, etc. zu benutzen.

Hier wird das Bild nicht in einzelne Bildpunkte zerlegt und dargestellt, sondern als mathematische Formel definiert (Vektoren), dadurch können sich Vektorgrafiken beliebig skalieren lassen und benötigen nur wenig Speicherplatz.

Vektorprogramme haben den Vorteil, dass man damit grafische Objekte, z. B. Rechtecke, Kreise, Polygone oder Schriftzüge erstellen und objektorientiert manipulieren kann. Gute Vektorprogramme bieten eine Fülle von Möglichkeiten an, Grafikobjekte zu manipulieren, z.B. mit 3D-Effekten, Farbverläufen oder "wehenden Schatten" zu versehen.

Weiter zu: Bildkomprimierung

Autor: Andreas Konitzer für MediaCulture-Online

Dieser Text ist unter einer Creative-Commons-Lizenz lizenziert. Sie dürfen den Inhalt vervielfältigen, verbreiten und bearbeiten, wenn Sie den Namen des Autors nennen und den Text unter den gleichen Lizenzbedingungen weitergeben. Bitte beachten Sie, dass die Bilder anderen urheberrechtlichen Bestimmungen unterliegen.

Schriftgrößen: