Seit den Anfängen der Computergrafik wurden Dutzende von Speicherformaten für Rastergrafiken (Pixelgrafiken) entwickelt. Für Webgrafik sind nur drei dieser Formate von Bedeutung: GIF, JPEG und PNG. Andere Formate sind entweder zu stark auf Printmedien optimiert, oder sie sind proprietär an bestimmte Software gebunden, oder sie sind aus heutiger Sicht veraltet.
Das GIF-Format
Dateien des GIF-Formats haben die übliche Dateinamenendung .gif und den MIME-Typ image/gif. In HTML lassen sich GIF-Grafiken mit Hilfe des img-Elements einbinden (siehe Pixelgrafik-Referenzen).
GIF steht für Graphics Interchange Format und wurde 1987 vom damaligen Online-Anbieter CompuServe eingeführt. Es zeichnet sich durch eine hohe und verlustfreie Kompression aus, die allerdings wesentlich mit reduzierten Farbwerten erreicht wird. Im Online-Bereich, wo die Übertragung von Daten zunächst viel Geld und Zeit kostete, setzte sich das GIF-Format schnell durch. Der heute weit verbreitete Standard des GIF-Formats ist das so genannte „89er-Format“. Dieses Format bietet drei Möglichkeiten an, die das GIF-Format für den Einsatz im Web besonders interessant machen:
- Interlaced: Eine Grafik, die mit dieser Option abgespeichert ist, wird beim Laden nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Dabei erscheint die Grundstruktur der Grafik sehr schnell am Bildschirm des Anwenders. Beim weiteren Ladevorgang wird die Grafik dann immer deutlicher und feiner aufgelöst am Bildschirm angezeigt.
- Animation: Das GIF-Format bietet die Möglichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern, verbunden mit Optionen zur zeitlichen Steuerung der Einzelgrafiken. Dadurch werden animierte GIF-Grafiken möglich.
- Transparenz: Das GIF-Format arbeitet mit Farbpaletten, also mit einer begrenzten Anzahl „indizierter Farben“. Dabei besteht die Möglichkeit, eine dieser Farben als transparent zu definieren. Bei der Anzeige scheinen dann Elemente, die unterhalb der Grafik liegen, an den Stellen durch, wo die Grafik transparent ist.
Ein Nachteil des GIF-Formats ist, dass es maximal 256 Farbwerte pro Datei speichern kann. Es sei denn, man speichert mehrere Einzelbilder mit unterschiedlichen Paletten, die gleichzeitig angezeigt werden. Davon wird in der Praxis jedoch kaum Gebrauch gemacht. Ein Pluspunkt des GIF-Formats ist dagegen, dass die Grafiken verlustfrei komprimieren. Aufgrund dieser Charakteristika ist das GIF-Format für hoch auflösende Grafiken wie Fotos nicht geeignet. Beliebt ist es dagegen bei Grafiksorten wie einfachen Buttons, Symbolen und Cliparts.
Das GIF-Format war über einige Jahre hinweg problematisch, da es einen Kompressions-Algorithmus nutzt, auf den die Firma Unisys 1983 ein Patent angemeldet hatte. Zwischen 1994 und dem Auslaufen des Patentschutzes 2003 bzw. 2004 mussten Software-Programme, die das GIF-Format implementierten, Lizenzgebühren für das GIF-Format bezahlen. Lange Zeit herrschte Unsicherheit darüber, ob Unisys noch weitere Versuche unternehmen würde, mit dem erfolgreichen Format Geld zu machen. Diese Situation war eine der Ursachen dafür, warum schließlich das offene PNG-Format entwickelt wurde.
Das JPEG-Format
Dateien des JPEG-Formats haben die übliche Dateinamenendung .jpg oder .jpeg und den MIME-Typ image/jpeg. In HTML lassen sich JPEG-Grafiken mit Hilfe des img-Elements einbinden (siehe Pixelgrafik-Referenzen).
JPEG steht für Joint Photographic Expert Group, also nicht für den Namen des Grafikformats, sondern für den Namen der Korporation, die das Format entwickelt hat. Das JPEG-Verfahren besteht aus einem Set von Kompressionsalgorithmen für Datenströme. Das gleichnamige Dateiformat für Grafiken ist einfach eine Anwendung besonders eines dieser Algorithmen auf Pixelgrafiken. Mittlerweile wird das JPEG-Verfahren auch auf Videos angewendet und hat das beliebte Video-Format MPEG hervorgebracht.
Der verbreitetste Algorithmus des JPEG-Grafikformats komprimiert wie das GIF-Format sehr gut und hat gegenüber dem GIF-Format den Vorteil, dass es pro Bild bis zu 16,7 Millionen Farben speichern kann. Er arbeitet deshalb nicht wie der GIF-Algorithmus mit Farbpaletten bestimmter Farben, sondern mit dem gesamten RGB-Farbspektrum. Der Nachteil des üblichen JPEG-Algorithmus ist, dass er mit Verlust komprimiert. Je höher der Kompressionsfaktor, desto schlechter die Qualität der Grafik.
Beim JPEG-Format können Sie bei besseren Grafikprogrammen zwei Parameter selbst bestimmen:
- DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die Sie nur für die Anzeige in Web-Seiten benötigen, genügt ein Wert zwischen 70 und 100 dpi. Falls Sie die Grafik ausdrucken wollen, benötigen Sie allerdings deutlich mehr dpi.
- Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Je geringer der Kompressionsfaktor, desto größer die Datei.
Verluste durch Kompression entstehen bei JPEG-Grafiken vor allem bei scharfen Farbübergängen im Bild, also bei Ecken und Kanten von abgebildeten Gegenständen („Ränder fransen aus“). Für Bilder mit wenigen Farben, aber klaren Konturen, also z.B. für einfache Zeichnungen, scharfe Schriftzüge usw. ist das JPEG-Format deshalb nicht geeignet. Seine Stärke zeigt das Format dagegen beim Abspeichern von Fotos und anderen Grafiken, in denen sehr feine Farbverläufe vorkommen. Selbst bei geringer Kompression sind die Dateigrößen schon um ein Vielfaches kleiner als etwa bei unkomprimierten Bitmap-Grafiken. Sogar bildschirmfüllende Fotos lassen sich mit JPEG bei brauchbarer Qualität auf Dateigrößen bringen, die im Web als akzeptabel gelten können.
Es gibt eine Variante von JPEG-Grafiken, so genannte „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 Web-Browser übertragen wurden.
Das PNG-Format
Dateien des PNG-Formats haben die übliche Dateinamenendung .png und den MIME-Typ image/png. In HTML lassen sich PNG-Grafiken mit Hilfe des img-Elements einbinden (siehe Pixelgrafik-Referenzen).
PNG bedeutet Portable Network Graphic (ausgesprochen: PING). Es handelt sich um ein Grafikformat, das eigens für den Einsatz im Web konzipiert wurde und dessen Normierung wie diejenige von HTML, CSS, XML und andere Web-Technologien vom W3-Konsortium besorgt wird. Die Empfehlung (Recommendation) des W3-Konsortiums zu PNG stammt aus dem Jahr 1996. Das entsprechende Dokument ist unter dem Titel PNG (Portable Network Graphics) Specification auf den Seiten des W3-Konsortiums zu finden.
PNG soll die Vorteile von GIF und JPEG in sich vereinen und zeichnet sich durch folgende Charakteristika aus:
- Verlustfreie Kompression: PNG komprimiert verlustfrei wie das GIF-Format. Der eingesetzte Kompressionsalgorithmus arbeitet dabei ähnlich wie der des ZIP-Formats. Wiederholungen von Pixelmustern im Bild werden durch Meta-Informationen über diese Muster ersetzt, was vor allem bei Grafiken wie Cliparts, Schriftzügen usw. zu hohen Kompressionsdichten führt. Weniger stark greift dieser Algorithmus dagegen bei Fotos und Grafiken mit vielen feinen Farbübergängen. Das ist ganz ähnlich wie beim Komprimieren von Daten zu ZIP-Dateien, wo sich Binärdateien mit wenigen erkennbaren Byte-Mustern weniger stark komprimieren lassen als z.B. Textdateien.
- Farbtiefe plus Transparenz: PNG unterstützt wie das JPEG-Format 16,7 Mio. Farben, wahlweise aber auch das Abspeichern mit indizierten Farben, also mit einer begrenzten Farbpalette. So bleibt das Format flexibel und ist für alle Arten von Grafiken nutzbar. Neben den drei Farbwerten für Rot, Grün und Blau kann das PNG-Format zusätzlich noch einen vierten Wert pro Pixel speichern, nämlich den Alphakanal. Der Alphawert speichert den Transparenzgrad des Pixels. Auf diese Weise werden deutlich feiner abgestufte Transparenz-Effekte möglich, als es mit dem GIF-Format möglich ist.
- Interlaced-Funktion: Wie das GIF-Format und auch das JPEG-Format in der Variante "progressive" unterstützt PNG das schichtweise Aufbauen der Grafik (Interlaced-Funktion). Bei PNG genügen bereits 1-2% übertragene Daten, um das Bild schemenhaft anzeigen zu können.
Informationen zur Gammakorrektur: das PNG-Format erlaubt das Abspeichern einer Reihe von Zusatzinformationen zum Bild, darunter den Gammawert, der z.B. bei der Aufnahme eines Fotos maßgeblich war. Web-Browser, die das Bild anzeigen, könnten diese Information beispielsweise dazu nutzen, um bei der Anzeige des Bildes eine automatische Gammakorrektur abhängig vom eingesetzten Bildschirm und Betriebssystem vorzunehmen. Dieses Feature kann vermeiden helfen, dass ein und dieselbe Grafik auf verschiedenen Bildschirmen und unter verschiedenen Betriebssystemen oft so unterschiedlich aussieht.
- Informationen zu Bildherkunft und Copyright: das PNG-Format erlaubt das Abspeichern von Textfeldern zu Bildtitel, Bildautor, Bildbeschreibung, Copyright, Erstellungsdatum, Erstellungs-Software, Datenquelle sowie zu rechtlichen und sittlichen Absicherungshinweisen.
Animierte Grafiken wie beim GIF-Format sind mit dem PNG-Format allerdings nicht möglich.
Es gibt also insgesamt viele Gründe, die für das PNG-Format sprechen. Weniger als Konkurrenz zum JPEG-Format (JPEG komprimiert bei Fotos doch deutlich stärker als PNG - die PNG-Dateigrößen hoch auflösender Fotos sind nicht sonderlich web-freundlich), aber als Konkurrenz zum GIF-Format. Nicht nur alle modernen Browser, sondern auch die meisten Grafikprogramme beherrschen das PNG-Format.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.