1. PNG ist großartig, aber ich kann sie nicht verwenden, weil sie in Internet Explorer nicht funktionieren.
Das ist fast vollständig falsch. PNGs jeder Art werden in Internet Explorer angezeigt, selbst in einigen ziemlich alten Versionen. Das Problem hier ist, dass die Alphatransparenz von PNG-24 in IE 6 nicht funktioniert. Das ist alles. Wenn Sie keine Alphatransparenz benötigen, können Sie mit PNG in IE alles machen, was Sie in jedem anderen Browser tun könnten. Wenn Sie doch Alphatransparenz benötigen, ist selbst das keine große Sache, da es viele Möglichkeiten gibt, damit umzugehen.
2. PNG hat die kleinsten Dateigrößen.
Wenn man GIF mit PNG-8 vergleicht, hat PNG-8 oft eine bessere Komprimierung. Nicht immer, aber oft. Aber wenn man von PNG-24 spricht (die mit Alphatransparenz), haben sie **niemals** die kleinsten Dateigrößen. Tatsächlich sind sie oft unangenehm groß und tragen maßgeblich zu langsam ladenden Seiten bei.
3. PNG hat bessere Farben
Auch das ist nur ein Merkmal von PNG-24. PNG-24 haben **großartige** Farben. PNG-24 hat sogar verlustfreie Komprimierung, was bedeutet, dass Sie es immer wieder speichern können, ohne Qualitätsverlust! Aber natürlich geht das auf Kosten der Dateigröße. PNG-8 verwendet dieselbe Farbindexierung und hat dieselben Farbbeschränkungen wie GIF.
4. PNG ist das beste Format für alles.
Komplett falsch. Jedes der drei großen Bildformate, JPG, GIF und PNG, hat immer noch seinen Platz als bestes Format für die jeweilige Aufgabe. Für fotografische Bilder ist JPG in Bezug auf die Dateigröße immer noch unschlagbar. PNG-24 kann die Qualität replizieren, aber bei vielfacher Dateigröße. PNG-8 schlägt GIF fast immer, aber PNG kann überhaupt keine Animationen darstellen, daher ist GIF immer das Format der Wahl, wenn dies benötigt wird.
Weitere Informationen darüber, wann welches Format verwendet werden sollte, finden Sie in diesem Beitrag aus dem Archiv. Außerdem gibt es hier einen ziemlich guten Artikel über kreative Anwendungen für PNG.
Wir haben APNG für animierte PNGs, (http://en.wikipedia.org/wiki/Apng). Es ist in Firefox 3 implementiert.
Opera 9.5 unterstützt APNG auf Webseiten und auch in Skins.
„Aber wenn man von PNG-24 spricht (die mit Alphatransparenz), haben sie niemals die kleinsten Dateigrößen.“
Falsch. http://phoenity.com/newtedge/gradient_effect/
Okay, das war nützlich! Ich war mir nicht bewusst, dass das Transparenzproblem gelöst ist, schön :o)
Alle erleben es genau wie Sie, ein Teil des Lebens eines Designers ist .png und seine Kompatibilität.
Ich glaube nicht, dass das richtig ist... PNG IST tatsächlich das beste Bildformat... Es gibt immer einen Qualitätsverlust bei JPG. Falls Sie JPG beibehalten möchten (rein verlustfrei), wird die Dateigröße wirklich riesig sein (wenn nicht so groß wie ING). Obwohl PNG-Bilder riesig sind, bieten sie immer noch die beste Qualität (bei weitem)...
Wer benutzt PNG-8???? Niemand, von dem ich gehört habe....
APNG wird in Firefox und Opera unterstützt, aber das ist keine Garantie dafür, dass das Format Fuß fassen wird. Die offizielle PNG-Gruppe hat es bereits als offizielle Animationserweiterung abgelehnt und evaluiert mehrere andere Formate.
Binäre Transparenz wurde in IE6 unterstützt und Alphatransparenz in IE7. Es gibt ein Problem mit der Farbkonsistenz über alle Browser hinweg aufgrund der Gamma-Korrektur. Internet Explorer wendet eine Gamma-Korrektur auf das Bild an, während die anderen Browser dies nicht tun. Obwohl Microsoft technisch nichts falsch macht, weicht es von dem ab, was andere Browser tun. Die Lösung besteht derzeit darin, PNGs ohne Gamma-Korrekturinformationen zu speichern oder Dateien als GIFs zu speichern, wenn Sie nicht mehr als 8 Bit Farbe benötigen.
Amit, JPG ist besser für Fotos, während GIF/PNG besser für Bilder mit großen Flächen einfarbiger Farbe sind. Für Fotos wird JPG die Dateigrößen drastisch reduzieren. PNG-8 ist kein spezielles Format. Vielmehr ist es ein PNG, das mit 8 Bit Farbe (was das Maximum ist, das GIF halten kann) anstatt der üblichen 24 Bit gespeichert wird. Natürlich sind Dateien mit mehr Farben größer als solche mit weniger Farben. Ihr Kommentar verdeutlicht, warum der Mythos, dass PNGs größer als GIFs sind, fortbesteht.
Ich denke, Sie sind zu hart. Insgesamt würde ich sagen, dass PNG immer noch das beste Format ist, und zwar deutlich. (Und ich spreche hauptsächlich von Qualität im Verhältnis zur Größe bei den meisten Anwendungsfällen als Kompromiss)
Ich wusste nicht einmal von dieser APNG-Sache, scheint eine gute Sache zu sein. Ich mag es, dass es abwärtskompatibel ist, sodass Nicht-unterstützende Browser immer noch das "erste Frame"-Bild erhalten. Ich bin ganz für Vorwärtsverbesserungen.
@Lim Chee Aun: Das ist ziemlich interessant! Ich schätze, es gibt einen sehr isolierten Fall, in dem PNG-24 die kleinste Dateigröße (sowie die höchste Qualität) hat. Dennoch sind PNG-24 im Allgemeinen Monster in Bezug auf die Dateigröße.
@Amit: PNG-8 ist wahrscheinlich das am häufigsten verwendete PNG im Moment. Wenn Leute sagen, dass PNG "kleinere Dateigrößen als GIF hat", sprechen sie von PNG-8.
Guter Artikel Chris.
Wenn ich mich jedoch vom Thema abwende, um einen Punkt zu machen: Wenn ich Flash-Filme entwickle, verwende ich immer PNGs für Grafiken. Sie scheinen einfach schneller zu rendern, obwohl die ursprüngliche GIF-Dateigröße fast gleich ist. Das stimmt, aber vielleicht liegt es auch nur an der Dateigröße. Aber es ist schnell.
Wenn Sie PNG wirklich nicht mögen und es für verschwendet halten, die Grafik im GIF-Format zu speichern, das normalerweise 24 Bit verwendet, können Sie es immer optimieren. Reduzieren Sie die Farben auf die verwendeten. Ich benutze normalerweise die "Web speichern"-Funktion von Photoshop dafür. Sie kann die Dateigröße eines GIF oder JPEG drastisch reduzieren. Aber bei JPEG wird normalerweise mit der Bildqualität gespielt. Nicht bei GIF. Sie können die verwendeten Farben reduzieren und die Dateigröße verringern, während die Qualität erhalten bleibt.
Ich bin überrascht, dass die Punkte 2-4 immer noch diskutiert werden und dass ihre Eigenschaften anscheinend kein allgemeines Wissen sind. Ich meine, PNG ist mehr als 10 Jahre alt und wird seit fast der gesamten Zeit im Browser verwendet. Bezüglich Punkt 1 hätte Internet Explorer 6 besser sein können...
Ich warte immer noch darauf, dass JPEG2000 mit seiner hervorragenden Komprimierung und Vielseitigkeit auf den Markt kommt. :-)
Als Webentwickler versuche ich immer, die beste Bildqualität bei der kleinsten Größe zu erzielen.
Für Bilder mit wenigen Farben ist PNG-8 die beste Wahl. Ich benutze Adobe/Macromedia Fireworks für meine Web-Bilder und es erstellt konsequent PNG-8-Dateien, die kleiner als GIFs sind. Das einzige Mal, dass ich noch GIF verwenden würde, wäre für Animationen.
Natürlich sind, wie oben erwähnt, für Bilder mit vielen Farben (wie Fotos) JPEGs die beste Wahl, da PNG-24 oder 32 viel zu groß sind.
Mindblogger, Fireworks speichert auch nur die verwendeten Farben (oder Sie können sie noch weiter reduzieren und mit weniger Farben als tatsächlich verwendet ausprobieren). Das kann es sowohl für GIF als auch für PNG-8. Bei JPEGs können Sie nicht einfach Farben entfernen, Sie müssen eine Qualität in Prozent angeben. Photoshop und Fireworks stammen vom selben Unternehmen, aber wenn Sie viele Webgrafiken erstellen, ist Fireworks meiner Meinung nach besser als Photoshop.
Lim Chee Aun, Der "Gradient Effect"-Wettbewerb ist ein kleiner Betrug, da die Bilder nicht wirklich so viele Farben enthalten. Das Speichern des Gewinnerbildes als PNG-8 mit einer exakten Palette zeigt, dass tatsächlich 256 Farben im Bild sind, sodass es, obwohl es als PNG-24 gespeichert ist, nicht wirklich alle Farben nutzt, die es speichern könnte. Interessanterweise ist das Speichern als PNG-8 etwas größer als PNG-24, was überraschend ist... Jedenfalls stimme ich voll und ganz zu, dass PNG das beste Format für Bilder ohne viele Farben ist.
@Chris: Es ist nicht ganz isoliert. Irgendwie kann PNG-24 für Bilder, insbesondere mit einfachen Verläufen/Linien/Streifen, sehr kleine Dateigrößen erzeugen. Solche visuellen Verzierungen sind heutzutage in Websites sehr verbreitet, daher könnten sie tatsächlich PNG-24 verwenden, wenn sie dies erkennen.
@Chris: Sie sagten, das einzige Problem mit PNG 24 sei, dass IE 6 Probleme mit der Transparenz habe, aber das ist nicht das einzige Problem.
Internet Explorer hat eine Abweichung bei der Farbwiedergabe, siehe z.B.
>> http://untitled-document.info/tests/ie_png/
Wenn Sie ein kleines Quadrat sehen, gibt es ein Problem, da das Bild und der Hintergrund dieselbe Farbe haben.
Ich dachte, ich hätte irgendwo gelesen, dass Photoshop notorisch große PNG-24-Dateien erstellt, weil es viele unnötige Dinge einbettet.
Man kann einige Lösungen für PNG unter http://stylizedweb.com/2007/12/30/png-transparency-issues/ einsehen
Tolle Kopfzeile für diesen Beitrag!
Lim Chee Aun hat Recht, dass 24-Bit-PNGs manchmal kleiner sind als ihre 8-Bit-Gegenstücke. Das liegt daran, dass 8-Bit-Dateien eine Palette sowie die Bitmap-Bilddaten speichern müssen, während bei einer 24-Bit-Datei die Farb- und Bitmap-Daten kombiniert sind. Bei Bildern mit nur wenigen Farben ist 24-Bit oft kleiner. Ich habe gerade einen Artikel über die Optimierung von PNGs für das Web geschrieben und diese Beobachtung aufgenommen
http://www.friskdesign.com/blog/2008/03/19/optimizing-png-for-the-web/
Toller Artikel, danke für das Teilen, Matthew.
Nur damit kein Missverständnis entsteht, PNG-24 kann MIT oder OHNE Alphakanal (Transparenz) verwendet werden. Wenn Sie Opazitätsstufen in Ihrem PNG-Bild wählen, wird es für jedes Pixel mit 24 Bit für Farbe (3x8) und 8 Bit für Transparenz geschrieben > Sie haben also ein 32-Bit-PNG mit 255 Transparenzstufen.
Bitte hören Sie auf, von "PNG-24 (die mit Alphatransparenz)" zu sprechen, das ist falsch...
PNG-8-Transparenz gibt es auch (keine Alpha-Stufen, vollständige Transparenz oder vollständige Opazität)
Mit freundlichen Grüßen.
Wow, und ich dachte, ich wäre pedantisch. :-) Sie haben natürlich Recht, Twiny, obwohl ich denke, dass die meisten Leute, die über PNG diskutieren, diese Unterschiede inzwischen kennen.
es ist wirklich großartig. Danke
PNG-8 Alphatransparenz – http://blog.brenelz.com/2009/01/27/png-8-alpha-transparency-screencast/