Wie reduziere ich die PNG-Dateigröße für das Web?

RIOT kann das und noch viel mehr.

Das radikale Bildoptimierungstool (kurz RIOT) ist ein kostenloser Bildoptimierer, mit dem Sie Komprimierungsparameter visuell anpassen können, während Sie die minimale Dateigröße beibehalten.

Es verwendet mit einer Seite an Seite (Dual View) oder Single View-Schnittstelle, um das Original mit dem optimierten Bild in Echtzeit zu vergleichen und sofort die resultierende Dateigröße zu sehen.

Der Bildoptimierer ist leicht, schnell und einfach zu bedienen und dennoch leistungsstark für fortgeschrittene Benutzer. Sie können die Komprimierung, die Anzahl der Farben, die Metadaten-Einstellungen und vieles mehr steuern und das Bildformat (JPEG, GIF oder PNG) für Ihre Ausgabedatei auswählen.

Eine andere Möglichkeit besteht darin, eine Kombination aus pngquant, pngout und pngcrush zu verwenden, wie hier beschrieben , dies erfolgt jedoch über die Befehlszeile.

Hier sind die Anweisungen, wie png24 Bilder in png8 für ie6 Güte zu konvertieren, die alle über die Befehlszeile mit Open-Source-Tools (i denken) pngquant +pngout + pngcrush.

1-quantisiere das Bild in 256 (also im Grunde png8 ' s Look Mist mit großen Sprites oder Sprites mit einem großen Farbbereich).

Pngquant 256 some_24_bit.- png -

2-Bild von png24 in png8 konvertieren

Pngout -c3 -d8 -y -force some_24_bit.png some_8_bit.- png -

3-Bild komprimieren

Pngcrush some_8_bit.png-bit_depth 8-brute-rem 8-reduce some_8_bit_small.- png -

Versuchen TinyPNG

Von ihrer Website:

Wie funktioniert es?

Wenn Sie eine PNG-Datei (Portable Network Graphics) hochladen, werden ähnliche Farben in Ihrem Bild kombiniert. Diese Technik wird "Quantisierung"genannt. Da die Anzahl der Farben reduziert wird, können 24-Bit-PNG-Dateien in viel kleinere 8-Bit-indizierte Farbbilder konvertiert werden. Alle unnötigen Metadaten werden ebenfalls entfernt. Das Ergebnis: winzige PNG-Dateien mit 100% Unterstützung für Transparenz.

Sie haben zwei Optionen:

• Ziehen Sie die Bilder per Drag & Drop auf ihre Website und es wird automatisch verarbeitet. Kostenloser service. (Bis zu 20 Bilder. Max je 5 MB)
• Photoshop-plugin. Das kostet $.

Ich habe das PS-Plugin nicht ausprobiert und kann daher nicht kommentieren, wie gut es funktioniert.

Wenn Ihnen die Befehlszeile nichts ausmacht, schauen Sie sich OptiPNG an.

OptiPNG ist ein PNG-Optimierer, der Bilddateien auf eine kleinere Größe komprimiert, ohne Informationen zu verlieren. Dieses Programm konvertiert auch externe Formate (BMP, GIF, PNM und TIFF) in optimiertes PNG und führt PNG-Integritätsprüfungen und-korrekturen durch.

Kombination verwenden von pngout und deflopt. pngout bestimmt automatisch, ob Ihre PNG-Farben in PNG-8 passen, und verwendet sie. deflopt drückt einige zusätzliche Bytes aus bereits optimierten Bildern aus - es ist nützlich, mit deflationierten Daten zu arbeiten, und PNG ist eines davon.

Eine gute Idee für den Umgang mit PNG mit Alphakanal im Kontext der Website-Entwicklung wäre, den Server den Trick für Sie machen zu lassen: Trennen Sie die Bilddaten dynamisch vom Alphakanal auf dem Server, optimieren Sie beide separat und kombinieren Sie sie mit dem Canvas-Element und etwas JavaScript im Browser neu. Ta-Da! Funktioniert mit allen modernen Browsern.

Hier wird erklärt, wie es geht getan:

Http://headers-already-sent.com/artikel/shrinkimage-1/

Sie finden auch ein komplettes ZIP-Paket mit dem PHP-Skript und einem jQuery-Plugin. Lassen Sie uns wissen, was Sie darüber denken.

Wenn Sie ein Bild wirklich verkleinern müssen und alle einfachen Vorschläge nicht funktionieren, besteht die endgültige Antwort darin, das Bild in komprimierbare Teile zu unterteilen und sie auf dem Client mit Skripten neu zu kombinieren.

Das Bild aus der Frage sieht aus wie ein Farbverlauf mit vertikalen Linien und einigen Flecken/Rauschen. Teilen Sie das in die folgenden Ebenen auf:

1. Der Farbverlauf ohne Linien oder Rauschen. Dies wird gut in PNG und sehr gut in JPEG komprimiert. Noch besser, verwenden Sie JavaScript, um generieren Sie den Farbverlauf auf dem Client. Sie könnten es wahrscheinlich in weniger als 200 Bytes JS tun.
2. Die vertikalen Linien ohne Farbe oder Rauschen. Sie können dies auf einen einzelnen 4-Bit-Kanal (Alpha oder Grau) komprimieren. Sie benötigen nur ein 1 Pixel großes Bild, das Sie dehnen können. Das würde in PNG sehr gut komprimieren.
3. Das Rauschen. Nochmals, alles was Sie brauchen ist ein einzelner 4-bit-Kanal (alpha oder Grau). Ohne Farbe oder Linien sollte dies in PNG sehr gut komprimiert werden oder JPEG.

Kombinieren Sie die Ebenen mit JavaScript zu einem einzigen Bild, und Ihr gesamtes "Bild" kann 15 KB oder weniger groß sein.

Diese Art von Arbeit war jahrzehntelang Industriestandard in Spielen und ist es immer noch. Das Tolle ist, dass Photoshop bereits alle diese separaten Ebenen hat, wenn Sie Ihr Bild wie ein Profi erstellt haben.

Standard-PNG-Dateien sind bereits das am meisten komprimierte Bildformat, das Sie verwenden können, weshalb PNG-Dateien so häufig für Bilder auf Websites verwendet werden, insbesondere für Designzwecke.

Es gibt jedoch immer noch eine Möglichkeit, PNG-Dateien noch weiter zu komprimieren.durch Verringern der Anzahl der im Bild verwendeten Farben. Dadurch kann die Dateigröße häufig um bis zu 70% oder sogar höher reduziert werden.

Die beste automatisierte freie Software mit dem höchsten Gesamtkomprimierungsprozentsatz, den ich dafür gefunden habe, ist FileOptimizer die mehrere Motoren verwendet (dh. PngOptimizer, PNGOUT, pngwolf usw.) um das Bild auf die kleinstmögliche Größe zu komprimieren.

Ein weiteres Online-Tool, das ich mit guten Ergebnissen gefunden habe, ist dieses: http://www.giftofspeed.com/png-compressor/

Lassen Sie mich FileOptimizer vorstellen. Es kombiniert verschiedene Methoden zur Bildoptimierung (einschließlich EXIF - Entfernung zum Speichern einiger zusätzlicher Bytes-kann deaktiviert werden).

Testergebnisse und Vergleich mit anderen Lösungen.

ScriptPNG http://css-ig.net/scriptpng

Es gibt Ihnen etwa 10 verschiedene Optionen, einschließlich lossy! Ich habe versucht, ein Bündel und diese Windows-Batch-Datei (mit Haufen .exes) ist großartig

Ich persönlich benutze es, um auf 8bit verlustbehaftet zu komprimieren. Nicht wirklich sicher, wie es funktioniert, aber meine screenshots sehen gleich aus. Ich benutze es, um Screenshots zu komprimieren. Ich hatte ungefähr 2 GB pngs, jetzt nur noch 700 MB