PNG-Tranparenz-Darstellung in Browser

[Atlan]

Hallo zusammen,

ich habe ein Problem. Wär cool, wenn mir jemand helfen könnte:

Ich habe in Photoshop eine PNG-Datei erstellt, die einen Verlauf von 100% Transparenz links bis 0% Transparenz rechts hat. Die Farbe ist durchgehend #535353.

Diese Grafik füge ich nun per CSS in meine Website ein:

body { background-color: #535353; }
div#problem { background: url(gradient.png) top right no-repeat; }

Jeder normale Mensch geht jetzt davon aus, dass man den Hintergrund von div#problem nicht vom Rest der Seite unterscheiden kann.
Das verblüffende Ergebnis ist aber, dass der Bereich, indem dieses Bild als Hintergrund angezeigt wird, nun die Hintergrundfarbe #525252 hat. Das ist zwar ein minimaler Unterschied, aber stört doch ungemein.

Weiß jemand, woran das liegen könnte bzw. wie man das verhindern kann?

Grüße

 

[SamiSalami]

Überprüfe dochmal deine Farbprofileinstellungen bei Photoshop!
Fürs Web gut zu nutzen ist der RGB - Arbeitsfarbraum sRGB IEC61966-2.1.

Dann beim Speichern der Datei unbedingt "Speichern für Web und Geräte" wählen,
so gehst du sicher, dass dem Bild auch kein Profil eingebettet wird.
Du kannst auch bei Photoshop einstellen, dass wenn du Bilder öffnest und diese einen anderen Farbraum haben,
sie konvertiert werden sollen.

Farben sind ein sehr komplexes Thema im Web!

EDIT:

Profil weist du so zu:
Bearbeiten -> Profil zuweisen (Photoshop CS3)

 

[Atlan]

Vielen Dank für deine Antwort.

Ich habe jetzt folgende Dinge gemacht:
View->Proof Setup->Internet Standard RGB (sRGB)
Edit->Assign Profile...->sRGB IEC61966-2.1
Edit->Convert to Profile...->sRGB IEC61966-2.1
File->Save for Web & Devices...->PNG-24 (mit Transparenz und "Convert to sRGB" aktiviert)

Es funktioniert aber immernoch nicht -.-
Hab ich da irgendwas falsch gemacht?

Edit: Falls die Photoshop Version von Bedeutung ist: 12.0.1 x64 (CS5)

 

[SamiSalami]

Hmm. Okay, da es ein 24bit PNG ist, könnte es - unwahrscheinlicherweise aber nicht unmöglich - mit deinem Browser zusammenhängen.
Welchen nutzt du?

EDIT:
Überprüfe mit einem Programm wie "Pipette" oder "Farbwert" zu welchem Zeitpunkt, die Farbe falsch ist!
1. Schon in Photoshop bei Erstellung des Verlaufs
2. Nach dem Abspeichern auf deinem Rechner, wenn dus öffnest
3. Eingebunden in die Webseite

 

[Atlan]

Ich habe es getestet in:
Safari 5.0 (6533.16)
Firefox 3.6
OS: Mac OSX 10.6.4

Zum Bestimmen der Farben habe ich "DigitalColor - Farbmesser" verwendet.
Dabei ist rausgekommen, dass es erst auf der Website die Farbe "ändert".

Grüße

 

[SamiSalami]

Okay, ich hab einen ganz passablen Artikel gefunden!

Farbdarstellung im Web-Browser

Dort heißt es zB:
"Sehen die blauen Farbflächen mit und ohne Profil unterschiedlich aus, wird beim «JPG ohne ICC» nicht wie vom W3C vorgeschlagen das sRGB-Profil als Standard verwendet, sondern das Monitorprofil, was ebenfalls falsch ist."

Dh eigentlich ist vorgeschrieben, dass die Browser ebenfalls das sRGB Profil nutzen sollen, wenn kein anderes eingebettet ist, das tun sie halt nicht unbedingt - viele kommen nicht mit Farbmanagment klar!
Das heißt im Browser wird für die Grafik womöglich das Profil deines Monitors verwendet.

Eine Lösung wäre ebendoch ein Farbprofil einzubetten (da müsstest du mal recherchieren, so tief steck ich nicht in der Materie), die Gefahr ist jedoch auch gegeben, dass dieses auf anderen Rechnern nicht interpretiert wird und ebenfalls anders dargestellt wird.

Mein Vorschlag:
lade die Grafik dochmal hoch und ich schaue, wie sie bei mir dargestellt wird.

Sollte sie mit der gleichen Farbe wie bei dir dargestellt werden, könnte auch ein anderes Problem vorliegen.

 

[Atlan]

Hmm... so wie's aussieht wird nicht das Profil meines Monitors verwendet.

Ich habe hier mal eine Testdatei hochgeladen. Die Grafik ist unterhalb des schwarzen Striches.
Grafikproblem

Grüße

 

[mermshaus]

Mach das ja nicht zu klein. ;)

Ich habe in meinem Firefox auf der Grafik Bereiche (ein paar Pixel breite Streifen) in #535353 und in #525252. Zwar kann ich es inhaltlich nicht erklären, aber ich könnte mir vorstellen, dass es sich dabei um irgendeine Art von Rundungsfehler handelt.

Das ist jedenfalls ein interessanter Effekt.

 

[Atlan]

Das wär halt echt blöd, wenn es ein Rundungsfehler wäre... Wenn man keinen guten Bildschirm hat, fällt es auch nicht wirklich auf, aber das Problem ist, dass die Leute sich immer bessere Bildschirme kaufen... Bedeutet: Ich brauch eine Lösung.

Ich werde es jetzt mal mit CSS3 versuchen. Da habe ich nur das Problem, dass ich keine durchgehende Browserunterstützung habe.

Also wenn irgendwer noch eine Idee hat. Ich warte drauf!!!

An euch beide aber trotzdem schonmal ein Danke für die Mühe, die ihr euch (vorallem SamiSalami) gemacht habt!

Grüße

 

[mermshaus]

Ich habe vor meinem Post ein wenig nach Informationen zu dem Thema gesucht, aber leider nichts Gewinnbringendes gefunden. (Weiß auch nicht, nach welchen Begriffen man da genau suchen sollte. Eine sinnvolle Suchadresse wäre wohl der Firefox Bugtracker, aber dazu war ich nicht motiviert genug.)

Vielleicht lässt sich um das Grafikproblem irgendwie herumbauen. Einen semi-transparenten Farbverlauf zu haben, der vor einem Hintergrund derselben Farbe liegt und diese Farbe ergeben soll, scheint mir nicht allzu gebräuchlich zu sein.