Gut gespeicherte Bilder laden schneller, und das mögen Kunden, gerade auch wenn sie schlechten Empfang haben (auf dem Land, beim Festival oder in der U-Bahn), und mit der Optimierung von Webseiten und Web Apps kenne ich mich als professioneller Web-Entwickler wirklich aus. Da das Thema immer noch für viel Verwirrung sorgt, hier mal eine Skizze und einige Analogien und Erklärungen, die gerne verlinkt und zitiert werden dürfen.
Skizzen und Notizen zu Dateigröße, Bildgröße und Bildqualität
- Handycam(era): große Bilder, klein dargestellt solange ich nicht reinzoome.
- Qualität: JPEG als Mosaik aus Mosaiken mit quadratischen Artefakten, GIF-Palette als Pointillismus (Dithering), beides vermeidbar oder aber bewusst als künstlerische Retro-Ästhetik eingesetzt (s.u.)
- 2 Kilo klingt viel, aber digital sind 2 Kilo(byte) sehr wenig.
Der Verpackungsvergleich ist keine perfekte Analogie, Porto vielleicht eher. Denn digital führt geschicktes Verpacken oft sogar zur Verkleinerung und somit effizienterer und umweltfreundlicherer Datenübertragung. Ähnlich wie sich ein vakuumiertes Kopfkissen viel flacher und kompakter lagern lässt als in seiner fluffigen Form.
Oft ist aber beim Versand das Gewicht entscheidend, und im Web die sogenannte Dateigröße.
Bildgrößen (Abmesssungen) und Bilddateigrößen (Packmaß)
Das Thema Dateigröße verwirrt wiederum viele, denn das Wort Bildgröße hat zweierlei Bedeutungen. Die Größe im Sinne der Abmessungen erscheint offensichtlicher, aber auch nicht auf den ersten Blick. Der Detailreichtum eines Handyfotos erschließt sich erst beim Hineinzoomen. Auch Qualitätsunterschiede lassen sich so besser erkennen.
Aber auch optisch gleiche Bilder können unterschiedlich viel Speicherplatz belegen. Mit modernen Algorithmen komprimierte Versionen erzeugen bei gleicher Abmessung und Qualität eine „leichtere“ kleinere Datei. Wenn wir hier von Verkleinerung reden, dann geht es nicht um Zuschnitt auf Bildausschnitte oder um geringere Abmessungen in Pixeln, sondern um eine geringere Dateigröße, um Speicherplatz und Ladezeit zu sparen.
Das Maß der Dateigröße klingt tatsächlich ähnlich wie Gewichte. 2 Kilo klingt vielleicht viel, wenn du an zwei Kilogramm denkst. Aber digital stehen „2 Kilo“ für zwei Kilobyte, und das ist sehr wenig. Zu wenig für ein normales Foto. Andererseits sind „2 M“ (Megabyte) gar nicht „mega“, sondern fast immer zu viel des Guten. Als Faustregel: mit Ausnahme seitefüllender Poster sollte jede Bilddatei im Internet immer deutlich kleiner als 1 Megabyte sein, besser sogar deutlich unter 500 Kilobyte.
Aber wie sind solche kleinen Dateigrößen überhaupt möglich, wenn schon Smartphone-Kameras Bilddateien speichern, die pro Foto mehrere Megabyte Speicherplatz verbrauchen?
Verlustlose Verkleinerung von Bilddateien
Als erstes erkläre ich die verlustfreie oder verlustlose Verkleinerung bildlich am Beispiel eines Kopfkissens, damit wir uns das ab jetzt immer gut vorstellen können:
In einem fluffigen großen Kopfkissen ist viel Luft enthalten. Es gibt Vakuumverpackungen, aus denen wir die Luft heraussaugen können, um das Kissen ganz flach und klein zu kriegen. Erstaunlicherweise wird es später nach dem Auspacken und Aufschütteln wieder genauso groß und fluffig wie zuvor.
Wir machen nichts kaputt, kommen aber trotzdem auf eine viel kleinere Verpackungsgröße. Praktisch zum Lagern oder auch zum Versenden, weil eines kleineres Paket tendenziell weniger Porto kostet.
In der Mode funktionieren Shapewear-Kleidung und schmal geschnittene Hosen ganz ähnlich, bloß mit Stretch statt Staubsauger.
Es gibt also zweierlei „Bildgrößen“, die Größe des Inhalts und die Größe der Verpackung.
Die Vakuumverpackung bzw. das engere Hemd und die schmalere Hose stehen in diesem Beispiel für verlustfreie Verkleinerung: Gleiches Kissen, flacherer Beutel. Gleiches Bein, schmalere Hose. Der Inhalt bleibt gleich, doch das Volumen wird kleiner.
Verlustreiche Verkleinerung von Bilddateien (Lossy Compression)
Manchmal ist es aber egal, ob der ursprüngliche Inhalt vollständig erhalten bleibt. Das Wort Verlust ist aber irreführend, denn es geht auch hier darum, das Packmaß (Dateigröße) zu verkleinern, ohne dass wir dabei etwas Wesentliches verlieren.
Technisch gesehen verlieren wir zwar an Qualität, wenn wir verlustreiche Dateiformate wie JPEG, webp oder AVIF verwenden. In der Praxis sollte kluge Software mit geschickt gesetzten Voreinstellungen auch hier zu einer kleineren Datei ohne sichtbare oder ohne relevante Verluste führen. Kluge Software bedeutet hier konkret sogenannte perzeptive Algorithmen, die quasi das menschliche Sehen nachahmen. Alle wichtigen Details sollen und können erhalten bleiben. Im Zweifel hilft ein Blick mit menschlichen Augen. Konkret können unter anderem sehr dunkle Flächen vereinfacht werden oder sehr ähnliche Farbtöne einander angeglichen, und zwar beschränkt auf Bildbereiche, in denen das kaum oder gar nicht bemerkbar ist.
Bleiben wir beim Bild des Einpackens, verzichten wir auf das, was wir ohnehin nicht brauchen.
Auf einer kurzen Reise brauche ich beispielsweise keine ganze Tube Zahncreme oder eine ganze Flasche Shampoo. Pröbchen haben objektiv weniger Inhalt, also geht in dem Sinne etwas verloren. Aber mir fehlt nichts.
Wirklich verlustreich zu zerstören, kann übrigens bewusst in Kauf genommen oder mit künstlerischer Absicht forciert werden. Mehr dazu am Ende dieses Artikels.
Metadaten
Abgesehen vom eigentlichen Dateiinhalt legt das Wort Verpackung schon nahe, dass wir auch eine Art Adressaufkleber oder Lieferschein beifügen. Solche sogenannten Metadaten enthalten zunächst mal die klare Angabe des Bildformats und der Bildgröße im Sinne von Abmessungen, also zum Beispiel: 4000 x 2000 Bildpunkte, im AVIF-Format codiert.
Dann kommen aber noch viele optionale Angaben dazu, beispielsweise Ort und Datum, Informationen über Kamera, Linse und andere fotografische Details wie der Belichtungszeit, Fotograf:in und ein Freitextkommentar sind ebenfalls üblich.
Außerdem lassen sich, je nach Format, Farbprofile und Vorschaubilder einbetten, was Dateimanagern und Archiv-Software ebenfalls die Arbeit erleichtert.
Schließlich können Metadaten auch vieles verraten, was beim Anblick des Bildes allein nicht sichtbar ist. Wer auf strengen Datenschutz achten möchte, sollte seine Metadaten überprüfen oder entfernen (lassen). Im Beispiel rechts bleibt trotz Metadaten aber buchstäblich manches im Dunklen.
Für die Dateigröße spielen Metadaten aber keine große Rolle. Üblicherweise sind die Metadaten in Bilddateien sehr klein (Kilobytes) im Vergleich zu den eigentlichen Bildinhalten (Kilo- bis Megabytes).
Wichtiger als Metadaten bleibt zum Erreichen kleiner Dateigrößen die Wahl des geeigneten Dateiformats und einer angemessenen Kompressionsstärke.
Digitaler Verpackungsmüll
Der eigentliche digitale Verpackungsmüll entsteht aber bei der Wahl einer falschen Verpackung (oder Größe).
Wenn ich Logos oder ähnliche kontrastreiche Strichzeichnungen, auch Vektorgrafiken genannt, im verlustreichen JPEG-Format speichere, dann brauche ich ungewöhnlich große Abmessungen und ungewöhnlich hohe Qualitätsfaktoren, um sogenannte Artefakte wie die gefürchteten ungewollten Treppenstufen in eigentlich gleichmäßig diagonalen Linien zu vermeiden.
Und ein unnötig hoch gesetzter Qualitätsfaktor erhöht die Dateigröße ohne sichtbaren Gewinn an Qualität.
Allgemein ist es selten sinnvoll, ein eigentlich verlustbehaftes Dateiformat mit einem Faktor von 90 oder gar 100% Qualität zu ver(sch)wenden.
Wenn ich ein Foto im PNG- oder gar GIF-Format abspeichere, verschwende ich ebenso unnötig Speicherplatz ohne die Bildqualität zu verbessern.
Was ist also das richtige Dateiformat und wie finde ich heraus welches passt?
Es folgt eine Übersicht von Bildformaten und Dateinamen-Endungen, damit wir sie richtig aussprechen und sie uns einfacher merken können.
Bildformate im Überblick: Welches wann verwenden?
Grundsätzlich gibt es drei verschiedene Arten zu speichern:
- verlustfrei im Vektorformat => SVG
- verlustfrei als Rastergrafik => PNG, GIF, WebP, AVIF
- verlustbehaftet als Rastergrafik => JPEG, WebP, AVIF
SVG: das skalierbare Vektorformat
Zeichnungen mit einfarbigen Flächen und klaren Linien profitieren am meisten von verlustfreien Vektorformaten, bzw. dem einen einzigen im Web relevanten Vektorformat, SVG, oder alternativ vom Rasterformat PNG (und früher GIF). Das Vektorformat SVG schlägt bei Logos und klaren Grafiken fast immer alle anderen Formate in jeder Hinsicht: es lässt sich beliebig vergrößert völlig verlustfrei ohne Ecken und Artefakte darstellen, und zudem noch in erstaunlich kleinen Dateien abspeichern.
Fotos mit vielen Details, Verläufen und Schattierungen brauchen hingegen ein fotografisches Bildformat und in der Praxis zumindest einen menschlichen Schulterblick, um zu entscheiden, ob sich die Qualität noch hochwertig, bzw. je nach Einsatzzweck, gut genug, anfühlt. Schmuck im Online-Shop, mit Lichtreflexen, Haut und Haaren vor einem halbdurchsichtigen Vorhang, hinter dem Blumen und Bäume im Wind wehen, sind ästhetisch entweder kitschig oder wirklich schön, aber eben auch eine große Herausforderung, was Datensparsamkeit angeht. Für die gleiche Szenerie als bildschirmfüllendes bewegtes Video gilt das umso mehr.
Aussprache von SVG: Buchstabe für Buchstabe (Ess-Vau-Gee, oder oft auch im Deutschen auf Englisch gesprochen: Ess-Vee-Gee). In der Mehrzahl wird in beiden Sprachen ein -s angehängt, also Ess-Vau-Gees oder alternativ als SVG-Grafiken (Ess-Vau-Gee-Grafiken) benennen.
Dateiendung: .svg
Bildformat JPEG: der Klassiker der Fotografie
Dateiendungen: .JPG, .jpg oder .jpeg
Aussprache: „Jay Pegg“, oder auf deutsch Dschäy-Pägg)
Es wäre wahrscheinlich kein guter Tipp zu sagen, „Jay Pegg“ ist umgekehrt wie Peggy Jay, denn die Dame ist international noch unbekannter als das Dateiformat. JPEG ist die Abkürzung für „Joint Photographic Expert Group“, also eine vereinte Gruppe von Fotografie-Exper:innen, deren gemeinsame Expertise einen Klassiker der Kompression geschaffen hat, der bereits in den 1980er Jahren entwickelt wurde und heute noch verwendet wird.
Bildformate WebP und AVIF: die modernen Nachfolger
Dateiendungen: .webp bzw. .avif
Aussprache von AVIF: Ah! Viv! (mit Betonung auf der ersten Silbe) oder wie die Stadt Tel Aviv
Aussprache von: webp wie zwei englische Wörter: Web Pee (?!)
Moderne Web-Formate wie WebP und AVIF ersetzen inzwischen oft JPEG, PNG und GIF, da sie drastisch kleinere Dateigrößen bei gleicher Qualität bieten. Aus Gründen der Kompatibilität, also für Geräte und Software, die die neuen Bildformate noch nicht darstellen können, werden oft Alternativen bereitgestellt (graceful fallback über Picture-Elemente in HTML, oder serverseitige Varianten über Accept- und Vary-HTTP-Header). WebP und AVIF beherrschen sowohl verlustfreie als auch verlustbehaftete Kompression. Das ist einer ihrer großen Vorteile. PNG bleibt dennoch der Standard für verlustfreie Screenshots, deren Dateigrößen entsprechend hoch sein können.
Während JPEG aus der Zeit der Fotografie kam, profitieren AVIF und webp vom der Erfahrung mit digitalen Videoformaten, von denen viele ursprünglich JPEG ähnelten. WebP basiert auf dem Videocodec VP8, AVIF auf AV1. Schon webp verkleinert die Dateigrößen ohne sichtbare Verluste üblicherweise um 30% im Vergleich zu JPEG. AVIF setzt noch einen drauf und verkleinert um weitere 20 – 25%.
Die Zahlen klingen zwar verlockend, aber realistisch müssen wir unsere Erwartungen einschränken, da das Durchschnittswerte sind, und die Ersparnis im Einzelnen stark von den konkreten Inhalten der Bilder abhängt.
GIF: bewegte Geschichte, Dithering und Glitch Art
Das älteste hier genannte Dateiformat hat eine lange Geschichte hinter sich.
Die Aussprache von GIF, als Wort, und auf deutsch klar mit hartem G vorne, wurde im Englischen kontrovers diskutiert, weil manche „giff“ und andere „jiff“ sagten. Klar ist jedenfalls, dass es nie „gee-eye-eff“ hieß.
GIF hat technisch gesehen keine große Bedeutung mehr, das ursprüngliche GIF-Format erzeugt unnötig große Dateien und ist technisch überholt. Aber der Begriff GIF wird oft noch synonym für Bewegtbilder benutzt (animierte Gifs) weil das damals erst durch GIF möglich wurde. Technisch werden bewegte Grafiken inzwischen meist als webp oder Video gespeichert, auch wenn es weiterhin vereinfacht „GIF“ genannt wird.
Ein weiterer Aspekt ist die reduzierte Farbpalette und das Dithering, bei dem wie im Pointillismus in der Malerei am Anfang des 20. Jahrhunderts, oder wie im analogen Fernsehen, Flächen durch eine Mischung vieler kleiner bunter Punkte dargestellt werden, die eigentlich nur bei zu nahem Hinsehen als solche sichtbar sein sollten. Doch dank Datensparsamkeit und geringer Auflösung damaliger Bildschirme, waren geditherte GIFs sichtbar gepunktet, und auch die verringerte Anzahl an Farben, den damaligen Grafikkarten und Speicherplatzmangel geschuldet, war deutlich erkennbar.
All das verleiht echten GIF-Dateien eine eigentümliche Retro-Ästhetik, die, ähnlich wie klassische Heimcomputer oder analoge Videogeräte, teilweise bewusst zu künstlerischen Zwecken verwendet werden.
Künstlerisch erinnert das, wie gesagt, unter anderem an den Pointillismus, aber auch an die groben Auflösungen und Farbpaletten von Weberei oder industriellen Lochblechen, wie hier in einem Kunstwerk im Wiener Museum Albertina, dessen Urheber mir leider gerade nicht einfällt.
Früher wurden ganze Softwareprogramme ganz ähnlich auf Lochkarten gestanzt und so an die Kunden ausgeliefert.
Von Megabytes konnte damals absolut noch keine Rede sein.
Fazit
Das Grundwissen über Bilddateiformate ist kein künstlerisches oder technikverliebtes Hobby, sondern wichtig, um Bilddateien sinnvoll abzuspeichern, digitalen Verpackungsmüll zu vermeiden und dadurch Speicherplatz zu sparen und die Ladezeit von Webseiten zu beschleunigen.
