ebody: PNG wird nicht mit transparentem Hintergrund angezeigt

Hallo,

ich habe in Photoshop einen farbigen Kreis auf transparentem Hintergrund erstellt und unter "Für Web speichern" / PNG-24 / Transparenz Checkbox aktiviert / Hintergrund: ohne gespeichert.

Im Chrome wird das Bild aber immer mit weißem Hintergrund angezeigt. Wenn ich das Bild auf dem PC mit einem Programm zur Bildansicht öffne, wird es richtig dargestellt.

Warum wird es im Browser mit weißem Hintergrund angezeigt und wie kann man das ändern?

Gruß ebody

  1. Hat sich erledigt, hatte wohl mit dem Cache zu tun, der eine ältere Version des Bildes geladen hat. Die beschriebenen Einstellungen funktionieren.

    Gruß ebody

  2. @@ebody

    "Für Web speichern" / PNG-24 / Transparenz Checkbox aktiviert / Hintergrund: ohne gespeichert.

    PNG-24 ist fürs Web aber eher böse, da große Dateien.

    Auf welchen Hintergründen willst du das Bild einsetzen? Wenn die Hintergrundfarben ähnlich sind, kannst du das Bild auf einer davon rendern, die du dann transparent machst und das als PNG-8 speicherst – mit wenigen Farben, 16 reichen fürs Anti-Aliasing völlig aus (bei einfarbigem Motiv). Die Randpixel sind dann fürs Anti-Alising für diese Hintergrundfarbe gut; bei davon stark abweichender Hintergrundfarbe gibt’s einen hässlichen Farbsaum. Aber bei ähnlichen Hintergrundfarben ist der Farbsaum nicht bemerkbar, PNG-8 mit deutlich kleinerer Dateigröße also einsetzbar.

    Es sei denn, das Motiv ist als Vektorgrafik besser. Dann gar nicht PNG, sondern SVG.

    LLAP 🖖

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. PNG-24 ist fürs Web aber eher böse, da große Dateien.

      Der Unterschied kann schon beträchtlich sein, stimmt. Nur, wie so oft im Leben ist es eine Güterabwägung. Im Zweifel weiß man ja eben nie, ob die aktuellen Voraussetzungen auch morgen noch gelten.

      Auf welchen Hintergründen willst du das Bild einsetzen? Wenn die Hintergrundfarben ähnlich sind...

      OK, dann hab ich nun wirklich alles gegeben, um z.B. 3KB Dateigröße einzusparen. Da ich ja Amazon und Facebook in Personalunion bin, wird dadurch ganz bestimmt der ein oder andere Datentarif geschont oder vielleicht sogar ein ganzes Atomkraftwerk eingespart! Gute Sache!

      Wäre ich aber nicht so ein Big Player, würde ich mir schon überlegen, ob diese Optimierung ihren Preis (=Zeit) wert ist. Die Datei(en) später nämlich auf eine andere Hintergrundfarbe neu zu rendern, stelle ich mir irgendwie nervig vor.

      Just my two cents...

      1. @@Mitleser

        Die Datei(en) später nämlich auf eine andere Hintergrundfarbe neu zu rendern, stelle ich mir irgendwie nervig vor.

        Ja, natürlich, das möchte man nicht. Deshalb ja eingangs die Frage:

        Auf welchen Hintergründen willst du das Bild einsetzen? Wenn die Hintergrundfarben ähnlich sind...

        Aber wie gesagt: möglicherweise ist die beste Lösung ja weder PNG-8 noch PNG-24, sondern SVG.

        LLAP 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory