Warum sehen Bildfarben auf meiner Website anders aus?

Vergleiche drei Versionen desselben Bildes

Ein Foto sieht im Bildeditor richtig aus, doch auf deiner Website verändern sich die Farben. Da liegt es nahe, das Bild aufzuhellen oder kräftiger zu färben. Prüfe zuerst, ob die Ursache im Bild, auf der Seite oder beim Bildschirm liegt.

Du vergleichst das Original, die für die Website gespeicherte Kopie und das Bild, das die Website tatsächlich anzeigt. Das Speichern einer fertigen Kopie aus dem Editor wird oft Exportieren genannt. Anschließend kann die Website eine eigene verkleinerte oder komprimierte Version erzeugen.

1. Bewahre das Original auf. Verwende das ursprüngliche Foto oder die bearbeitbare Designdatei als Referenz. Arbeite mit Kopien, damit du zum Original zurückkehren kannst.
2. Prüfe die gespeicherte Kopie. Öffne sie im Bildeditor neben dem Original. Ziehe die Datei auch in einen Browser-Tab und prüfe ihre Darstellung dort.
3. Prüfe die Version der Website. Klicke am Computer mit der rechten Maustaste auf das Bild der veröffentlichten Seite. Suche nach Bild in neuem Tab öffnen oder einer ähnlichen Option. Weiter unten erfährst du, was du tun kannst, wenn sie fehlt.
4. Vergleiche denselben Bereich. Verwende denselben Bildschirm, ähnliche Bildgrößen und einen ähnlichen Hintergrund. Wähle eine Stelle, an der der Unterschied deutlich wird, etwa den Stoff eines Produkts oder eine einfarbige Fläche im Logo.

Lass Helligkeit und andere Bildschirmeinstellungen zunächst unverändert. Wenn du ein Bild auf dem Smartphone und das andere auf dem Laptop ansiehst, lässt sich der Einfluss der Datei schwerer von dem des Displays trennen.

Wähle anhand des Unterschieds den nächsten Schritt

Was ist ein Farbprofil und warum ist es wichtig?

Ein Bild speichert Farben als Zahlen. Ein Farbprofil sagt einer App, wie diese Zahlen dargestellt werden sollen. Wird das Profil in der Bilddatei gespeichert, spricht man von einem eingebetteten Profil. Auch die Bezeichnung ICC-Profil ist üblich; sie verweist auf den dafür verwendeten Standard. Die FAQ des International Color Consortium erklären die Funktionsweise.

sRGB ist ein weit verbreitetes System zur Festlegung von Farben für Webbilder. Du kannst es dir als gemeinsame Anleitung für die Farbdarstellung vorstellen. Für gewöhnliche Fotos und Grafiken, die auf vielen Geräten erscheinen, ist es eine praktische Wahl. Adobe RGB und Display P3 definieren andere, größere Farbbereiche.

Fehlen Farbinformationen oder werden sie falsch gelesen, kann eine App das Bild anders anzeigen. Ein fehlendes Profil bedeutet aber nicht automatisch, dass die Datei fehlerhaft ist. Ein bereits für sRGB vorbereitetes Bild kann trotzdem wie vorgesehen aussehen. Problematisch ist eine falsche Annahme darüber, wie seine Farben zu lesen sind. Siehe Adobes Erklärung zu Bildprofilen.

Auch ein Bildschirm hat ein eigenes Profil, das seine Farbwiedergabe beschreibt. Dieses ist vom Bildprofil zu unterscheiden: Das Profil deines Monitors gehört nicht in sämtliche Webbilder für deine Besucher.

Konvertiere die Farben, statt nur ein Profil zuzuweisen

Bildeditoren können sowohl Assign Profile (Profil zuweisen) als auch Convert to Profile (In Profil konvertieren) anbieten. Die Befehle haben unterschiedliche Aufgaben:

• Profil zuweisen gibt vorhandenen Farbwerten eine andere Bedeutung. Die Zahlen bleiben gleich, doch das Bild kann sich sichtbar verändern.
• In Profil konvertieren passt die Zahlen an die neuen Farbvorgaben an und versucht dabei, das Aussehen des Bildes zu erhalten.

Für eine sRGB-Kopie eines korrekt erkannten Adobe-RGB-Bildes verwendest du die Konvertierung. Nur sRGB zuzuweisen kann die Farben verändern. Manche sehr kräftigen Farben lassen sich im kleineren sRGB-Farbbereich nicht exakt wiedergeben; kontrolliere deshalb das Ergebnis. Adobes Anleitung zu Farbprofilen beschreibt beide Befehle.

Ist das ursprüngliche Profil unbekannt, suche die originale Designdatei oder frage ihren Ersteller. Wähle kein Profil nur deshalb, weil das Bild damit bunter wirkt. Ein Editor kann beim Öffnen ein Profil angenommen haben. Das aktuell angezeigte Profil beweist daher nicht, mit welchem Profil das Bild erstellt wurde.

Speichere eine Webkopie mit sRGB-Farben

Erstelle für gewöhnliche Website-Fotos und Grafiken eine separate sRGB-Kopie und behalte das Original. Du brauchst einen Editor mit Farbkonvertierung, zum Beispiel Photoshop. Andere Programme bieten eventuell Convert to sRGB in den Exporteinstellungen an. Die folgenden Photoshop-Menünamen stammen aus der englischen Oberfläche.

1. Prüfe das Profil des Originals. Suche die Farbeinstellungen des Dokuments. Öffne in Photoshop Edit → Convert to Profile und lies den Eintrag unter Source Space. Warnt die App vor einem fehlenden Profil, prüfe die Einstellungen der Originaldatei oder frage ihren Ersteller, statt zu raten.
2. Wähle sRGB für die Kopie. Stelle im Konvertierungsdialog sRGB IEC61966-2.1 als Ziel ein. Aktiviere Preview, prüfe die Änderung und bestätige sie. Adobe bietet die vollständige Photoshop-Anleitung.
3. Speichere oder exportiere die Kopie. Gibt es die Option Embed Color Profile, bette das passende sRGB-Profil ein. Die Konvertierung verändert die Farbwerte; das Einbetten speichert die Anleitung zum Lesen dieser Werte.
4. Öffne die gespeicherte Datei erneut. Prüfe sie vor dem Hochladen im Editor und im Browser. Verwende einen anderen Dateinamen, damit du die neue Kopie erkennst.

Hat dein Editor keine Einstellungen für Farbprofile, lies in seiner Dokumentation nach, wie er Farben exportiert. Bitte den Designer um eine sRGB-Webkopie, wenn du die Einstellungen selbst nicht prüfen kannst.

Wähle das Dateiformat unabhängig davon. JPG eignet sich häufig für Fotos; PNG kann für Grafiken mit transparentem Hintergrund sinnvoll sein. Unser Ratgeber zu Webbildformaten erklärt die Möglichkeiten. Ein Wechsel von JPG zu PNG allein korrigiert keine falschen Farbinformationen.

Prüfe, ob die Website das Bild verändert

Sieht die gespeicherte Datei richtig aus, das Website-Bild aber nicht, prüfe die Schritte nach dem Hochladen. Ein Website-Baukasten, ein Bild-Plugin oder ein Auslieferungsdienst kann Bilder skalieren, komprimieren oder ihr Format ändern.

Beginne mit dem Bild, das du in einem eigenen Tab geöffnet hast. Speichere diese Kopie auf deinem Computer und vergleiche sie im selben Bildeditor mit der hochgeladenen Datei. Kleinere Bildabmessungen beweisen kein Farbproblem, zeigen aber, dass du möglicherweise unterschiedliche Versionen vergleichst.

Wenn du das Bild nicht direkt öffnen kannst

Die Entwicklertools des Browsers zeigen, welche Datei die Seite lädt. Am Computer geht das am einfachsten:

1. Öffne die Seite und suche im Browsermenü nach Entwicklertools beziehungsweise Developer tools, häufig unter Weitere Tools.
2. Wähle den Tab Network beziehungsweise Netzwerk und lade die Seite neu. Nun werden die geladenen Dateien aufgelistet.
3. Wähle den Bildfilter, meist Img oder Images. Klicke eine Datei an und prüfe im Tab Preview beziehungsweise Vorschau, ob es dein Bild ist.
4. Klicke den Listeneintrag mit der rechten Maustaste an und wähle, falls vorhanden, In neuem Tab öffnen. Andernfalls kopierst du die Webadresse, auch URL genannt, in einen neuen Browser-Tab. Speichere das Bild für den Vergleich.

Die Chrome-Anleitung zum Network-Panel veranschaulicht die Werkzeuge. Menünamen und Anordnung können je nach Browser und Sprache abweichen.

Die Seite kann in der Smartphone- und Desktopansicht unterschiedliche Bilddateien auswählen. Unser Ratgeber zu responsiven Bildern erklärt das genauer.

Verwaltest du die technischen Einstellungen nicht selbst, schicke die hochgeladene Datei und die Website-Kopie an die zuständige Person. Bitte sie zu prüfen, ob die Bildverarbeitung das Farbprofil entfernt oder die Farben falsch konvertiert. Nach der Korrektur müssen Bildversionen eventuell neu erzeugt und der Cache geleert werden. Der Cache speichert zuvor erstellte Dateien. Prüfe, ob du wirklich die neue Version ansiehst.

Farbinformationen sind etwas anderes als private Angaben wie der GPS-Standort eines Fotos. Wenn du alle Metadaten entfernst, also die zusätzlich zum Bild gespeicherten Informationen, kann auch das Farbprofil verloren gehen. Prüfe beim Erstellen einer Kopie zum Teilen sowohl den Datenschutz als auch das Aussehen. Der Ratgeber zu Fotometadaten behandelt diesen Ablauf.

Prüfe Effekte auf der Seite und den Hintergrund

Sieht das Website-Bild in seinem eigenen Tab richtig aus, auf der Seite aber anders, kann die Seite seine Darstellung verändern. Wechsle testweise zwischen hellem und dunklem Design. Prüfe auch, ob sich das Bild verändert, wenn du den Mauszeiger darüber bewegst.

• Farb- und Helligkeitseffekte: Ein Theme kann Bilder dunkler, weniger farbig oder grau darstellen. Solche Effekte heißen häufig Filter. Die MDN-Referenz zu filter zeigt ihre Wirkung.
• Teilweise Transparenz: Das Bild oder sein umgebender Abschnitt kann den Hintergrund durchscheinen lassen. Dadurch wirken Farben blasser. Die Einstellung heißt Deckkraft oder opacity. Auch eine Einstellung am umgebenden Abschnitt kann das Bild beeinflussen; siehe MDNs Erklärung zu opacity.
• Eine Ebene über dem Bild: Ein farbiger Überlagerungseffekt oder ein Effekt beim Darüberfahren kann das Bild tönen, ohne die Datei zu ändern.
• Ein anderer Hintergrund: Transparente und teilweise transparente Bereiche mischen sich mit dem Seitenhintergrund. Selbst deckende Farben können vor Weiß anders wirken als vor Dunkelgrau.

Vergleiche ein transparentes Bild vor demselben Hintergrund wie beim Entwurf. Wirkt es nur auf einem bestimmten Hintergrund falsch, überprüfe die Gestaltung für diesen Einsatz. Der Ratgeber zu transparenten Hintergründen erklärt die Optionen.

Suche im Seiteneditor oder in den Theme-Einstellungen nach Bildeffekten. Brauchst du Hilfe, sage dem Website-Entwickler, dass das Bild allein richtig aussieht, und bitte ihn, Filter, Deckkraft und Überlagerungen zu prüfen. Einzelne Stilregeln lassen sich zum Test vorübergehend deaktivieren. Die MDN-Anleitung zur CSS-Fehlersuche erklärt die Methode.

Vergleiche Bildschirme unter ähnlichen Bedingungen

Sieht dieselbe Datei auf zwei Bildschirmen anders aus, lass die Datei unverändert, während du die Displays prüfst. Helligkeit, Raumbeleuchtung und die Fähigkeiten des Bildschirms beeinflussen die Wahrnehmung.

Schalte für den Vergleich Funktionen aus, die die Anzeige bewusst verändern. Apples Night Shift lässt die Anzeige wärmer wirken; True Tone passt Farbe und Intensität an das Umgebungslicht an. Siehe Apples Anleitung zu Anzeigeeinstellungen. Suche auf anderen Geräten nach Blaulichtfilter, Nachtmodus oder einem Modus für besonders kräftige Farben.

Wirkt die ganze Seite ähnlich warm oder farbintensiv, sind die Anzeigeeinstellungen ein sinnvoller Ausgangspunkt. Betrifft der Unterschied nur ein Foto, prüfe wieder dessen Farbinformationen und ob es ein HDR-Bild ist. HDR wird in den häufigen Fragen erklärt.

Wenn verlässliche Produktfarben beruflich wichtig sind, liefert ein kalibrierter Bildschirm eine bessere Referenz. Die Kalibrierung richtet den Bildschirm auf einen bekannten Zielzustand aus; ein Displayprofil beschreibt seine Farbwiedergabe. Die ICC-FAQ erklären diese Aufgaben. Eine korrekte Bildvorbereitung verbessert die Konsistenz, macht aber nicht alle Besucherbildschirme identisch.

Beispiel: Ein Produktfoto wirkt im Browser blass

Stell dir ein Produktfoto vor, dessen Original ein bekanntes Adobe-RGB-Profil enthält. Im Editor sieht es richtig aus, die gespeicherte Kopie wirkt im Browser blass. Das ist ein hypothetisches Beispiel: Der Verlust eines Profils wirkt sich nicht auf jedes Bild gleich aus.

1. Finde den ersten Unterschied. Die gespeicherte Datei weicht schon vor dem Hochladen ab. Beginne deshalb bei den Exporteinstellungen.
2. Prüfe die gespeicherten Informationen. In diesem Beispiel ging beim Export das Adobe-RGB-Profil verloren, ohne dass die Farben nach sRGB konvertiert wurden.
3. Erstelle eine neue Kopie vom Original. Konvertiere sie nach sRGB und speichere sie mit den passenden Profilinformationen.
4. Vergleiche vor dem Hochladen. Öffne die neue Kopie im Editor und im Browser auf demselben Bildschirm.
5. Prüfe auch die Website. Lade die Kopie hoch und vergleiche das Bild, das die Seite tatsächlich verwendet.

Eine höhere Sättigung macht Farben kräftiger. Sie könnte den ersten Export in einer App verbessern, in einer anderen aber zu bunt wirken lassen. Die Exportkorrektur behebt die Ursache und erhält das Original für andere Zwecke.

Nutze Pixilo, wenn die Farben stimmen

Hat die gespeicherte Kopie die gewünschten Farben, kannst du mit Pixilo ihre Abmessungen für die Seite anpassen oder die Dateigröße reduzieren. Bewahre die vorbereitete Kopie zum Vergleich mit dem Download auf.

Pixilo bietet Skalierung und Komprimierung, aber keine Einstellungen zur Reparatur oder Auswahl von Farbprofilen. Beim Skalieren und bei vielen Formatkonvertierungen zeichnet der Browser das Bild neu. Möchtest du Display-P3- oder HDR-Eigenschaften behalten, prüfe die Ausgabe genau. Gehe nicht davon aus, dass jeder Vorgang sie erhält.

Teste zunächst ein Bild, bevor du mehrere verarbeitest. Vergleiche nach dem Download die wichtigen Farben und Details und prüfe anschließend das veröffentlichte Ergebnis. Entsteht der Unterschied erst nach dem Hochladen, untersuche die Bildverarbeitung oder die Effekte auf der Seite.

Häufige Fragen

Sollte ich Display-P3-Bilder immer nach sRGB konvertieren?

Nein. Display P3 ermöglicht einen größeren Farbbereich und kann sinnvoll sein, wenn Website und Geräte der Besucher ihn unterstützen. Bist du unsicher, wie deine Website damit umgeht, ist eine sRGB-Kopie für gewöhnliche Veröffentlichungen einfacher. Behalte das Original. WebKit erklärt, wie Bilder mit Profil an ein Display angepasst werden.

Warum wirken die hellsten Bereiche meines Smartphone-Fotos nach dem Export dunkler?

Das Original kann ein HDR-Bild sein. High Dynamic Range bezeichnet einen größeren Helligkeitsbereich, mit dem sich dunkle und helle Bereiche stärker unterscheiden können. Eine Standardkopie erhält diese Darstellung möglicherweise nicht. Suche nach einer Exportoption für den Standardbereich, auch SDR genannt. Die Anpassung kann im Editor Tone Mapping heißen: HDR-Helligkeiten werden in den Standardbereich übertragen. Prüfe besonders Lichter und Schatten. Ein Farbprofilwechsel allein übernimmt diese Aufgabe nicht. WebKits HDR-Überblick erklärt, wie Bildschirme HDR darstellen.

Garantiert PNG korrekte Farben?

Nein. PNG kann die gespeicherten Pixelwerte unverändert erhalten, doch eine App muss sie weiterhin richtig interpretieren. Ein Formatwechsel repariert kein falsches oder unbekanntes Farbprofil.

Was mache ich mit einem CMYK-Bild vom Designer?

CMYK verwendet Cyan, Magenta, Gelb und Schwarz für den Druck. RGB verwendet Rot, Grün und Blau für Bildschirmbilder. Bitte um eine separate sRGB-Webkopie oder erstelle sie in einem Editor mit Farbkonvertierung. Bewahre das Druckoriginal auf. Adobes Ratgeber zu Farbmodi erklärt den Unterschied.

Warum stimmt mein Logo nicht mit dem Farbcode der Seite überein?

Ein Code wie #336699 ist ein Hex-Farbcode und beschreibt auf einer Webseite eine sRGB-Farbe. Ein Logo mit anderen Farbvorgaben muss dazu nicht passen. Prüfe auch Transparenz und Effekte auf der Seite. Vergleiche eine deckende Fläche im Inneren des Logos: Geglättete Kanten können teilweise transparente Pixel enthalten. Die MDN-Referenz zu Hex-Farben erklärt die Schreibweise.