Welches Farbprofil sollte ich für Webbilder verwenden?

sRGB ist der Webstandard. Alle Browser unterstützen ihn und nehmen ihn an, wenn kein Profil eingebettet ist. Damit erscheinen Farben auf unterschiedlichen Geräten und Plattformen am einheitlichsten.

Warum sieht ein Screenshot auf einem anderen Monitor anders aus?

Monitore besitzen unterschiedliche Farbumfänge und Kalibrierungen. Ein Display-P3-Screenshot kann auf einem sRGB-Display gedämpft oder verschoben wirken, weil dieses den größeren Farbraum nicht vollständig darstellen kann.

Was unterscheidet sRGB und Display P3?

sRGB deckt ungefähr 35 Prozent der sichtbaren Farben ab und ist seit Jahrzehnten Webstandard. Display P3 umfasst etwa 25 Prozent mehr Farben, besonders kräftigere Rot-, Grün- und Orangetöne. Moderne Apple-Geräte und viele hochwertige Monitore unterstützen P3.

Unterstützen PNG und JPEG Farbprofile?

Ja. Beide können ICC-Profile in den Metadaten einbetten. PNG bewahrt sie verlustfrei, JPEG in standardisierten Metadatenfeldern. Einige Optimierungsprogramme entfernen Profile allerdings und können dadurch Farben verschieben.

Sollte ich Farbprofile für kleinere Dateien entfernen?

Das spart meist nur 3 bis 5 KB. Browser behandeln die Datei danach als sRGB. Wurde sie in einem anderen Profil erstellt, werden die Farben falsch dargestellt. Entferne das Profil nur bei Bildern, die bereits nach sRGB konvertiert sind.

Farbprofil: Bedeutung und Anwendung | Glossar

Ein Farbprofil legt fest, wie Farben in einem Bild interpretiert und angezeigt werden. So soll das Aussehen auf verschiedenen Bildschirmen, in Browsern und im Druck konsistent bleiben.

Verbreitete Farbprofile

ICC-Profile ordnen Bildfarben einem standardisierten Farbraum zu. Für Screenshots und Webbilder sind drei besonders relevant.

sRGB ist der Standardfarbraum des Webs. HP und Microsoft entwickelten ihn 1996; er deckt ungefähr 35 Prozent des sichtbaren Farbspektrums ab. Browser, Betriebssysteme und Displays unterstützen ihn. Ohne eingebettetes Profil nehmen Browser sRGB an.

Display P3 besitzt einen größeren Farbumfang und wird von iPhones, iPads, Retina-Macs sowie immer mehr hochwertigen Monitoren unterstützt. Rund 25 Prozent mehr Farben ermöglichen kräftigere Rot-, Grün- und Orangetöne. macOS speichert Screenshots auf unterstützter Hardware in Display P3.

Adobe RGB hat einen ähnlichen Umfang, betont aber Cyan- und Grüntöne. Es wird vor allem in Druckfotografie und Vorstufe genutzt und betrifft Web-Screenshots selten.

Ein P3-Bild kann Farben enthalten, die sRGB nicht darstellen kann. Ohne korrekte Umwandlung werden sie auf einem sRGB-Monitor begrenzt und wirken gedämpft oder verschoben.

Warum Profile bei Screenshots zählen

Screenshots übernehmen das Profil des Displays. Auf einem modernen Mac ist das oft Display P3, auf den meisten Windows-Rechnern sRGB.

Dadurch kann eine Mac-Aufnahme auf einem sRGB-Windows-Display etwas anders aussehen. Kräftige P3-Farben werden in den kleineren Farbraum gedrückt und verlieren möglicherweise Sättigung.

Bei Dokumentation, Designprüfung und Kundenpräsentation sorgt das für Missverständnisse: Die im Screenshot leuchtende Markenfarbe erscheint beim Empfänger anders.

Automatisierte Screenshot-Tools rendern auf Servern meist standardmäßig in sRGB. Dadurch bleiben Ausgaben unabhängig vom Display der ausführenden Person konsistent.

Farbprofile im Web

Moderne Browser lesen eingebettete ICC-Profile und rechnen Farben für den aktuellen Monitor um. Ein korrekt gekennzeichnetes P3-Bild kann daher auf P3- und sRGB-Displays passend erscheinen.

CSS unterstützt breite Farbräume direkt, etwa mit color(display-p3 1 0.5 0). Die Media Query color-gamut erkennt, ob ein Display solche Farben darstellen kann.

Für die meisten Webinhalte bleibt sRGB die sichere Vorgabe. P3 bietet auf unterstützten Geräten mehr Farbreichtum, braucht aber sorgfältige Fallbacks und Umwandlung.

Wiederholbare Screenshot-Prüfungen

Sobald mehrere Personen auf unterschiedlicher Hardware vergleichen, wird das Profil zur Workflow-Frage. Einheitliche Aufnahme- und Exportregeln verhindern Diskussionen darüber, warum dasselbe Bild anders aussieht, und machen visuelle Prüfungen verlässlicher.

Häufige Fehler

Profile in einem Projekt mischen. Standardisiere Webassets auf sRGB und konvertiere alle Dateien passend.
Profile beim Optimieren entfernen. Ohne P3-Profil interpretiert der Browser die Werte als sRGB und verschiebt die Farben.
Profilunterschiede bei visuellen Tests übersehen. Erfasse alle Baselines unter denselben Farb- und Renderingbedingungen.
Gleiche Farbdarstellung auf jedem Monitor erwarten. Auch korrekte Profile gleichen unterschiedliche Kalibrierungen nicht vollständig aus.

Farbprofil