Grafikdateiformate gibt es wie Sand am Meer: JPG, BMP, TIFF, GIF, RAW, PNG — wer kein professioneller Grafikdesigner ist, verliert da schnell den Überblick. Wenn auch Sie nicht wissen, welches Format wofür am sinnvollsten ist, haben wir hier ein paar Infos und Tipps für Sie.

Digitale Grafikdateiformate für die Online-Darstellung

Für die Darstellung auf Webseiten werden hauptsächlich drei Formate verwendet: JPG (auch JPEG), PNG und GIF. Diese Formate sind mit den meisten Browsern kompatibel und eignen sich gut für die Übertragung übers Internet, da sie komprimierte Formate sind, die Grafikdateien also nicht allzu groß sind.

Aber worin bestehen die Unterschiede zwischen diesen Formaten? Ohne zu sehr ins Detail zu gehen, bestehen sie hauptsächlich in der Kompression und der Qualität der Grafik.

Kompression

Wenn es um digitale Kompression geht, fallen zwei Begriffe immer wieder: „lossy“ (verlustbehaftet) und „lossless“ (verlustlos) … aber was bedeutet das genau?

Bei der verlustbehafteten („lossy“) Kompression werden Teile der ursprünglichen Daten (in der Regel überflüssig und nicht wahrnehmbar) dauerhaft aus der Datei entfernt, wodurch die Dateigröße drastisch reduziert werden kann. Das ist sowohl bei JPG als auch bei GIF so. Ob dieser Verlust wahrnehmbar ist oder nicht, hängt vom Bildinhalt und von der Stärke der Kompression ab.

Verlustlose Kompression bedeutet, dass die Dateigröße reduziert wird, ohne dass Daten dauerhaft entfernt werden. Das ist bei PNG der Fall und bedeutet, dass das Bild vor und nach der Kompression absolut gleich aussieht.

Qualität

Viele Kriterien haben eine Auswirkung auf die Qualität eines Bildes. Im Rahmen dieses Artikels wollen wir uns aber auf das Element beschränken, das mit bloßem Auge am leichtesten zu erkennen ist: Farbe.

Was die Qualität der Farbdarstellung angeht, sind JPG und PNG dem Format GIF um Lichtjahre voraus. In ihnen können Millionen von Farben dargestellt werden, in GIFs nur 256.

Sonstige Kriterien

Weitere Kriterien, anhand derer Sie das passende Dateiformat für einen konkreten Einsatz aussuchen können, sind:

• Transparenz: Wenn Sie eine Figur auf eine separate Hintergrundgrafik legen möchten, sollten Sie für die Figur das Format PNG wählen, da weder JPG noch GIF Transparenz unterstützen.
• Animationsschleifen: Fast 10 Jahre waren Animationsschleifen weitgehend in der Versenkung verschwunden. Jetzt sind sie wieder schwer im Kommen. Wenn Sie solche Grafiken in Ihren E-Learning-Kurs einbauen möchten, ist GIF das Format der Wahl, denn keines der anderen Formate unterstützt sich wiederholende Animationen.

Welches Format für welchen Zweck?

Wenn es jetzt also konkret wird, wonach entscheiden Sie am besten, welches Dateiformat Sie für welche Grafik wählen? Die folgende Checkliste stellt die Vor- und Nachteile der drei Formate übersichtlich gegenüber:

JPG: Das beste Format, wenn große Fotos mit vielen Farben stark komprimiert werden sollen. Für Typographie oder andere Bilder mit scharfen Linien und Kanten nicht geeignet. Sie werden im JPG-Format fast immer verschwommen dargestellt.

• verlustbehaftete („lossy“) Kompression (einige Daten des Originals werden entfernt, um die Dateigröße zu reduzieren)
• Stärke der Kompression kann frei gewählt werden
• Millionen von Farben
• kleinste Dateigröße
• unterstützt Interlacing für progressives Laden des Bildes

PNG: Das beste Format für Fotos, wenn die Dateigröße keine große Rolle spielt oder wenn Transparenz benötigt wird.

• verlustlose Kompression (es werden keine Daten des Originals entfernt)
• Millionen von Farben
• Dateigröße nicht so klein wie bei JPG
• unterstützt Transparenz

GIF: Ideal für kleine Symbole, einfache Diagramme oder Grafiken mit wenigen Farben. Am häufigsten eingesetzt für Animationsschleifen.

• verlustlose Kompression (es werden keine Daten des Originals entfernt)
• höchstens 256 Farben
• Animation möglich
• unterstützt Interlacing für progressives Laden des Bildes
• unterstützt „Single-Bit-Transparenz“ (eine Farbe kann transparent gemacht werden)

Wir hoffen, Ihnen haben diese Infos und Tipps geholfen, einen besseren Überblick über die verschiedenen Grafikdateiformate zu gewinnen. Und für alle, die sich noch weiter in dieses Thema einlesen möchten, haben wir noch mehr Artikel zum Thema Grafiken im E-Learning-Kontext auf Lager:

• 7 Tipps für die Auswahl von Bildmaterial für Ihre E-Learning-Kurse
• Graphic Formats: What E-Learning Designers Need to Know (auf Englisch)
• 7 Ways to Use Graphics for E-Learning (auf Englisch)

Wenn Ihnen dieser Beitrag gefallen hat, abonnieren Sie doch unseren Blognewsletter.