.png: 170kb -> 7kb?!

[Rebirth]

Hey.

Um mich kurz zu fassen: Ich habe eine Grafik im .png Format. Etwa 7kb groß. Es ist im Prinzip ein weiß-grauer Verlauf und oben ein schwarz-grauer Verlauf, dazwischen ein grüner Balken.
So. Die Grafik wollte ich austauschen, also die Grafik in PS geöffnet und praktisch nur den weiß-grauen Verlauf zu nem schwarz-grauen Verlauf gemacht. Speichern -> 170kb groß!
Als "für web optimiert" gespeichert -> maximal 120kb, aber mit Qualitätsverlust!

Es ist mir ein Rätsel wie die ursprüngliche Grafik so verdammt klein wird. Ich brauche sie als Hintergrund für eine Website, wisst ihr was ich da machen kann? Oder wie das gemacht wurde?

Edit: Grafiken angehängt... 1. ist die neue, 2. die Ursprüngliche. Es sind sogar nur 4kb!

 

[Phantom2k]

mal kurz uploaden (die alte und neue png) geht hier nicht oder? dann jeder hier mal selbst schauen und probieren

 

[Rebirth]

moment...

Ergänzung (16. April 2011)

Done.

 

[Yuuri]

Und wie hast du den Farbverlauf geändert? Wenn du einen neuen, ähnlichen Verlauf drübergezogen hast, ist das kein Wunder. Wenn ich den Verlauf invertiere erhalte ich auch < 10 kB, genauso wenn ich es färbe. Mit IrfanViews PNGOUT-Plugin komm ich sogar auf 3 kB pro File.

 

[Rebirth]

Ewww. Ich hab ne Rechteckauswahl mit PS erstellt und nen simplen Verlauf reingepackt. ôo
Das da oben ist sicherlich auch nicht schlecht, aber mit Qualiverlust. Im großen und Ganzen passt das aber so!
Verdammt, ist das mit PS nicht auch iwie möglich? Ideen wie ich das da auch so klein hinbekomme?

 

[Yuuri]

Indem du weniger Abstufungen in den Verlauf machst. Wenn du in PS eine Tonwertkorrektur vornimmst oder die Helligkeit mit Vorschau verringerst, siehst du schön die ganzen Abstufungen. Ist halt kein guter Verlauf. Wenn du einen Verlauf wie oben beschrieben erstellst, hast du natürlich weit mehr Farbwerte vorhanden, welche ja auch einzeln gespeichert werden müssen. Dadurch kommst du halt auf die Dateigröße, da mehr Informationen vorhanden sind.

Musst halt mal ein wenig experimentieren, wann du den besten Kompromiss aus Verlauf und Dateigröße erhälst.

 

[Rebirth]

Mhh.. Und automatisiert gibts das nicht?

 

[Whiz-zarD]

Wenn du sie als Hintergrund für eine Webseite brauchst, wieso nimmst du nicht einen 1 Pixel breiten Streifen davon und skalierst ihn per CSS auf die Breite?

Mit dem Tool PNGOptimizer komm ich dann auf eine Größe von 627 Bytes.

Außerdem ist die Differenz vom Farbverlauf so minimal, sodass man auch gleich eine solide Farbe nehmen kann. Das kann CSS von selbst und man braucht dann nicht mal eine Bilddatei dafür.

 

[Rebirth]

Da ich technisch noch nicht so weit bin. Ich m;chte lediglich die Grafik austauschen. Ich muss doch mit PS auch einfach auf ein 'hnliches Ergebnis wie Yuuri kommen können! Wenn selbst IrfanView das kann...

 

[Whiz-zarD]

Die Speicherung von PNGs ist unter Photoshop nicht optimal. Irfanview benutzt einen Optimizer, um die Kompression von PNG zu verbessern.

Ich weiß aber echt nicht, wo das Problem ist.
Ich hab da grad blödsinn geredet. Mach einen 1 Pixel Breiten Streifen von dem Hintergrund und benutz diesen als Hintergrund. Standardgemäß wird der Hintergrund in die X- und Y-Richtung wiederholt. Du hast also somit den selben Effekt im Browser, als wenn du das komplette Bild nimmtst.
Wenn dies nicht der Fall ist, musst du die Zeile im CSS Stylesheet entfernen, die das Wiederholen unterbindet. Ist deutlich weniger Arbeit, als mit Photoshop zu experimentieren.

 

[Rebirth]

Es geht nicht. Es ist ein Clan CMS, DZCP. Ein Template. Ich kann nicht einfach so den Code ändern, auch ohne dass da das ganze Design zerrissen wird.

 

[Whiz-zarD]

und wie das geht ...

 

[Rebirth]

Ist doch völlig egal. Bitte.
1. Hab ich dazu nicht das nötige Know-How
2. Will ich das nicht, es geht einfach nur um die Grafik, nicht um Alternativen!
3. Nein.

Ist denn dann irgendwie ein Import von PS zu Irfanview möglich?

 

[Whiz-zarD]

Sturrheit lässt grüßen.
Anstatt es einmal mit dem 1 Pixel breiten Streifen auszuprobieren und evtl. eine Zeile aus dem CSS Stylesheet zu entfernen, lieber Tage lang mit Photoshop zu experimentieren ...

Ergänzung (16. April 2011)

Bittesehr.
Das Problem sind nämlich nicht die Abstufungen, sondern die Anzahl der Farbanteile.
Ich hab nun folgendes gemacht: Habs zuerst als JPEG gespeichert und dann zurück nach PNG. Dadurch wurde es noch ein bisschen kleiner und zum Schluss noch PNgOptimizier verwendet.

PNG ist ein Format, was alle Farbanteile nimmt. Bei JPEG werden vornherein die Farbanteile entfernt, die das menschliche Auge sowieso nicht wahrnimmt. Dadurch gehen aber die Informationen der Farbanteile verloren. Da das Bild nur wenige Farben besitzt und diese einanander angereiht sind, kann PNG noch für eine bessere Kompression sorgen, als JPEG, da bei JPEG die Werte in Zick-Zack gespeichert werden.

Mit PNGOptimizier werden dann noch restliche, nutzlose Informationen gelöscht und übrig bleibt ein Bild mit ~3 KB größe.

Das Weiß/Graue wurde wohl auf die selbe Weise erzeugt, da Farbinformationen fehlen und daher die Treppenbildung zustande kam.

 

[Rebirth]

Na also. ^^

Also: Grafik bearbeiten -> JPEG (kann ich hier die Qualität nochmals beeinflussen, bspw. wenn ichs etwas besser haben will? Sprich, höhere Qualitätsstufe?) -> PNG -> PNGOptimizer. Richtig?
Wäre super!

 

[Whiz-zarD]

Am Besten, du speicherst das Bild mit Photoshop erstmal als PNG ab.
Dann schnappst du dir IrfanView und speicherst es als JPEG. Die Qualität steht bei mir auf 80.
Und dann die JPEG wieder in PNG gespeichert und zum Schluss die PNG durch PNGOptimizier gejagt.

So hab ich das gemacht. Das ist aber alles mehr als Dirty. Bei so einem Hintergrund wäre aber die 1 Pixel Methode immernoch die Beste Wahl, da die Grafik dann nur noch 600 Bytes groß.

 

[Yuuri]

Das Problem sind nämlich nicht die Abstufungen, sondern die Anzahl der Farbanteile.

Widerspruch? Je mehr Abstufungen, desto mehr Farben (in jeglicher Hinsicht und Kombination).

 

[Whiz-zarD]

Die Abstufungen kann man aber nicht in Photoshop einstellen.
Diese entstehen später beim Prozess beim Speichern einer JPEG Datei.