Anmerkung: Nach der Einleitung folgt eine Anleitung, wie man kleine (von der Dateigröße), und schnell zu ladende Bilddateien erzeugt und welches Bildformat für was man verwenden sollte.
Gestern ist mir auf der Patreon-Seite einer Künstlerin, die ich unterstütze, etwas untergekommen, was mir immer wieder gelegentlich unterkommt. Lange Ladezeiten. In diesem Fall waren große Bildateien schuldig: Es waren neun Bilder, die hauptsächlich aus einem gezeichneten Hintergrund und Text im Vordergrund bestanden. Die Bilddateien waren 8 MiB bis 13 MiB groß. Jede Datei hat einige Sekunden Ladezeit gehabt.
Nun war ich fast dran einen freundlichen (!) Kommentar zu hinterlassen und die Künstlerin zu bitten, die Bilder kleiner zu machen und besser zu komprimieren. Da es aber ein sehr persönlicher und emotionaler Post war, schien mir das unangemessen. Aber ich muss das trotzdem irgendwie loswerden, deswegen dieser Post. Und damit es auch produktiv ist, versuche ich das so zu erklären, dass auch technisch unbedarfte Leute es anwenden können. Speziell möchte ich etwas zu folgenden Punkten erklären:
- Bildauflösung und Dateigröße
- Bilddateiformate und Bildkompression
- und vielleicht noch ein paar Details, die weniger wichtig sind
Von oben nach unten wird es technischer, aber zumindest bis zu Punkt 2 versuche ich, es für alle verständlich zu machen.
Bildauflösung und Dateigröße
Das einfachste, um die Dateigröße zu verringern, ist die Auflösung des Bildes. Wenn man Bilder hochlädt, sollte man sich Gedanken darüber machen, in welchem Kontext und auf welchen Geräten die Bilder angezeigt werden.
Ein Beispiel aus dem Post der Künstlerin, den ich oben erwähnt habe: Es war eine Bildserie aus neun Bildern, wobei man bei jedem Bild kurz da bleibt und dann weitergeht. Meine Bildschirmauflösung ist 1920×1080. Das ist durchaus eine typische Bildschirmauflösung. Viele Leute nutzen heute Tablets oder Smartphones mit kleineren Auflösungen.
Die Bilder hatten eine Auflösung von 2800×3200. Sie waren also drei mal so hoch, wie man sie typisch braucht. Und auch wenn man einen Bildschirm mit höherer Auflösung hätte, würden kleinere Bilder hier trotzdem reichen, um die Botschaft zu übermitteln.
Und die Bildgröße skaliert quadratisch. Wenn man das Seitenverhältnis beibehält und jede Seite drei mal so lang macht, verneunfacht sich die Fläche. Und damit verneunfacht sich auch in etwa der Speicherbedarf.
In diesem Beispiel könnte ich das Bild auf 945×1080 herunterskalieren. Dann wäre es immernoch höher als ich es auf meinem Bildschirm anzeige (weil der Browser auch noch Platz einnimmt), aber statt 13 MiB nur etwa 1,4 MiB groß. Deutlich kleiner also.
Faustregeln zur Bildgröße
- überlegt euch, wie groß eure Bilddatei sein muss
- skaliert sie runter, wenn sie zu groß ist, das geht mit jedem Bildverarbeitungsprogramm, vermutlich auch mit MS Paint (Tipp: Behaltet die Originaldatei)
- wenn ihr trotzdem das Original in voller Pracht zeigen wollt: ladet es separat hoch und verlinkt es. So können Leute, die nur einen kurzen Blick darauf werfen können, die Datei schnell laden und die anderen haben trotzdem Zugriff auf die volle Größe
- viele große Plattformen machen das übrigens automatisch, aber Patreon offensichtlich nicht
Bilddateiformate und Bildkompression
Es gibt verschiedene Bildformate. Ich konzentriere mich hier auf die, die man im WWW verwenden Kann: GIF, PNG, JPEG, WebP und AVIF (SVG ist hier ein Sonderfall, den ich weiter unten beschreibe).
Unterschiedliche Bildformate haben unterschiedliche Eigenschaften. Manche unterstützen nur eingeschränkte Farbbereiche. Manche können Transparent sein. Manche können animiert sein. Für diesen Post hier ist aber vor allem eins wichtig: Die Formate haben unterschiedliche Kompressionsverfahren.
Bilddateien sind naturgemäß groß, weil sie für jeden Pixel einen Farbwert speichern müssen. Oft haben Bilder aber gewisse Muster, die sich effizenter speichern lassen als jeden Pixel einzeln. Dabei gibt es zwei grundsätzlich unterschiedliche Verfahren, wie Bilder komprimiert werden können: verlustfrei und verlustbehaftet
Verlustfreie Kompression
Verlustfreie Kompression ist ziemlich genau das, wonach es klingt: Die Bilddatei wird ohne Verluste kleiner gemacht. Die Auflösung bleibt gleich, die Farbwerte bleiben gleich, man kann das Eingangsbild 1:1 wieder aus der komprimierten Version erstellen.
Verlustfreie Kompression funktionier am besten mit großen, einfarbigen Flächen und scharfen Kanten dazwischen. Und mit „einfarbig“ meine ich wirklich einfarbig. Nicht „eine Fläche hat ungefähr dieselbe Farbe“, wie man es zum Beispiel in Fotos hat. Ein Beispiel: Man scanne ein weißes DIN-A4-Blatt ein. Als Mensch würde man sagen, dass das Blatt einheitlich weiß ist. Bei einem ausreichend guten Scanner stellt sich aber heraus: im Papier sind jede Menge kleine Strukturen.
Für den Computer macht das einen riesigen Unterschied. Vereinfacht gesagt kann er z.B. bei einem 1000×1000 Pixel großen, komplett weißen Bild sagen: „Das sind 1000×1000 Pixel, alle weiß“ und hat damit das Bild perfekt beschrieben. Bei einem 1000×1000 Pixel großen Scan einer weißen Papierseite ist praktisch jedes Pixel ein kleines bisschen anders, und zwar um einen zufälligen Betrag. Das lässt sich deutlich schlechter beschreiben.
Allgemein also: Am Computer erstellte Bilder mit einfarbigen flächen und scharfen Kanten lassen sich gut komprimieren. Ein Beispiel für ein solches Bild wäre eines meiner Fordite-Bilder:
Verbreitete Bildformate mit verlustfreier Kompression sind GIF, PNG und WebP (bei WebP aufpassen, WebP kann sowohl verlustfreie als auch verlustbehaftete Kompression). Empfehlung: Nehmt WebP, das hat üblicherweise die beste Kompression dieser Formate. Wenn die Seite WebP nicht unterstützt, nehmt PNG. GIF hat eine deutlich schlechtere Kompression und unterstützt weniger Farben in einem Bild.
Die Bilder, über die ich mich in der Einführung beschwert habe, waren handgezeichnete Bilder. Schöne Bilder, aber viel zu unregelmäßig für verlustfreie Kompression. Die Ursprungsdatei war 13 MiB groß, mit ein paar Tricks (siehe „Kompression optimieren“ weiter unten) habe ich eine 5,9 MiB große PNG-Datei herausgekriegt. Mit verlustfreiem Webp kommt man runter auf 4,4 MiB. Immernoch ziemlich groß
Verlustbehaftete Kompression
Das Gegenstück zu verlustfreier Kompression ist verlustbehaftete Kompression. Und wie der Name schon sagt, verliert das Bild etwas bei der Kompression. Idealerweise Informationen, die man beim Betrachten des Bildes nicht wirklich wahrnimmt. Verlustbehaftete Kompression eignet sich gut für „natürliche“ Bilder, wie zum Beispiel Fotos oder Handzeichnungen, aber auch recht gut für Zeichnungen, die am Computer erstellt wurden, aber so komplex sind, dass sie recht unregelmäßig sind.
Ein Beispiel dafür wäre dieses Foto:
Bei Bildern solcher Art ist es meist nicht wichtig, wenn ein paar Details verloren gehen. Aber es gehen Details verloren. Man kann das gerade bei Bildern gut sehen, die sich sehr gut für verlustfreie Kompression eignen. Ein Beispiel hier wäre Napstablook:
Wenn ich den jetzt stark verlustbehaftet komprimiere, sieht er so aus:
Wenn ihr das bei der Auflösung nicht seht, zoomt herein, dann sieht man es ganz deutlich: Jede Menge graue Flecken auf dem weißen Geist. Das nennt man „Artefakte“ (oder „Kompressionsartefakte“), weil es durch die Kompression hinzugefügte Eigenschaften des Bildes sind.
Üblicherweise kann man bei verlustbehafteter Kompression eine „Qualität“ angeben, die von 0 bis 100 geht. Je höher die Qualität, desto weniger auffällig sind die Artefakte, aber desto schlechter ist die Kompression. Das ist ein Trade-off. Wenn ihr beim Abspeichern eines Bildes eine Qualität angeben sollt, dann ist die Kompressionsqualität gemeint. Bei verlustfreien Formaten hingegen muss man keine Qualität angeben, denn sie geben das Ursprungsbild perfekt wieder.
Verbreitete Formate mit verlustbehafteter Kompression sind JPEG, WebP (auch hier: aufpassen, WebP unterstützt beides) und AVIF.
Empfehlung: nutzt WebP oder AVIF, wenn die Website, auf der ihr das Bild hochladet, das unterstützt. Sonst nutzt JPEG. Brauchebare Qualitätswerte sind bei JPEG 90, beo WebP 70 und bei AVIF 50. Früher gab es mal online tools, um die Formate bei verschiedenen Qualitäten direkt zu vergleichen, ich konnte aber mit einer kurzen Suche keine mehr finden. Im Zweifelsfall müsst ihr herumprobieren, wie viel Qualitätsverlust für den gegebenen Anwendungsfall ertragbar ist.
Faustregeln zu Bildformaten
- nutzt verlustfreie Formate wie PNG und WebP (in der verlustfreien Variante) für am Computer erstellte Bilder mit größeren, einfarbigen Flächen und scharfen Kanten
- nutzt verlustbehaftete Formate wie JPEG, WebP (in der verlustbehafteten Variante) oder AVIF für Fotos, von Hand gemalten oder gezeichneten Bilden und Ähnlichem
- vermeidet, dasselbe Bild mehrfach in Kette in verschiedenen Formaten verlustbehaftet zu komprimieren, die Qualitätsverluste akkumulieren sich
- behaltet immer das Originalbild irgendwo, wenn ihr verlustbehaftet komprimiert
Anderer Krams
Hier wird es ein bisschen technischer, aber trotzdem nicht übermäßig kompliziert.
Kompression optimieren
Nicht jede Kompression ist gleichwertig. Insbesondere bei PNG-Dateien kann man oft viel Platz sparen, wenn man die Datei mit passenden tools wie optipng oder zopflipng optimiert. Der Tradeoff ist hier: Man wendet einige Sekunden bis Minuten an Rechenzeit auf, um die Kompressionsrate eines Bildes zu verbessern. Das lohnt sich besonders, wenn man erwartet, dass ein Bild sehr oft heruntergeladen wird.
optipng läuft deutlich schneller als zopflipng, aber zopflipng hat üblicherweise ein bisschen kleinere Ergebnisse. In den meisten Fällen sollte optipng ausreichen. WebP (verlustfrei) ist aber in der Regel schneller als beide und erzeugt kleinere Dateien. Deswegen wenn möglich WebP verwenden.
Auch für JPEG gibt es ein Optimierungstool namens jpegoptim, dass JPEG-Dateien verlustfrei optimiert (d.h. der Verlust wird nicht schlimmer, als er es ohnehin schon ist). Die Verkleinerung ist aber deutlich geringer als bei den PNG-Optimierungstools. Auch hier: WebP (verlustbehaftet) und AVIF erzeugen bei vergleichbarer Bildqualität kleinere Dateien.
Bilder in HTTP und HTML
Wenn man selber eine Website schreibt, hat man mehr Freiheiten, was die Bildformate angeht. Hier ein paar Tipps:
Wenn man nicht sicher ist, welches Format ein Client (Browser) unterstützt: der Client kann mit dem Accept-Header angeben, welche Formate er unterstützt, und der Server kann entsprechend Ergebnisse zurückgeben. So kann man zum Beispiel auf derm Server etwas größere PNG und kleinere WebP-Versionen desselben Bildes liegen haben, die dann entsprechend der Anforderung zurückgeliefert werden.
Was die Bildauflösung angibt: Das <picture>-Element in HTML bietet eine Möglichkeit, den Browser je nach Bildschirmauflösung die richtige Bildauflösung zu wählen. So kann z.B. ein Smartphone-Browser kleinere Bilder laden als ein Browser auf einem Computer mit einem großen Bildschirm.
Daneben gibt es auch Möglichkeiten, Bilder je nach Bildschirm mit unterschiedlichen Seitenverhältnissen anzuzeigen. Dazu gibt es den MDN-Artikel zu responsive images.
Allgemein bietet es sich auch an, dass der Server Cache-Anweisungen für Bilder mitgibt, damit der Browser die Bilder lokal vorhält und nicht bei jedem Laden der Seite neu laden muss.
Sonderfall Vektorgrafiken
Ich habe in diesem Artikel bisher nur Rastergrafiken behandelt. Das sind Grafiken, wo das Bild pixelweise aufgebaut ist. Es gibt aber noch einen grundverschiedenen Bildtyp: Vektorgrafiken. Hier sind die Bildinformationen als Beschreibung geometrischer Figuren gespeichert. Das bedeutet, diese Bilder lassen sich beliebig skalieren, ohne dass sie an Qualität verlieren. Ihr Anwendungsbereich ist aber begrenzt: Es ist einfach, eine Rastergrafik aus einer Vektorgrafik zu erzeugen. Umgekehrt ist es schwierig bis unmöglich und praktisch nie eine 1:1-Abbildung des ursprünglichen Bildes.
Das einzige im WWW verbreitete Vektorgrafikformat ist SVG.