Technik-Ratgeber: PNG, JPG, GIF, SVG

Große Monitore mit hoher Auflösung und AdobeRGB-Farbraum sind erschwinglich und Smartphones und Tablets übertrumpfen sich monatlich mit fantastischen Kontrastwerten. Doch was nützt die moderne Hardware, wenn das Foto verwackelt, die Farbübergänge pixelig und die Konturen mit Pixelartefakten übersäht sind. Gegen verwackelte Fotos können wir nichts machen, aber mit dem richtigen Bilddateiformat und sorgfältiger Beurteilung der Kompressionsraten stehen einem attraktiven Slider und auflockernden Illustrationen nichts im Weg.

Die Geschichte der Dateiformate für Internetbilder war schon immer durch eine Ein­schränkung geprägt: Geschwindigkeit. Mit einem immer besser ausgebautem LTE-Netz und hoher mobiler Geschwindigkeit für Smartphones (Ausnahme: in der Bahn), gilt aber auch heute noch: Platz sparen, wo es geht. Browser-Speicherplatz, Funklöcher und SEO-geschwindigkeits­optimierte Webseiten sind nach wie vor Aspekte, die die Kompression von Fotos und Grafiken notwendig macht. Darum sind aus dem Print­bereich bekannte speicher­hungrige Formate wie TIFF oder BMP gänzlich ungeeignet für eine flotte Darstellung im Browser. Stattdessen setzen wir hier auf PNG, JPG und GIF – und jedes Format hat seinen besonderen Einsatzzweck.

1. JPG – Allrounder für Fotos

Für Bilder mit vielen Farben oder Grafiken, in denen sehr feine Farbverläufe enthalten sind, ist das JPG-Format prädestiniert, da es die Darstellung von 16,7 Millionen verschiedenen Farben erlaubt.

Damit die Dateigröße solcher Bilddateien nicht ins Uner­messliche wächst, hat sich die Joint Photographic Experts Group (JPEG)  einen Trick überlegt: Auf Basis eines psycho­visuellen Modells der menschlichen Sicht werden vor dem Speichern des Bildes die Daten entfernt, die man nicht, oder nur sehr vage wahrnimmt. An JPGs ist das gut erkennbar, wenn sie vergrößert dargestellt werden und Halo-Effekte und Artefakte auffallen.

Das Entfernen von Daten zugunsten der Dateigröße geschieht über die Kompression. Beim Speichern eines JPG-Bildes gibt man eine Kompressions­rate vor, die die Größe der Datei und die Qualität des Bildes direkt beeinflussen. Je größer die Kompressionsrate, desto kleiner die Datei und desto schlechter die Qualität.

Warum 16,7 Millionen Farben?

16,7 Millionen Farben entsprechen etwa dem Farbraum, in dem das menschliche Auge gerade noch marginale Unter­schiede zwischen den Farben erkennt. Die Zahl errechnet sich aus den miteinander multiplizierten 256 Schattierungs­werten der einzelnen drei additiven Grundfarben Rot, Grün und Blau.

 

Beispielbild

Bildinformationen

Empfehlung

Original

Im Originalfoto sind alle Farbflächen sauber voneinander getrennt, die kleinen Steine auf dem Vulkan sind klar erkennbar

800 KB (TIFF, unkomprimiert)

Im Original­foto sind alle Farb­flächen sauber voneinander getrennt, die kleinen Steine auf dem Vulkan sind klar erkennbar.

Qualität 75

Die Übergänge zwischen Wolke, Himmel und Vulkankamm sind stufig, insgesamt ist das Foto aber akzeptabel

70 KB (JPG)

Über 90% Speicherersparnis zum Original.

Die Übergänge zwischen Wolke, Himmel und Vulkan­kamm sind stufig, insgesamt ist das Foto aber akzeptabel.

Qualität 50

Verstärkte Stufenbildung bei Übergängen, Details werden unscharf. Diese Qualität ist für Webbilder bereits fraglich

30 KB (JPG)

Im Vergleich zum Vorgänger nochmal über die Hälfte Speicher gespart.

 

Verstärkte Stufen­bildung bei Übergängen, Details werden unscharf. Diese Qualität ist für Web­bilder bereits fraglich.

Qualität 25

Weiterer Detailverlust, extreme Blockbildung – ein No-go fürs Web

15 KB (JPG)

Schnell im Internet übertragen, aber unbrauchbar.

Weiterer Detail­verlust, extreme Block­bildung – ein No-go fürs Web.

Einmal gespeichert, lassen sich entfernte Informationen aus den komprimierten Bildern nicht wiederherstellen. Darum wird JPG auch nur zur Ausgabe im Webbrowser verwendet. Zur Archivierung und Weiter­bearbeitung von Bildern ist auf ein Format zu setzen, das verlustfrei komprimiert, z.B. PSD, TIFF oder PNG.

2. GIF – Für einfache Grafiken

Bei Grafiken mit wenigen Farben kommt das GIF-Format zum Einsatz. Da es nur 256 Farben speichert, eignet es sich nicht für foto­realistische Bilder, sondern für grafische Logos, Cliparts oder Illustrationen. GIF-Bilder werden ebenfalls komprimiert, aufgrund der geringen Farb­anzahl sogar verlustfrei, bei wiederholtem Speichern entstehen also keine zusätzlichen störenden Artefakte.

Wegen der stark reduzierten Farbpalette ist das GIF-Format für Fotos ungeeignet
Wegen der stark reduzierten Farbpalette ist das GIF-Format für Fotos ungeeignet

Das mittlerweile fast 30 Jahre alte Format wartet mit einer Besonderheit auf: Animationen. Durch Hinter­einander­stellen mehrerer Bilder in einer Datei lassen sich daumenkino­artige Mini­videos erzeugen. Natürlich ist das Bild­format nicht auf echte Videos eingestellt und kann unmöglich mit technisch anspruchsvollen Film-Codecs konkurrieren. GIF-Animationen verwendet man deshalb heutzutage für kleine unscheinbare Effekte, hüpfende Hamster , Cat-Content oder Meme's, der digitalen (Kunst-)form des Internet des 21. Jahr­hunderts, welche dem GIF-Format zu neuer Poplariät verholfen hat.