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

10

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?

Thalatta
quelle
1
Verwenden Sie stattdessen file -> save for web und wählen Sie png 24 aus der Liste der Dateiformate (JPG ist normalerweise die Standardeinstellung).
AndrewH
Was lässt Sie denken, dass eine Datei so oft komprimiert werden kann, wie Sie möchten? Möglicherweise möchten Sie zu JPEG wechseln und an den Einstellungen für die niedrigere Qualität basteln.
usr2564301

Antworten:

13

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.

Cockypup
quelle
TinyPNG konvertiert in 8-Bit-PNG, das wie ein GIF aussieht.
Hannes Schneidermayer
@Heanz. Wahr. Es konvertiert in 8-Bit. Aber es ist kein GIF. Es unterstützt Alpha-Transparenz. Nach meiner Erfahrung habe ich den Unterschied zwischen dem ausgewachsenen und dem von ihnen produzierten PNG nie bemerkt.
Cockypup
@cokcypup Für Logos, die wahr sind, aber für ein menschliches Gesicht auf keinen Fall.
Hannes Schneidermayer
@Heanz Ich habe noch nie für menschliche Gesichter verwendet, aber ich verwende es regelmäßig für kosmetische Verpackungsfotos. Ich kann den Unterschied darin nicht erkennen. Trotzdem ist mein Kommentar zu Alpha richtig. Das GIF-Format unterstützt keine Alpha-Transparenz.
Cockypup
2

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.

Ryan
quelle
Klappt wunderbar!
Christian Strang
0

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.

Lycorin
quelle
Kaum wahrnehmbar hängt stark von dem Bild ab, das Sie durch den von mir gefundenen Algorithmus einspeisen. Verwenden Sie es mit Vorsicht und überschreiben Sie niemals Ihre Originaldatei.
PieBie
Es konvertiert in 8-Bit und das sieht aus wie ein GIF auf bunten Bildern.
Hannes Schneidermayer
-1

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.

Tristan
quelle
das hat keine Auswirkung auf Bilder, die für das Web verwendet werden, nur die Größe in px
Luciano