Welches Format für kleine Website-Bilder? GIF oder PNG? [geschlossen]

https://stackoverflow.com/questions/115818

02-07-2019
|

Frage

Wenn kleine Symbole zu tun, Header-Grafiken und dergleichen für Websites, ist es besser, GIFs oder PNGs zu benutzen?

Natürlich, wenn Transparenzeffekte erforderlich sind, dann PNGs ist definitiv der Weg zu gehen, und für größere, fotografische Bilder würde ich JPEGs verwenden - aber für normale Web „Möbel“, die Sie empfehlen würden und warum? Es kann nur die Werkzeuge sein Ich verwende, aber GIF-Dateien scheinen in der Regel ein wenig kleiner als ein vergleichbar, PNG zu sein, aber sie nur mit scheint so 1987.

Lösung

Als allgemeine Regel gilt, PNG ist nie schlechter, und oft besser als GIF wegen überlegen Kompression. Es könnte einige Grenzfälle geben, in denen GIF etwas besser ist (weil das PNG-Format einen etwas größeren Aufwand von Metadaten haben kann), aber es ist wirklich nicht die Sorge wert.

Es kann nur die Werkzeuge sein Ich verwende, aber GIF-Dateien in der Regel scheinen ein wenig kleiner als ein vergleichbar, PNG
zu sein

Das mag in der Tat aufgrund des Codier-Tool Sie verwenden.

/ EDIT: Wow, es scheint eine Menge Missverständnisse über PNG-Dateigröße zu sein. Zu zitieren Matt:

Es ist nichts falsch mit GIFs für Bilder mit wenigen Farben und wie Sie vielleicht bemerkt haben, neigen sie dazu, kleiner zu sein.

Dies ist eine typische Codierung Fehler und nicht inhärent in dem Format. Sie können die Farbtiefe steuern und die PNG-Datei so klein machen. Bitte beachten Sie die entsprechenden Abschnitt in Wikipedia-Artikel.

Auch fehlende Unterstützung in MSIE6 wird aus dem Verhältnis von Chrono geblasen:

Wenn Sie brauchen Transparenz und können mit GIFs auszukommen, dann würde ich ihnen empfehlen, weil IE6 sie unterstützt. IE6 tut nicht gut mit transparenten PNGs.

Das ist falsch. MSIE6 hat Unterstützung PNG Transparenz. Es wird nicht das Alphakanal-Unterstützung (ohne ein paar Hacks), obwohl dies ist jedoch eine andere Sache, da GIFs es gar nicht haben.

Die nur technischen Grund GIFs verwenden anstelle von PNG-Dateien ist bei der Verwendung Animation brauchen und wollen nicht auf andere Formate verlassen.

Andere Tipps

Die W3C Erwähnung 3 Vorteile von PNG über GIF.

• Alphakanäle (Variable Transparenz),

• Plattformübergreifend Gamma-Korrektur (Steuerung der Bildhelligkeit) und Farbkorrektur

• Zweidimensionale Interlacing (a Verfahren zur progressiven Anzeige).

Auch haben einen Blick auf diese Ressourcen für die Führung:

Wow, ich bin wirklich mit den falschen Antworten hier überrascht. PNG-8 wird immer kleiner sein als GIF, wenn sie richtig optimiert. Führen Sie einfach Ihre PNG-8-Dateien durch pngcrush oder eine der anderen PNG Optimierungsroutinen.

Die wichtigsten Dinge zu verstehen:

PNG8 und GIF sind lossless <= 256 Farben
PNG8 kann immer kleiner sein als GIF
GIF sollte nie verwendet werden, wenn Sie Animation benötigen

und natürlich

Verwenden JPG für Schwarzweiß oder Farbfotografische Bilder
Verwenden Sie PNG für niedrige Farbe, Linienkunst, Bildschirmtyp Bilder

Der Hauptgrund PNG über GIF aus rechtlicher Sicht zu verwenden, wird hier abgedeckt:

http://www.cloanto.com/users/mcb/19950127giflzw.html

Die Patente wurden offenbar ab 2004 abgelaufen, aber die Idee, dass Sie PNG als Open-Source über GIF ist attraktiv für viele Menschen nutzen können.

(png Open-Source-Referenz: http: //www.linuxtoday.com/news_story.php3?ltsn=1999-09-09-021-04-PS )

Seien Sie vorsichtig von Farbverschiebungen, wenn PNG verwenden. Dieser Link gibt ein Beispiel, und enthält viele weitere Links mit weiteren Erklärung:

http://www.hanselman.com/blog/GammaCorrectionAndColorCorrectionPNGIsStillTooHard.aspx

GIF-Bilder sind für dieses Problem nicht unterliegen.

Ich glaube nicht, es einen großen Unterschied macht (Kunden interessieren sich nicht). Persönlich würde ich PNGs wählen, weil sie ein W3C-Standard ist.

Seien Sie mit den PNG-Transparenz-Effekte vorsichtig. Sie nicht mit IE6 arbeiten

Für Bilder im Web, jedes Format hat seine Vor- und Nachteile. Für Foto-Typ-Bilder (dh viele, viele Farben, keine harten Kanten) verwenden, um ein JPEG.

Für Symbole und dergleichen, haben Sie die Wahl zwischen PNG und GIF. GIF-Dateien werden auf 256 Farben beschränkt. PNGs kann wie GIFs (dh 256 Farben, mit 1-Bit-Transparenz, die in IE6 funktionieren wird) formatiert werden, aber für kleine Bilder, sie sind leicht größer als GIFs. 24-Bit-PNGs sowohl einen großen Tonumfang unterstützen, und Alpha-Transparenz (obwohl es in IE6 mühsam ist).

PNGs sind die einzige wirklich sinnvolle Wahl für Dinge wie Screenshots (dh beide viele Farben und harte Kanten), und persönlich, das ist, was ich mit die meiste Zeit bleiben, es sei denn, ich habe etwas , für die JPEG besser geeignet (wie ein Foto).

Indiziert PNG (weniger als 256 Farben) ist eigentlich immer kleiner als gif, so dass ich, dass die meisten der Zeit.

Für computergenerierte Grafiken (das heißt selbst gezeichnet in Photoshop, Gimp, etc.) JPG ist die Frage aus, weil es verlustbehaftete ist - das heißt Sie zufällige graue Pixel erhalten. Bei statischen Bildern ist PNG besser in jeder Hinsicht: mehr Farben, skalierbare Transparenz (zB 10% transparent, GIF unterstützen nur 0% und 100%), aber es gibt ein Problem, dass einige Versionen von Internet Explorer PNG nicht tun Transparenz richtig, so erhalten Sie flache nicht-transparenten Hintergrund, die hässlich aussieht. Wenn Sie nicht über diese IE-Benutzer ist es egal, gehen Sie für PNG.

BTW, wenn Sie Animationen wollen, gehen Sie für GIF.

PNG ist ein 100% Ersatz für GIF-Dateien und wird von allen Web-Browsern sind Sie wahrscheinlich begegnen unterstützt.

Es gibt sehr, sehr wenige Situationen, in denen GIF vorzuziehen wären. Das wichtigste ist, Animation - der GIF89a-Standard unterstützt Animationen und praktisch jeder Browser unterstützt, aber das gute alte PNG-Format nicht -. Sie, dass MNG verwenden müssen, die Browser-Unterstützung beschränkt hat

Praktisch alle Browser unterstützt Single-Bit-Transparenz in PNG-Dateien (die Art der Transparenz durch das GIF-Format angeboten). Es gibt einen Mangel an Unterstützung in IE6 für PNG Der vollständige 8-Bit-Transparenz, aber das kann für die meisten Situationen einer wenig CSS Magie behoben werden.

Wenn Sie Ihre PNG-Dateien kommen aus mehr als äquivalent GIF-Dateien, ist es fast sicher, weil Ihr Quellbild mehr als 256 Farben hat. GIF-Dateien sind auf eine maximale Palette von 256 Farben indiziert, während PNG-Dateien in den meisten Grafikprogrammen standardmäßig in einem 24-Bit verlustfreies Format gespeichert werden. Wenn die Dateigröße wichtiger als genaue Farben ist, speichern Sie die Datei als eine 8-Bit-PNG indiziert und es sollte zu GIF oder besser entsprechen.

Es ist möglich, eine GIF-Datei „Hack“ mehr als 256 Farben haben eine Kombination von Animations-Frames mit der Verwendung von Flaggen und mehrere Paletten do-not-ersetzen, aber dieser Ansatz nahezu vergessen ist seit dem Aufkommen von PNG über.

Ein großes Problem bei GIFs ist, dass es ein Patent behaftetes Format (EDIT: Diese scheinbar nicht mehr wahr ist). Wenn Sie nicht über das kümmern, fühlen sich frei, GIFs zu verwenden. PNGs haben viel mehr Flexibilität über GIFs, vor allem im Bereich des Farbraumes, aber das Flexibilität bedeutet oft Sie wollen, um die PNGs „optimieren“ vor der Veröffentlichung. Eine Web-Suche sollte Werkzeuge für Ihre Plattform für diese aufzudecken.

Natürlich, wenn Sie Animation wollen, GIF ist der einzige Weg zu gehen, da MNG war im Grunde ein Rohrkrepierer aus irgendeinem Grunde.

„Es kann nur die Werkzeuge sein Ich verwende, aber GIF-Dateien scheinen in der Regel ein wenig kleiner als ein vergleichbar, PNG zu sein, aber mit ihnen scheint nur so 1987“.

Es ist wahrscheinlich Ihre Werkzeuge. Vom PNG FAQ:

„Es gibt zwei Hauptgründe für dieses Phänomen. Äpfel mit Birnen vergleichen (das heißt, nicht die gleichen Bildtypen zu vergleichen), und mit schlechten Tool“ Fortsetzung ...

Aber man konnte immer versuchen, als beide Speicher (mit der gleichen Farbtiefe) und sieht, welche kleiner kommt.

Natürlich, wenn Sie auf ein Grafikformat für Ihre Website standardisieren möchten, PNG ist wahrscheinlich das beste zu verwenden sein.

Ich persönlich verwende Gifs ziemlich viel für meine Bilder, wie sie überall arbeiten, offensichtlich Ihre Transparenz Begrenzung ist ein Schlüsselelement, dass jemand zu einem bestimmten Format lenken würde.

Ich sehe keine Übertretungen zu Gifs verwenden.

Wenn sie kleiner werden und Sie haben nichts aus der Nutzung der Funktionen PNG Angebote zu gewinnen (die Alpha-Kanal Transparenz und mehr als 256 Farben), dann sehe ich keinen Grund, warum Sie PNG verwenden sollten.

gif-Dateien sind in der Regel ein wenig kleiner sein, da sie keine Transparenz Alphakanal (und vielleicht auch aus anderen Gründen) unterstützen. Ich persönlich fühle mich nicht der Größenunterschied lohnt sich wirklich Sorgen um fast so viel wie früher. Die meisten Menschen sind mit der Bahn mit irgendeiner Art von Breitband jetzt, so bezweifle ich, werden sie einen Unterschied bemerken.

Es ist wahrscheinlich wichtig, die Art der Bilder zu verwenden, die Ihre Manipulationswerkzeug mit am besten funktionieren.

Plus, ich mag die Fähigkeit, ein Bild auf einem beliebigen Hintergrund zu setzen und einen Schlagschatten Arbeit hat, die mich Punkte mehr auf das PNG-Format.

ich in der Regel Gifs verwenden wegen der Größe, aber es gibt auch PNG-8, die auch 256 Farben ist.

Wenn Sie Lust auf halbtransparente Materialien müssen dann mit png-24.

Normalerweise verwende ich die Funktion in Photoshop ‚für Web speichern‘, die Sie mit Dateityp, die Anzahl der Farben Geige lässt usw. und sehen das Ergebnis, bevor Sie speichern. Natürlich würde ich die kleinste möglich benutzen, die in meinen Augen gut sieht immer noch.

Ich benutze jpg für alle nicht-transparenten Bildern. Sie können die Komprimierung steuern, was Ich mag. Ich fand dieser Website, die die beiden vergleicht. jpg ist kleiner und sieht besser aus.

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow