Ein Bild für die Veröffentlichung fertig machen

Skaliere auf die Größe, in der das Bild tatsächlich angezeigt wird, höchstens auf das Doppelte davon für hochauflösende Bildschirme. Beschneide es auf die Form, die das Layout braucht, statt den Browser es quetschen zu lassen. Komprimiere, bis Artefakte gerade auftauchen, und geh dann eine Stufe zurück. Entferne die Metadaten zuletzt. Die Reihenfolge zählt: Jeder Schritt nach dem ersten arbeitet auf weit weniger Pixeln.

Die Abmessungen kommen zuerst

Die Pixelzahl wächst mit dem Quadrat der Breite, ein mäßiger Unterschied in den Abmessungen ist also ein enormer Unterschied in der Datenmenge. Ein Bild, das mit 4000 Pixeln Breite gespeichert und in einer 800 Pixel breiten Spalte gezeigt wird, trägt etwa fünfundzwanzigmal so viele Daten mit sich, wie es braucht, und keine Qualitätseinstellung holt das zurück.

Um eine Zielbreite zu wählen, miss die größte Breite, in der das Bild im Layout jemals gerendert wird, nicht die größte Breite, die der Bildschirm erreicht. Eine Karte in einem dreispaltigen Raster ist womöglich nie breiter als 380 Pixel. Wenn eine Datei mehrere Stellen bedient, dimensioniere sie für die größte.

Gerätepixel, CSS-Pixel und der DPI-Mythos

Ein CSS-Pixel ist eine Einheit des Layouts, kein physischer Punkt. Das Gerätepixelverhältnis gibt an, wie viele Gerätepixel der Bildschirm je CSS-Pixel malt: 1 auf älteren Monitoren, 2 auf den meisten modernen Telefonen und Laptops, 3 auf manchen Telefonen. Eine 800 CSS-Pixel breite Spalte wird bei Verhältnis 2 mit 1600 Gerätepixeln gemalt, und deshalb wirkt ein Bild, das auf seine CSS-Breite dimensioniert ist, weich.

Die praktische Regel ist 2x. Exportiere in der doppelten Anzeigebreite und lass den Browser herunterskalieren. Auf 3x zu gehen kostet weitere 125 % an Daten für einen Unterschied, den bei normalem Betrachtungsabstand kaum jemand sieht.

DPI und PPI, die in einer Datei stehen, sind fürs Web bedeutungslos. Es ist eine einzige Zahl im Header, die angibt, in welcher physischen Größe die Datei gedruckt werden soll, und Browser ignorieren sie vollständig.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Mit „300 DPI“ zu exportieren fügt keine Pixel hinzu und ändert keine Bilddaten.

Was das Neuabtasten macht

Herunterskalieren heißt, dass viele Quellpixel zu einem werden. Detail, das feiner ist als das neue Raster, lässt sich nicht darstellen, und wenn der Resampler zu wenige Quellpixel abtastet, statt über die ganze Fläche zu mitteln, faltet sich dieses Detail als falsche Musterung zurück: gezackte Diagonalen und Moiré auf feinen, sich wiederholenden Texturen wie einem gestreiften Hemd oder einer Tabelle mit ein Pixel breiten Rändern. Ein gutes Herunterskalieren mittelt jedes beitragende Pixel und braucht danach meist ein wenig Nachschärfen.

Hochskalieren erzeugt kein Detail. Die Interpolation rät nur Werte zwischen Pixeln, die bereits vorhanden sind, das Ergebnis ist also weich oder klotzig. Upscaler mit maschinellem Lernen erfinden stattdessen plausibles Detail, was nicht dasselbe ist, wie es wiederherzustellen.

Seitenverhältnis: beschneiden, Balken oder verzerren

Beschneiden behält das Motiv in seinem richtigen Maßstab und wirft die Ränder weg, und es ist die richtige Voreinstellung. Balken zu setzen behält das ganze Bild, fügt aber Balken hinzu und erzwingt eine Entscheidung über deren Farbe; das verdient seinen Platz, wenn nichts abgeschnitten werden darf, etwa bei einem Kunstwerk oder einem Diagramm. Verzerren entstellt, und das Auge merkt das sofort bei Gesichtern, Kreisen und Schrift.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Wenn eine Datei in mehreren Formen auftaucht, denke in Sicherheitsbereichen: dem Bereich, der jeden Beschnitt übersteht. Ein 16:9-Banner schneidet oben und unten weg, eine 1:1-Kachel und eine 4:5-Karte schneiden an den Seiten weg, was alle behalten, ist also ein Band durch die Mitte. Halte das Motiv und jeden Text darin, sonst köpft der quadratische Beschnitt ein Gesicht nahe dem Rand eines Querformatfotos.

Die Qualitätseinstellung finden

Eine Qualitätszahl ist kein Prozentsatz von irgendetwas, und die Skalen sind zwischen Encodern nicht vergleichbar. JPEG 80, WebP 80 und AVIF 80 sind drei Einstellungen ohne Zusammenhang.

Das Verfahren ist bei allen dasselbe. Exportiere mit ein paar Einstellungen, sieh dir das Ergebnis in der Größe an, in der es gezeigt wird, und prüfe, wo Artefakte zuerst auftauchen: bei weichen Verläufen wie Himmeln, die Streifen und Flecken bilden; bei harten Kanten und Text, die Ringe bekommen. Finde die Stelle, an der der Schaden sichtbar wird, geh eine Stufe zurück, hör auf.

Eine einzige feste Zahl ist für jedes Bild falsch, denn der Inhalt entscheidet, wie viel weggeworfen werden kann: Ein verrauschtes, strukturiertes Foto braucht mehr Bits, um zu überstehen, während eine flächige Illustration bei einer Einstellung zerfällt, die ein detailreiches Foto wegsteckt.

Freisteller, weiche Kanten und Höfe

Den Hintergrund zu entfernen ist richtig, wenn das Bild auf mehr als einer Hintergrundfarbe sitzen oder andere Elemente überlappen muss: Produktaufnahmen, Logos, eine Person, die in ein Layout montiert wird. Es ist falsch, wo die Grenze wirklich fein ist, etwa bei Haaren, Laub oder Glas, denn eine schlechte Maske sieht schlimmer aus als ein ehrliches Rechteck.

Eine harte Kante ist binär, jedes Pixel ist vollständig deckend oder vollständig transparent, was zu flächigen Grafiken passt, bei allem Fotografischen aber Treppenstufen erzeugt. Eine weiche Maske erlaubt anteilige Deckkraft, ein Pixel kann also zu 40 % Motiv sein, und nur so sehen Haare richtig aus.

Der Hof entsteht an den Randpixeln. Objektivunschärfe und Kantenglättung haben die Motivfarbe bereits mit dem alten Hintergrund vermischt, jedes dieser Pixel enthält also:

observed = alpha * foreground + (1 - alpha) * background

Das Entfernen des Hintergrunds berechnet nur das Alpha. Die Farbe, die in diesen Pixeln zurückbleibt, ist weiterhin verunreinigt, ein Motiv, das aus einer weißen Studioaufnahme freigestellt wurde, trägt also einen blassen Saum: auf einer weißen Seite unsichtbar, auf einer dunklen offensichtlich. Richtiges Matting löst zusätzlich nach der Vordergrundfarbe auf, in Programmen als Saum entfernen oder Farben entkontaminieren zu finden. Wenn das nicht geht, ziehe die Maske um den Bruchteil eines Pixels nach innen und weiche sie erneut auf.

Drehung und Metadaten

Ein Bild, das in einem Programm aufrecht und in einem anderen quer steht, ist fast immer eine Frage der EXIF-Orientierung. Kameras speichern das Sensorbild ungedreht und fügen ein Tag hinzu, das angibt, wie es zu drehen ist. Software, die das Tag liest, zeigt es richtig; Software, die es ignoriert, darunter viele Bildbibliotheken und Vorschaugeneratoren, zeigt die rohen Pixel auf der Seite liegend.

Die Lösung besteht darin, die Drehung in die Pixel einzubacken und das Tag auf 1 zu setzen oder zu entfernen. In 90-Grad-Schritten zu drehen ordnet Pixel um, ohne sie neu abzutasten. Achte auf die Doppeldrehung: Pixel bereits gedreht, Tag noch gesetzt, also dreht jeder regelkonforme Betrachter sie erneut.

Metadaten zu entfernen ist ein Datenschutzschritt, kein Aufräumen. EXIF-, IPTC- und XMP-Blöcke tragen routinemäßig GPS-Koordinaten mit einer Genauigkeit von wenigen Metern, den Aufnahmezeitpunkt, Hersteller, Modell und Seriennummer der Kamera, den Namen des Besitzers und manchmal ein eingebettetes Vorschaubild, das das Bild noch vor dem Beschnitt zeigt. Ein zu Hause aufgenommenes Foto, das unverändert veröffentlicht wird, veröffentlicht eine Wohnadresse.

Entferne sie zuletzt, mit einer Ausnahme: Das ICC-Farbprofil liegt neben diesen Metadaten, und es aus einem Bild mit großem Farbumfang zu entfernen hinterlässt Zahlen, die als sRGB gelesen werden, was sich als flaue oder übersättigte Farbe zeigt. Wandle zuerst nach sRGB um und entferne dann alles andere.