„Welche Auflösung brauche ich?“ klingt nach einer einfachen Frage, vermischt aber oft mehrere Dinge: die Anzahl der Bildpixel, die Größe auf dem Bildschirm, die Pixeldichte eines Geräts und Angaben wie DPI oder PPI.
Für das Web ist die wichtigste Ausgangsfrage meistens nicht „Wie viele DPI?“, sondern:
Wie groß wird das Bild tatsächlich dargestellt, und wie viele Pixel benötigt diese Darstellung?
Pixelabmessungen sind die konkrete Größe einer Bilddatei
Ein Bild mit 1.600 × 900 Pixeln besitzt 1.600 Bildpunkte in der Breite und 900 in der Höhe. Diese Werte gehören zur Datei.
Sie unterscheiden sich von:
- der CSS-Größe auf einer Website,
- der physischen Größe in Zentimetern,
- der Pixeldichte des Bildschirms,
- einem gespeicherten DPI-Wert.
Mit dem Bild-Metadatenleser lassen sich die tatsächlichen Abmessungen einer Datei prüfen.
CSS-Pixel und Bildpixel sind nicht dasselbe
Eine Datei kann 1.200 Pixel breit sein und auf einer Website nur mit width: 600px angezeigt werden. Dann stehen theoretisch zwei Bildpixel pro CSS-Pixel zur Verfügung.
Das kann auf hochauflösenden Displays sinnvoll sein. Auf einem gewöhnlichen Display wären die zusätzlichen Pixel möglicherweise unnötig.
Darum ist die ideale Dateibreite vom Anzeigekontext abhängig und nicht nur von der Datei.
Device Pixel Ratio
Viele Geräte besitzen mehr physische Displaypixel als CSS-Pixel. Ein devicePixelRatio von 2 bedeutet vereinfacht, dass ein CSS-Pixel in jeder Richtung ungefähr zwei physische Pixel abdecken kann.
Ein Bild, das 600 CSS-Pixel breit dargestellt wird, kann auf einem solchen Bildschirm von einer Quelle mit ungefähr 1.200 Pixeln profitieren.
Das heißt aber nicht, dass jedes Bild grundsätzlich doppelt so groß ausgeliefert werden sollte. Dafür gibt es responsive Bilder mit srcset und sizes, über die der Browser eine passende Quelle auswählen kann.
Was bedeutet DPI?
DPI bedeutet dots per inch, PPI pixels per inch. Im Druckkontext können diese Angaben wichtig sein, weil sie eine Beziehung zwischen Pixelzahl und physischer Größe herstellen.
Für eine normale HTML-Darstellung entscheidet ein im JPEG gespeicherter Wert wie „300 DPI“ jedoch nicht automatisch, wie groß das Bild auf dem Bildschirm erscheint. Browser layouten in CSS-Pixeln.
Ein 1.200-Pixel-Bild bleibt im Web 1.200 Pixel breit, unabhängig davon, ob seine Metadaten 72, 96 oder 300 DPI nennen.
Warum „300 DPI für Web“ keine sinnvolle allgemeine Regel ist
Diese Regel stammt aus der Druckwelt. Für Webbilder ist entscheidender:
- Welche CSS-Breite ist vorgesehen?
- Welche Bildschirmdichten sollen unterstützt werden?
- Wie groß darf die Datei sein?
- Welche Qualität ist im konkreten Layout sichtbar nötig?
Ein 4.000 Pixel breites Foto in einem 320 Pixel breiten Kartenlayout ist fast immer unnötig groß.
Ausgangsgröße und Zielgröße
Eine sinnvolle Optimierung beginnt mit der größten realistisch benötigten Darstellung.
Beispiel: Ein Artikelbild wird maximal 1.200 CSS-Pixel breit angezeigt. Wenn auch Geräte mit hoher Pixeldichte gut versorgt werden sollen, kann eine größere Variante sinnvoll sein. Eine 6.000-Pixel-Datei ist dafür aber meist überdimensioniert.
Mit dem Bildgrößen-Werkzeug lassen sich passende Varianten erzeugen. Der Seitenverhältnis-Rechner hilft, Breite und Höhe proportional zu bestimmen.
Warum zu kleine Bilder unscharf werden
Wenn ein 400 Pixel breites Bild auf 1.200 Pixel vergrößert wird, muss die Software zusätzliche Pixelwerte interpolieren. Sie kann Übergänge schätzen, aber keine ursprünglichen Details rekonstruieren, die in der Quelle fehlen.
Darum sollte eine Quelle mindestens groß genug für die geplante Darstellung sein.
Warum zu große Bilder problematisch sind
Zu große Bilder verursachen:
- mehr zu übertragende Bytes,
- mehr Dekodierungsarbeit,
- höheren Speicherbedarf,
- unter Umständen schlechtere Ladezeiten,
- unnötige Kosten auf mobilen Verbindungen.
Ein Browser kann ein riesiges Bild klein darstellen, aber die übertragenen Daten bleiben trotzdem groß.
Seitenverhältnis bewahren
Wenn ein Foto 3:2 besitzt, sollte eine proportionale Skalierung dieses Verhältnis erhalten. Wird nur die Breite verändert, ohne die Höhe anzupassen, entsteht eine Verzerrung.
Beispiel:
Ein Bild mit 3.000 × 2.000 Pixeln wird auf 1.500 Pixel Breite verkleinert. Die proportionale Höhe beträgt 1.000 Pixel.
Cropping ist etwas anderes als Skalieren
Skalieren verändert die Abmessungen des gesamten Bildes. Cropping schneidet einen Teil ab und verändert dadurch möglicherweise das Seitenverhältnis.
Für ein quadratisches Profilbild kann beispielsweise ein 3:2-Foto zuerst zugeschnitten und anschließend verkleinert werden.
Diese Schritte sollten bewusst getrennt betrachtet werden.
Welche Auflösung für Hero-Bilder?
Es gibt keinen universellen Wert. Ein Hero-Bild, das auf großen Desktop-Bildschirmen nahezu die gesamte Breite einnimmt, benötigt andere Varianten als ein kleines Vorschaubild.
Sinnvoll ist eine Reihe von Breiten, aus denen der Browser wählen kann. Häufig reichen wenige gut gewählte Stufen statt dutzender Dateien.
Der Artikel zu responsive Bildern zeigt, wie diese Varianten mit srcset und sizes verbunden werden.
Welche Auflösung für Karten und Thumbnails?
Bei kleinen Karten ist die maximal sichtbare Breite oft relativ gering. Hier ist ein sehr großes Original besonders ineffizient.
Wichtig ist, auch den mobilen und den hochauflösenden Fall mitzudenken. Eine kleine Datei darf nicht so klein sein, dass sie auf einem Retina-Display deutlich weich wirkt.
Pixelzahl und Dateigröße
Mehr Pixel bedeuten meistens mehr Rohdaten, aber nicht automatisch eine proportional größere Datei. Format, Kompression und Motiv haben großen Einfluss.
Deshalb gehören Dimensionsoptimierung und Kompression zusammen.
Ein Foto von 2.000 × 1.200 Pixeln kann als effizient komprimiertes WebP kleiner sein als ein deutlich kleineres, verlustfrei gespeichertes PNG.
Eine häufig sinnvolle Reihenfolge lautet:
- unnötige Bereiche zuschneiden;
- benötigte Ausgabeabmessungen bestimmen;
- passende Größenvarianten erzeugen;
- Format auswählen;
- Qualität/Kompression einstellen;
- tatsächliche Darstellung testen.
Wer zuerst komprimiert und danach mehrfach skaliert oder erneut kodiert, erzeugt unnötige Zwischenverluste.
Unterschied zwischen Foto und Grafik
Fotos verzeihen andere Skalierungs- und Kompressionsentscheidungen als Textgrafiken, Screenshots oder Logos.
Bei Screenshots können feine Schriftkanten sehr schnell weich werden. Hier ist die benötigte Pixelzahl oft direkt an die geplante Darstellungsgröße gekoppelt.
Logos sollten, wenn möglich, als Vektor vorliegen. Ein SVG lässt sich für viele Anwendungsfälle ohne rastertypische Auflösungsgrenze skalieren.
Druck ist ein anderer Kontext
Soll ein Bild gedruckt werden, wird die Beziehung zwischen Pixelzahl und physischer Größe wichtig.
Ein 3.000 Pixel breites Bild ergibt bei 300 PPI ungefähr 10 Zoll beziehungsweise rund 25,4 cm Breite. Bei 150 PPI wäre die mögliche Druckbreite doppelt so groß, aber mit geringerer Pixeldichte.
Druckanforderungen sollten deshalb nicht ungeprüft auf Webbilder übertragen werden.
Bilder nicht unnötig hochskalieren
Wenn eine Quelle zu klein ist, kann Hochskalieren das Layoutproblem lösen, aber nicht die fehlende Detailinformation.
Für echte Qualitätsverbesserung ist eine bessere Quelle fast immer vorzuziehen.
Browser testen statt nur Zahlen vergleichen
Ein theoretisch perfekter Wert kann in der tatsächlichen Seite anders wirken. Teste:
- Desktop und Smartphone,
- normale und hohe Pixeldichte,
- verschiedene Viewport-Breiten,
- Netzwerkbedingungen,
- die endgültige Bildkompression.
Die sichtbare Qualität im realen Layout ist entscheidender als eine abstrakte DPI-Zahl.
Praktische Faustregel
Für Webbilder kann man so vorgehen:
- maximale CSS-Anzeigegröße bestimmen;
- eine ausreichend große Quelle bereitstellen;
- für responsive Layouts mehrere Breiten erzeugen;
- nicht benötigte Übergröße vermeiden;
- Seitenverhältnis erhalten;
- anschließend Format und Kompression optimieren.
Fazit
Für das Web ist „Auflösung“ vor allem eine Frage von Pixelabmessungen im Verhältnis zur tatsächlichen Darstellung. DPI-Werte spielen im Browser wesentlich weniger Rolle als häufig angenommen.
Ein Bild sollte groß genug sein, um in seinem größten vorgesehenen Kontext scharf zu wirken, aber nicht so groß, dass unnötige Daten übertragen werden. Responsive Varianten lösen diesen Zielkonflikt am zuverlässigsten.
