Wie ist ein digitales Bild aufgebaut?

Ein Foto wirkt auf dem Bildschirm kontinuierlich: Der Himmel zeigt weiche Verläufe, Haut besitzt feine Nuancen und Kanten sehen glatt aus. Ein digitales Rasterbild enthält jedoch weder „Himmel“ noch „Gesicht“ noch „Kante“. Es besteht zunächst aus numerischen Werten in einem Raster, die Browser, Grafiksoftware und Bildschirm in sichtbare Farben übersetzen.

Dieses Grundprinzip erklärt viele praktische Fragen: Warum wird ein Bild beim starken Vergrößern unscharf? Warum kann PNG Transparenz speichern? Warum können zwei Bilder mit denselben Pixelmaßen sehr unterschiedlich groß sein? Und warum ist das Umbenennen von .jpg in .png keine echte Konvertierung?

Wer Bilder für das Web vorbereitet, sollte deshalb zuerst verstehen, was überhaupt verarbeitet wird. Erst danach lassen sich Auflösung, Dateiformat und Kompression sinnvoll auswählen.

Ein digitales Bild ist eine Repräsentation

Eine Kamera speichert nicht „einen Baum vor einem Haus“. Ihr Sensor misst Licht. Aus diesen Messungen entstehen nach Verarbeitung, Farbinterpretation und Kodierung digitale Bilddaten.

Bei einem Rasterbild — auch Bitmap genannt — kann man sich das Ergebnis als Tabelle aus Zeilen und Spalten vorstellen. Jede Position enthält Informationen darüber, wie dieser Bildpunkt dargestellt werden soll.

Ein Bild mit 1.200 × 800 Pixeln enthält:

1.200 × 800 = 960.000 Pixel.

Ein Bild mit 4.000 × 3.000 Pixeln enthält zwölf Millionen Pixel. Daher stammt auch die Angabe „12 Megapixel“ bei Kameras: Ein Megapixel entspricht ungefähr einer Million Bildpunkte.

Mehr Pixel bedeuten aber nicht automatisch bessere Qualität. Die wahrgenommene Schärfe hängt ebenso von Optik, Fokus, Sensorrauschen, Verarbeitung, Kompression, Skalierung und der späteren Anzeigengröße ab.

Mit dem Bild-Metadatenleser lassen sich Abmessungen und weitere Dateieigenschaften direkt im Browser prüfen.

Was ist ein Pixel?

Das Wort Pixel stammt von picture element. Beim starken Zoomen erscheint ein Pixel oft als farbiges Quadrat. Diese Darstellung ist nützlich, aber technisch nur eine Visualisierung.

Im Bilddatensatz ist ein Pixel keine physische quadratische Fläche. Er ist vielmehr ein Abtastwert an einer bestimmten Rasterposition, dem Farb- und gegebenenfalls Transparenzwerte zugeordnet sind.

Ein Pixel besitzt daher keine universelle physische Größe. Dieselbe Datei mit 1.200 Pixeln Breite kann auf einer Website 300 CSS-Pixel breit dargestellt werden, auf einem hochauflösenden Bildschirm dichter erscheinen oder im Druck mehrere Zentimeter einnehmen.

Der Unterschied zwischen Dateiabmessungen, CSS-Größe und Pixeldichte wird ausführlicher im Leitfaden Welche Auflösung sollte ein Bild haben? erklärt.

Ein Farbpixel besteht aus mehreren Komponenten

Auf Bildschirmen ist RGB das gebräuchlichste Modell:

• R = Rot,
• G = Grün,
• B = Blau.

Bei 8 Bit pro Kanal stehen für jede Komponente 256 Werte von 0 bis 255 zur Verfügung.

Beispiele:

• 0, 0, 0 ergibt Schwarz;
• 255, 255, 255 ergibt Weiß;
• 255, 0, 0 ergibt maximales Rot;
• 255, 255, 0 kombiniert Rot und Grün zu Gelb.

Drei Kanäle mit je 8 Bit ergeben 24 Bit Farbinformation pro Pixel. Damit sind theoretisch

256 × 256 × 256 = 16.777.216

verschiedene Kombinationen möglich.

Im Web können dieselben Farben etwa als RGB-, HEX- oder HSL-Werte notiert werden. Der Unterschied zwischen Farbmodell und CSS-Notation wird im Artikel RGB, HEX oder HSL: Welche Notation ist sinnvoll? erläutert. Mit dem Farbkonverter lassen sich die Notationen direkt ineinander umrechnen.

Farbkanäle lassen sich getrennt betrachten

Ein RGB-Bild kann als Kombination aus drei Intensitätsbildern verstanden werden: Rot, Grün und Blau. In einem einzelnen Kanal bedeutet ein heller Bereich, dass diese Komponente stark vertreten ist; ein dunkler Bereich trägt wenig dazu bei.

Viele Bildoperationen arbeiten genau auf dieser Ebene: Weißabgleich, Farbkorrektur, Kontrastanalyse, Filter oder Farberkennung verändern oder untersuchen Kanäle getrennt und setzen sie anschließend wieder zusammen.

Der Farben-aus-Bild-Extraktor analysiert nicht „JPEG“ oder „PNG“ als Farbe. Der Browser dekodiert die Datei zunächst in nutzbare Pixelwerte. Erst danach werden dominante Farben aus dieser gemeinsamen Darstellung berechnet.

Farbtiefe bestimmt die Anzahl möglicher Abstufungen

Bei 8 Bit pro Kanal sind 2⁸ = 256 Werte möglich. Bei 16 Bit sind es 2¹⁶ = 65.536.

Eine höhere Farbtiefe erlaubt feinere Zwischenstufen. Das ist insbesondere bei intensiver Bildbearbeitung wichtig, weil starke Helligkeits- oder Farbkorrekturen sonst sichtbare Abstufungen erzeugen können. Solche sichtbaren Stufen in einem eigentlich glatten Verlauf nennt man häufig Banding.

Mehr Farbtiefe erhöht allerdings auch die Datenmenge. Deshalb können Arbeitsdateien für Fotobearbeitung deutlich mehr Informationen enthalten als eine optimierte Webversion.

Drei Begriffe sollten nicht verwechselt werden:

• Farbtiefe: Wie viele Werte kann ein Kanal darstellen?
• Farbraum: Welche realen Farben werden diesen Werten zugeordnet?
• Dateiformat: Wie werden Daten strukturiert und komprimiert?

Der Alphakanal speichert Transparenz

RGB beschreibt nur die Farbe. Für Transparenz kommt häufig ein vierter Kanal hinzu: Alpha.

Alpha beschreibt die Deckkraft:

• vollständig transparent,
• teilweise transparent,
• vollständig deckend.

Bei 8 Bit Alpha stehen ebenfalls 256 Abstufungen zur Verfügung. Ein RGBA-Pixel enthält somit Rot, Grün, Blau und Alpha.

Das ist besonders bei Logos, Icons, Overlays und freigestellten Elementen wichtig. PNG und WebP können Transparenz speichern; klassisches JPEG nicht. Wer ein transparentes PNG in JPEG umwandelt, muss deshalb entscheiden, welche Hintergrundfarbe die transparenten Bereiche ersetzen soll.

Transparenz ist eine Kompositionsinformation

Ein halbtransparenter Pixel hat keine endgültige sichtbare Farbe für sich allein. Sein Erscheinungsbild hängt vom Hintergrund ab.

Bei der Komposition werden Vordergrund und Hintergrund entsprechend dem Alphawert kombiniert. Deshalb kann dieselbe halbtransparente Kante auf Weiß gut aussehen, auf einem dunklen Hintergrund aber einen unerwünschten hellen Saum zeigen.

Solche Effekte entstehen häufig, wenn ein Bild für einen bestimmten Hintergrund vorbereitet und später in einem anderen Kontext verwendet wird.

Rasterbild und Vektorbild sind grundverschieden

Rasterbilder speichern Pixelwerte. Ein SVG speichert dagegen Formen, Pfade, Koordinaten, Farben und Transformationen.

Darum kann ein SVG-Logo ohne klassische Pixelvergrößerung skaliert werden. Ein Foto eignet sich dagegen meist besser als Rasterbild.

Mehr dazu steht im Leitfaden SVG: das Vektorformat verstehen.

Dateiabmessungen sind nicht Dateigröße

Ein Bild mit 2.000 × 2.000 Pixeln enthält vier Millionen Pixel. Daraus lässt sich aber nicht direkt ablesen, wie viele Kilobyte oder Megabyte die Datei besitzt.

Die Dateigröße hängt unter anderem ab von:

• Format,
• Kompressionsverfahren,
• Qualitätsstufe,
• Bildinhalt,
• Farbtiefe,
• Metadaten,
• Transparenz.

Ein stark komprimiertes Foto kann deshalb weniger Speicher benötigen als eine kleinere, verlustfrei gespeicherte Grafik.

Unkomprimierte Datenmenge als Größenordnung

Ein RGB-Bild mit 1.000 × 1.000 Pixeln und 8 Bit pro Kanal enthält unkomprimiert ungefähr:

1.000 × 1.000 × 3 Byte = 3.000.000 Byte.

Mit Alpha wären es ungefähr vier Millionen Byte.

Dateiformate versuchen diese Rohdaten effizienter zu speichern. Verlustfreie Verfahren rekonstruieren die ursprünglichen Werte exakt; verlustbehaftete Verfahren entfernen Informationen, die für die gewünschte Nutzung als weniger wichtig eingestuft werden.

Verlustfrei und verlustbehaftet

Verlustfreie Kompression reduziert die Dateigröße ohne Veränderung der rekonstruierten Pixelwerte. Sie eignet sich gut für Grafiken, Screenshots, Logos und Bilder mit klaren Kanten.

Verlustbehaftete Kompression akzeptiert kontrollierte Abweichungen, um deutlich kleinere Dateien zu erreichen. Bei Fotografien kann das sehr effizient sein, weil natürliche Motive viele feine Variationen enthalten.

Das geeignete Format hängt daher vom Bildtyp und vom Ziel ab. Ein Vergleich steht in PNG, JPEG, WebP oder AVIF: Welches Format wählen?.

Was passiert beim Verkleinern?

Beim Reduzieren der Pixelmaße können nicht einfach zufällig Pixel entfernt werden. Ein Resampling-Algorithmus berechnet neue Werte aus benachbarten Pixeln.

Je nach Verfahren können Kanten schärfer oder weicher wirken. Das Ziel ist, möglichst viele relevante Informationen in ein kleineres Raster zu übertragen.

Das Werkzeug zum Ändern der Bildgröße automatisiert diesen Schritt lokal im Browser.

Was passiert beim Vergrößern?

Beim Vergrößern muss der Algorithmus neue Pixelwerte erzeugen, obwohl die Quelldatei keine zusätzlichen echten Details enthält.

Interpolation kann Übergänge glätten, aber keine ursprüngliche Information zurückholen. Ein unscharfes oder sehr kleines Ausgangsbild wird durch bloßes Hochskalieren nicht plötzlich detailreich.

Das ist ein zentraler Unterschied zwischen mehr Pixeln und mehr Bildinformation.

Seitenverhältnis und Abmessungen

Das Seitenverhältnis beschreibt das Verhältnis von Breite zu Höhe. Beispiele sind 16:9, 4:3, 3:2 oder 1:1.

Wird nur die Breite verändert, ohne die Höhe proportional anzupassen, wird das Bild verzerrt. Der Seitenverhältnis-Rechner hilft dabei, passende Abmessungen zu bestimmen.

Metadaten gehören nicht zu den sichtbaren Pixeln

Bilddateien können zusätzlich EXIF-, XMP- oder andere Metadaten enthalten: Kameramodell, Aufnahmezeit, Ausrichtung, Software und teilweise GPS-Koordinaten.

Diese Informationen sind vom sichtbaren Raster getrennt. Ein Bild kann visuell identisch bleiben, obwohl seine Metadaten entfernt werden.

Der Leitfaden Bildmetadaten: lesen, behalten oder entfernen? behandelt diese Ebene ausführlich.

Warum Browser Bilder zuerst dekodieren

Eine JPEG-, PNG-, WebP- oder AVIF-Datei ist zunächst ein komprimierter Datenstrom. Damit sie angezeigt oder bearbeitet werden kann, muss der Browser sie dekodieren und daraus eine Pixelrepräsentation erzeugen.

Deshalb können browserbasierte Werkzeuge verschiedene Formate mit derselben nachgelagerten Bildlogik bearbeiten: Der Dateicodec unterscheidet sich, die dekodierte Pixelstruktur kann anschließend ähnlich behandelt werden.

Ein praktisches Denkmodell

Bei Bildarbeit lohnt es sich, vier Ebenen getrennt zu betrachten:

1. Inhalt und Pixelraster – Was ist tatsächlich sichtbar?
2. Abmessungen und Seitenverhältnis – Wie viele Pixel werden benötigt?
3. Format und Kompression – Wie werden diese Pixel gespeichert?
4. Metadaten und Zusatzinformationen – Welche Informationen begleiten die sichtbaren Daten?

Viele typische Fehler entstehen dadurch, dass diese Ebenen vermischt werden.

Fazit

Ein digitales Rasterbild ist im Kern ein Raster aus numerischen Farbwerten. RGB-Kanäle beschreiben die Farbe, Alpha kann Transparenz ergänzen, und die Bittiefe bestimmt die verfügbare Präzision.

Pixelabmessungen allein sagen weder etwas über die Dateigröße noch über die tatsächliche Bildqualität aus. Format, Kompression, Metadaten, Anzeigekontext und Ausgangsmaterial spielen ebenfalls eine Rolle.

Wer diese Struktur verstanden hat, kann Bildgröße, Format, Kompression und responsive Darstellung deutlich gezielter wählen.