Photoshop: So reduzieren Sie die Größe eines PNG für die Webnutzung

Ich habe eine PNG-Datei, die 2042 x 1250 ist und 6,1 MB groß ist. Wenn ich mit Photoshop öffne und "Speichern unter> PNG 24" mache und die komprimierte Dateigröße der beiden Optionen wähle (die andere ist keine Komprimierung), erhalte ich immer noch ein Bild in der Größenordnung von einigen MB, was seitdem der Fall ist wird ein Web-Asset sein, ich möchte in der KB und nicht in den MBs sein. Wie kann ich dieses Bild intelligent auf einen Standardbereich von einigen tausend KB komprimieren?

Die geeky Details (Sie haben nicht gefragt)

Einige Bildformate wie JPG unterstützen die verlustbehaftete Komprimierung . Wenn ein verlustbehaftetes komprimiertes Bild gespeichert und dann wieder gerendert wird, ist das Bild nicht zu 100% genau so, wie Sie es entworfen haben, sondern nur "nah" daran, eine Art Skizze. Ein Teil des ursprünglichen Details geht verloren . Da keine Genauigkeit erwartet wird, haben die verlustbehafteten Bilder den Luxus, nur wenige Informationen über das Originaldesign zu speichern, was zu kleinen Dateien führt. Sie können sogar festlegen, wie genau das Ergebnis sein soll: Je weniger genau das Ergebnis sein muss, desto kleiner ist die Datei.

Andererseits unterstützt das PNG-Format von Natur aus die verlustfreie Komprimierung . Dies bedeutet , dass , nachdem das Bild in einer Datei gespeichert wird, wenn es wieder alles gemacht wird , werden die Pixel genau wiedergegeben , wie Sie sie entworfen , ohne zu verlieren jedes Detail. Das ist großartig, aber leider bedeutet es, dass viele Informationen gespeichert werden müssen, um das Bild perfekt zu rendern, was zu großen Dateien führt.

Das PNG optimiert die benötigten Informationen, bevor es in einer Datei gespeichert wird. Sie können jedoch nicht wie bei JPGs angeben, wie komprimiert oder genau die Datei sein soll. Das Ergebnis ist wie es ist und Sie haben keine Kontrolle darüber, wie groß die Datei sein wird.

Einige Vorschläge

Trotzdem gibt es einige Dinge, die Sie tun können, um eine kleinere Datei zu erhalten.

• Große Bereiche mit flachen Farben werden besser komprimiert als komplexe gemusterte Bereiche. Überprüfen Sie, ob Sie Ihr Bild vereinfachen können.
• Haben Sie viel negativen Raum um das Bild? Versuchen Sie, es auf ein Minimum zu reduzieren.
• Verwenden Sie Transparenz? Wenn nicht, speichern Sie das Bild stattdessen als JPG.
• Wenn Sie es aus irgendeinem Grund nicht als JPG speichern können, aber keine Transparenz verwenden, deaktivieren Sie "Transparenz" in den Speicheroptionen. Dies wird ein paar Bisse von Ihrem Endergebnis rasieren.
• Schneiden Sie das Bild in Teile und komponieren Sie es wie eine Art Puzzle im endgültigen HTML-Code. Sie können die Teile, die Transparenz erfordern, als PNGs und die anderen Teile als stark komprimierte JPGs speichern. Das Gesamtergebnis sollte weniger schwer sein.
• Verwenden Sie ein PNG-Komprimierungswerkzeug (z . B. https://tinypng.com/ ). Wohlgemerkt, diese Tools verwenden einen verlustbehafteten Algorithmus. Sie versuchen, Ihr Bild zu vereinfachen, um es als kleinere Datei speichern zu können. Sie reduzieren die Größe Ihrer Datei zwar dramatisch, aber das Endergebnis kann zu viele Details verlieren. Sie können sie jederzeit ausprobieren und das Ergebnis je nach Anwendung beurteilen.

Wenn Sie Ihr Bild teilen, kann ich Ihnen einige Vorschläge geben.

Versuchen Sie, dem Bild eine Posterize-Einstellungsebene hinzuzufügen, und reduzieren Sie die Anzahl der Farben. Ich finde, Sie können mit dieser Methode immer noch hohe Qualität beibehalten und die Dateigröße reduzieren.

Ein 6,1-MB-PNG liegt weit außerhalb des KB-Bereichs, daher sind die Vorschläge von Cokypup am besten geeignet.

Für andere PNGs, die Sie möglicherweise erstellen, können Sie sie am besten für die Verwendung im Web speichern, indem Sie sie in Photoshop mit "Für das Web speichern" und nicht mit "Speichern unter" speichern. Photoshops "Save for Web" führt einige Optimierungen durch, die die Dateigröße drastisch reduzieren.

Dann würde ich das mit einem Komprimierungswerkzeug für PNGs wie Tiny PNG verfolgen.
Tiny PNG verwendet eine verlustbehaftete Komprimierung wie beim Speichern eines JPG. Dadurch wird die Dateigröße drastisch reduziert, und wie Sie anhand des Beispiels auf der Website sehen können, ist die verlustbehaftete Komprimierung kaum spürbar.

Wahrscheinlich ist es selbstverständlich, aber viele Leute vergessen, ihre Auflösung für Web-Assets auf 72 Pixel / Zoll einzustellen.

Bild> Bildgröße> Auflösung auf 72 ppi einstellen.