Digitale Bildformate

Bild: Sophi & Cie, Lizenz: CC BY-SA

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 Graphics-Interchange-Format wurde speziell für den Online-Einsatz entwickelt und 1987 von CompuServe eingeführt. Es zeichnet sich durch eine hohe Komprimierungsdichte aus. Zum Vergleich: Bitmap-Dateien im BMP-Format (Windows-Standard) speichern völlig unkomprimiert und sind daher 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.

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.

Zusammenfassung

Dieses Format ist neben JPEG das im Web am meisten gebräuchliche Format. Es eignet sich aber nicht für Fotos, da es nur 256 Farben erlaubt. Dafür werden aber reine s/w-Strichzeichnungen und einfache Logos mit begrenzter Farbzahl damit sehr gut komprimiert und sehen deutlich besser aus als mit JPEG. Außerdem ist es mit GIF auch möglich eine transparente Farbe zu definieren, was beispielsweise bei nicht rechteckigen Bildern und Logos auf farbigem Hintergrund sehr nützlich ist, um beispielsweise einen störenden Rand zu vermeiden. Darüber hinaus gibt es animated-GIFs, das sind kleine Bildsequenzen („Filmchen“) die vom Browser z.B. in einer Endlosschleife abgespielt werden um z.B. Bewegungseffekte darzustellen.

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.

Bild: Pixabay, Lizenz: CC0

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 Prozent 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.

Zusammenfassung

JPG oder JPEG speichert verlustbehaftet, erreicht aber – je nach Qualität – enorme Kompressionsfaktoren. Die meisten Digitalkameras speichern standardmäßig in JPG, um möglichst viele Bilder auf der teuren Speicherkarte unterzubringen.  Die meisten Programme erlauben es, die Kompressionsrate in 100 Stufen zu wählen, wobei 100 die beste Qualität erzielt aber auch am meisten Speicherplatz benötigt. Für Bilder im Web sind Werte von 75 bis 90 geeignet, für die Archivierung sollte man aber eine höhere Qualität oder besser gleich ein verlustlos komprimierendes Format verwenden. Mit 95 bis 98 lassen sich noch gute Kompressionsfaktoren erreichen ohne dass die Qualität nennenswert leidet.

Das PNG-Format

PNG bedeutet Portable Network Graphic (ausgesprochen: „ping“). Es handelt sich um ein Grafikformat, das eigens für den Einsatz im World Wide Web 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:

 

<circle cx="100" cy="100" r="15" fill="red" />

 

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

TIF (TIFF) – Tagged Image File Format

TIF speichert wahlweise unkomprimiert oder komprimiert (es gibt meist verschiedene Kompressionsverfahren zur Auswahl, die aber nicht immer zu allen Programmen kompatibel sind, mit LZW komprimierte Bilder sollte man eigentlich mit jedem gängigen Programm öffnen können). Für die Archivierung wichtiger Fotos und zum Zwischenspeichern bei der Bearbeitung ist TIF sicher das geeignetste Format.

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.

Pädagogische Praxis

Unterrichtsidee: Bilderrätsel Frühblüher

Sachunterricht, Kasse 1–2, GS: Die Unterrichtseinheit zeigt einen visuell anregenden Einstieg in die Begegnung mit den ersten Blumen des Frühlings.weiterlesen

Unterrichtsmodul: Grundlagen der Fotografie

Deutsch/Sachunterricht, Klasse 2, GS: Fotografieren bietet einen spielerischen Einstieg in die praktische Medienarbeit und lässt sich gut in den Unterricht in der Grundschule einbinden.weiterlesen

Unterrichtsidee: Wir bauen ein Mini-Floß

Deutsch/Sachunterricht, Klasse 3–4, GS: Der Unterrichtsvorschlag enthält eine Schritt-für-Schritt-Bauanleitung für ein Mini-Floß aus Holz. Die Herstellung wird in ihren wichtigsten Schritten fotografisch dokumentiert und das Ergebnis aufbereitet.weiterlesen

Weitere Anregungen für die pädagogische Praxis