GIF, JPG und PNG

23 Kommentare

Jonatahan beschreibt in seinem Weblog in komprimierter Form die Einsatzgebiete von GIF, JPG und PNG. Berichte zu diesen drei Grafikformaten gibt es sehr viele, aber die Kommentare haben mich aufmerksam gemacht auf ein Phänomen welches mir vor einiger Zeit begegnet ist und zwar das der Internet Explorer die Farben beim PNG-Format etwas dunkler wiedergibt.

Dies fällt im normalen Gebrauch nicht auf, aber wenn man Layoutvorlagen im Photoshop als PNG-Grafiken exportiert dann schon. Was sehr schade ist. Im besagten Fall habe ich mich darüber gefreut dass das Abspeichern der Layoutgrafiken in das PNG-Format gute 15% kleinere Dateien gegenüber dem Gif-Format hervorbrachte. Aber als ich mir dann das ganze im Internet Explorer angeschaut habe, hatte ich leider keinen Grund mehr zur Freude und musste anschließend auf das Gif-Format ausweichen.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

  • Keine verwandten Beiträge

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

23 Kommentare

  1. Wenn man das dann auch noch mit der Tatsache zusammen sieht, dass der IE keine PNG-Transparenz darstellt, kann man ja fast sagen, dass man PNG im Internet leider nicht einsetzen kann, was ich sehr schade finde. Dieser Browser macht echt keinen Spaß. 😉

  3. Ich habe bisher solche Unterschiede bei meinen Projekten nicht entdeckt – außer das eben Gamma-Werte der IE nicht mag.

  4. Hallo!

    Abgesehen von der Darstellung der PNG´s im IE, ist es mit diesem Browser ein echter Krampf. Rufe ich meine Seite im Firfox auf, ist alles hübsch so, wie es sein soll. Im IE, ist die Sidebar komplett nach unten verschoben.

    Grausam! Bis man solche Fehler gefixed hat, muß man wohl erst Programmierer werden.

    Bis dann 😎

  5. @Martin,

    werde ich mal bei Gelegenheit testen, darauf habe ich natürlich nicht geachtet sondern die Standardeinstellungen von “für Web speichern” von PS CS2 genutzt.

  6. Hallo,
    kann ich bestätigen im IE ist der Farbunterschied ersichtlich, deutliches beispiel habe ich unter cafe brueheim. Dort ist die headergarfik im IE etwas dunkler. Mache ich aber ein gif aus dieser garfik, dann bekomme ich derart schlechte bzw. große Werte, dass ich es dann doch in kauf nehme.

    Liebe Grüsse Frank

  7. Im Internet benutze ich ebenfalls fast nur GIFs und JPEGs. Dabei kann man grob sagen, dass Grafiken (also Bilder mit klar abgegrenzten Farbarealen) als GIF besser gespeichert werden, Photos, Farbverläufe etc. (also Bilder mit einer hohen Farbanzahl und vielen Farbübergängen) als JPEGs.

    Wenn ich aber Bilder für den Printbereich speichere, nutze ich so gut wie immer PNG. Die Qualität ist verlustlos (GIF ist verlustbehaftet bei mehr als 256 Farben), die Dateigröße relativ klein.

  8. @Frank, ich sehe ehrlich gesagt keinen Unterschied in der Helligkeit zwischen Firefox (1.5) und IE (6.0).

  9. @Christine:
    vielleicht liegt es dann wieder an den unterschiedlichen IE-Versionen, denn andere sehen das Problem auch. Habe es schonmal im xhtmlforum besprochen.

  10. @Frank, welche Version hast du denn? Ich zweifel auch gar nicht an, dass ihr das so seht, aber es scheint auch IE zu geben, wo es keine Probleme gibt (oder mein Firefox zeigt auch zu dunkel ;-)…).

    Hab neulich an einem Rechner gesessen, der hat im Firefox die Bilder, die keine Höhen- und Breitenangaben hatten, nicht angezeigt… Obwohl es die gleiche Version wie die auf meinem Rechner ist und die Option “Bilder anzeigen” auch angeschaltet war. So ganz kann man da glaube ich nicht dahinter steigen…

  11. @Frank und Christine,

    ich sehe es auch, die Headergrafik ist im IE 6 (Win XP SP2 und IE 6.0.2900) einen Tick dunkler.

    @Frank, wie wäre es wenn du den restlichen Hintergrund anstatt als Farbangabe noch zusätzlich mit einem 1x1x px PNG-Grafik in der entsprechenden Farbe unterlegen würdest.

  12. Interessantes Problem … ist mir noch nie aufgefallen, da ich eher selten PNG verwende.
    Aber der Farbunterschied der Headergrafik ist definitiv deutlich zu sehen. Im Firefox 1.5.0.6 ist alles schön und der IE6 zickt … Um mal Zahlen dazu zu nennen, hab ich mein Lieblingstool “Farbwert” befragt und das sagt:

    Hintergrundfarbe Headergrafik
    Firefox: #FAE6CD
    IE6: #F9E3C7

    Auch der Schriftzug ist dunkler. Aber das Weiß des Logos bleibt weiß.
    Seltsame Sache, in der Tat. Sagt Bescheid bei neuen Erkenntnissen … 🙂

  13. Wenn man das dann auch noch mit der Tatsache zusammen sieht, dass der IE keine PNG-Transparenz darstellt, kann man ja fast sagen, dass man PNG im Internet leider nicht einsetzen kann, was ich sehr schade finde.

    Doch, ist gar kein Problem. Man darf nur keinen Alphakanal verwenden. Binäre Transparenz, wie man sie von GIF kennt, geht auch mit PNG einwandfrei.

    Da PNG verlustfrei ist, müsste man ohne Gammainformationen eigentlich exakt die selben Farbwerte bekommen wie bei BMP und GIF (wobei GIF bekanntermaßen ja nur bis zu 256 Farben speichert).

  14. Mist, spitze Klammern muss man also maskieren … die Vorschau suggeriert anderes. Hier nochmal aus dem Gedächtnis:

    Verwendet man den Alphakanal, wird das Bild im IE vor Version 7 an den transparenten Stellen bläulich. Es ist jedoch möglich, diese Farbe zu ändern. Hierfür erstellt man in GIMP ein Bild mit (mindestens) zwei Ebenen: Eine Hintergrundebene, die man mit der Wunschfarbe einfärbt. Die Deckkraft wird auf 0 gesetzt, denn man möchte ja Transparenz benutzen. Darüber erstellt man eine Ebene (oder mehrere) mit dem eigentlichen Bild. Beim Speichern als PNG unbedingt den Haken bei “Hintergrundfarbe sichern” aktivieren. Beispiel: Hier ist die Kantenglättung der Schrift mittels Alphakanal realisiert und funktioniert in guten Browsern daher auf jedem Hintergrund (bei Verwendung von Firefox und der Web Developer Toolbar oder Edit CSS kann man das überprüfen, indem man etwa, während das Bild angezeigt wird, beispielsweise html eine andere Hintergrundfarbe zuweist). Im IE vor Version 7 hat das Bild stattdessen die Hintergrundfarbe, die der entsprechenden Ebene zugewiesen wurde. Besser als dieses Hellblau, wie es sonst aufträte.

  15. So, ich hab jetzt mal das Bild von Frank getestet. Ich konnte es nachvollziehen, dass der IE das Bild etwas dunkler darstellt. Entferne ich jedoch die Gammainformationen, sind die Farbwerte in IE und Firefox identisch.

  17. Doch, ist gar kein Problem. Man darf nur keinen Alphakanal verwenden. Binäre Transparenz, wie man sie von GIF kennt, geht auch mit PNG einwandfrei.

    Ah, danke, das werde ich doch glatt mal probieren. 🙂

  18. @Artikel:
    Das gleiche Farbproblem hast du (ich leider auch) bei .PNGs übrigens auch in modernen Browsern zB. Safari auf dem Mac. Windows und Mac ist halt doch mehr als nur ein kleiner Unterschied. Genauso übrigens auch bei .JPGs, die ohne .ICC-Profil gespeichert wurden: am Mac auffallend heller.
    mfg

  19. Also ich bin inzwischen dazu übergegangen im Web PNGs zu verwenden. Inzwischen haben ja wenigstens die meisten den IE 6 (also von den Leuten, die den IE verwenden… :mrgreen: ) und der stellt zwar die Farben falsch dar, aber mit CCs und einem extra Stylesheet ist das in 10 Sek. behoben und man kann den IE 6 mit ein paar Tricks sogar PNG Transparenz beibringen. Allerdings ist das relativ umständlich, da man auch unterscheiden muss ob das PNG jetzt direkt als IMG eingebunden wird, oder ein Hintergrund ist. Wie dem auch sei, auf Politbog.net habe ich nur PNGs statt GIFs verwendet und die Seite funktioniert (mit gaaaanz kleinen Fehlern) auch wunderbar im IE. Dazu validiert das ganze Dokument und jedes PNG besitzt transparenz. Wen das mal interessiert kann ja entweder mich fragen oder einfach in den Quelltext schauen.
    Der Vorteil den PNGs bieten, gerade mit Alphatransparenz möchte ich als Webdesigner nicht mehr missen. Da gebrauche ich doch einfach noch 10-15 Monate ein paar böse Hacks für den IE und dann gehe ich davon aus, dass sich der IE 7 durchgesetzt hat. Wer ein noch älteres Browsermodell hat, hat meiner Meinung nach Pech, der muss dann halt unschöne Ränder und Farben sehen, oder schaltet CSS aus und ließt einfach Text :mrgreen:

  20. Das Farbproblem kann mit TweakPNG gelöst werde.
    Einfach die PNG Datei in TweakPNG laden und den “gAMA” Wert löschen.
    Fixing the PNG Color Problem in IE

  21. Also bei Safari hilft weder das Tool TweakPNG noch das Abspeichern von pngs und Gimp ohne Gammainformation. Keine Ahnung wo das Problem liegt, für den Safari jedoch führt der einzig funktionierende Workaround über das gif-Format.

  23. Hallo,

    ich hatte das selbe Problem im IE6/7, daß das PNG dunkler angezeigt wird nachdem ich es in Photoshop CS2 als PNG-24 mit Transparenz abgespeichert habe. Ich habe es dann in Fireworks als PNG-32 abgespeichert und nun zeigt auch der IE die korrekte Farbe an. Ich habe das Gefühl, daß bei Fireworks das PNG- handling besser ist…

Kommentare sind geschlossen.