[Tutorial] Bilder fürs Internet optimieren

Man hat doch eigentlich sehr oft das Problem, dass man ein Bild hat welches man gerne ins Internet stellen, oder per Email verschicken will, aber es einfach zu groß dafür ist. Also muss man es komprimieren, aber wie am besten ohne, dass man zu viel von der Qualität verliert?
Darum möchte ich jetzt mal hier die drei im Internet gängigen Formate erläutern und wann man sie verwenden sollte. Png, gif und jpeg.

png:
Das png-Format ist als verlustfrei anzusehen aber im Gegensatz zum ebenfalls verlustfreien bmp nicht so groß, was es fürs Internet brauchbar macht.

gif:
Das gif-Format hat schon einige Jahre auf dem Buckel. Größter Nachteil ist deshalb, dass es maximal Bilder mit 256 Farben erstellt, was bei Fotos oft nicht ausreicht. Klarer Vorteil des gifs ist allerdings die Tatsache, dass es auch Transparenz darstellen kann.

jpg:
Jpeg ist eigentlich das gebräuchlichste Format, da es sehr klein ist, aber dennoch ein akzeptables Bild liefert. Bei zu feinen Linien oder zu starker Komprimierung können allerdings hässliche Artefakte entstehen.


Und wann sollte man nun welches Format benutzten? Nun, wenn man zB Fotos mit einer Digicam gemacht hat, dann sollte man das jpeg wählen, was ja von den meisten Cams eh benutzt wird. Generell gesagt, wenn auf dem Bild viele Verläufe (verursacht durch Lichter, ...) sind oder einfach nur eine große Farbfülle herrscht und man nicht so kleine Details im bild hat, dann sollte man jpeg nehmen. Legt man jedoch wert darauf, dass bei einer Aufnahme auch noch haarfeine Details scharf zu erkennen sind, dann sollte man sich für ein png entscheiden. Und wenn zB einen Screenshot von einer Windowsoberfläche gemacht hat, oder ein Logo oder eine Grafik erstellt hat in der nicht viele Farben sind, dann ist ein gif das richtige.
Um die Sache zu verdeutlichen, hab ich mal zwei Testbilder erstellt:

1. Verläufe
Hier der verlustfreie Verlauf im png-Format (12,5 kb)
http://www.kinematix.de/forum/tutima...verlauf_01.png

Hier der selbe als gif. Ich hab die Farben auf 32 gesetzt, damit man deutlich erkennt, was ein gif bei sowas macht (3 kb)
http://www.kinematix.de/forum/tutima...verlauf_02.gif

Nochmal als gif, wieder mit 32 Farben diesmal aber mit einem Diffusions-Dither (Einstellung beim speichern von gif im Photoshop). Sieht besser aus, aber der Verlauf ist nicht mehr sauber, da Pixel vermischt werden. (7 kb)
http://www.kinematix.de/forum/tutima...verlauf_03.gif

Nochmal ein gif, aber diesmal mit 256 Farben. Dafür aber sehr groß. (15 kb)
http://www.kinematix.de/forum/tutima...verlauf_04.gif

Und als letztes das ganze als jpeg mit Qualitätsstufe 3. (9 kb)
http://www.kinematix.de/forum/tutima...verlauf_05.jpg

Fazit: Ein gif eignet sich nicht wirklich für Verläufe, da es entweder schlecht aussieht, oder zu groß wird. Ein png ist verlustfrei, doch auch nicht gerade klein. Das beste Verhältnis von Qualität zu Größe hat hier das jpeg. Wobei ich persönlich sagen muss, dass der jpeg-Kompressor von Photoshop nicht gerade gut ist. Der von Photoimpact macht wesentlich bessere Qualität bei kleinerem Platzverbrauch.


2. Grafiken
Zuerst wieder als png (1,29 kb)
http://www.kinematix.de/forum/tutima..._grafik_01.png

Jetzt als gif. Da nur zwei Farben im Bild sind, stellt Photoshop automatisch die Farbtabelle auf 2 Farben ein. (822 Byte)
http://www.kinematix.de/forum/tutima..._grafik_02.gif

Als letztes das ganze als jpeg. Qualitätsstufe 3. (10,3 kb)
http://www.kinematix.de/forum/tutima..._grafik_03.jpg

Fazit: Hier ist es eindeutig. Gif ist der Sieger. Kein Qualitätsverlust, aber unschlagbar klein. Das jpeg ist weit abgeschlagen, mit über 10 kb mehr als 12 mal so groß und das Ergebnis ist nicht mal schön anzusehen. Die Schrift wirkt ganz matschig.


So ich hoffe, dieses Tutorial wird nützlich sein ;)

Kleine Ergänzung:

gif kann als einziges dieser Formate auch animierte Bilder darstellen.

png kann genauso wie gif transparenzen darstellen. (oder auch nicht :p )

Kommentar zu GIF: In einigen Teilen der Welt ist der Kompressionsalgorithmus von GIF immer noch patentiert.

Kommentar zu JPEG: Nur für Fotos etc. verwenden. Wenn man Text- oder Liniengrafik macht kann JPEG das Bild wirklich häßlich machen.

Zitat:

---

Original geschrieben von nudelsalat
Kleine Ergänzung:

gif kann als einziges dieser Formate auch animierte Bilder darstellen.

---

Es gibt MNG, animiertes PNG (komplett mit Alphatransparenz, 24 bit-Farben etc). Dummerweise wird MNG von einem gewissen seit 2001 nicht überarbeiteten Browser nicht unterstützt, weshalb man es im Web kaum sieht.
Animation Shop benutzt MNG als Standardformat.

Zitat:

---

png kann genauso wie gif transparenzen darstellen. (oder auch nicht :p )

---

Nicht ganz: PNG kann Transparenz wesentlich besser als GIF darstellen. GIF hat binäre Transparenz: Entweder ganz durchsichtig oder gar nicht. PNG hat Unsterstützung für einen Alphakanal und kann so Transparenz in 256 Stufen darstellen. Binäre Transparenz geht auch, aber der Alphakanal ist einfach cooler...
Ein Beispiel dafür ist mein Ava: Die Ränder sind teiltransparent, was das Ding insgesamt ein Stück besser aussehen läßt als ein kantiges GIF.

Einziger Nachteil: Microsoft hat seit IE4 nicht an der PNG-Unterstützung gearbeitet, weshalb der IE alphatransparente PNGs nicht korrekt darstellt; sie bekommen einen häßlichen grauen Hintergrund verpaßt. Mit binärer Transparenz hat der IE keine Probleme.

BTW, ich rate davon ab, sich auf die eingebaute Gammakorrektur von PNG zu verlassen - einige Grafikprogramme uns die meisten Browser können damit nicht wirklich umgehen.



Wenn man mit PNG arbeiten will, dann empfehle ich den Einsatz von OptiPNG. OptiPNG ist ein Programm, das PNG-Bilder neu packt und dabei oft ein gutes Stück kleiner macht. Einige Grafikprogramme sind in Sachen PNG-Kompression nicht gerade gut (AFAIK ist Photoshop sogar ziemlich schlecht) und packen das Bild nicht optimal; OptiPNG korrigiert das.
Das Prinzip ist einfach: Es gibt ungefähr 10.000 Arten, eine PNG zu packen (Kombination von Kompressionsmethoden). OptiPNG geht die Kombinationen durch, die normalerweise die besten Resultate bringen und benutzt die, die für das gewählte Bild das beste Ergebnis bringt, um das Bild neu zu packen.

OptiPNG hat das erste Testbild auf 10661 Bytes gekriegt (17,36% kleiner) und das zweite auf 475 Bytes (71,7% Reduktion und deutlich kleiner als die GIF).
Beide Bilder wurden mit -o7 optimiert, was die 240 üblichsten Kombinationen durchgeht. Wahrscheinlich hätten auch weniger gereicht.

Hier die optimierten Bilder:

10,41 kB. Schon etwas besser als vorher.
http://www.rpgmaker.info/temp/png1.png
475 Byte! Nimm das, GIF!
http://www.rpgmaker.info/temp/png2.png


PNG ist, richtig gehandhabt, durchaus in der Lage, GIF in seinem Spezialgebiet (Bilder mit wenigen Farben) Konkurrenz zu machen.


PS: Ich habe es zwar nicht geschafft, OptiPNG unter Linux zu kompilieren, es läuft aber prima unter Wine.

:A Super Ergänzung. Mein Tut war damals für Photoshop ausgelegt. Daher hab ich alle Bilder auch damit komprimiert. Hab ja selber geschrieben, dass ich da Photoimpact bevorzuge. Das macht sowohl bei gifs, als auch bei jpgs bessere Qualität, bei weniger Platzverbrauch. Weßhalb ich aus Photshop eigentlich nur noch unkomprimiert raus gehe, um dann ein exterenes Kompressionsprogramm zu verwenden.

Und zu der Sache mit den PNGs. Ich halte das auch für ein sehr schönes Format. Aber setzte es selber nur selten ein, weil der von vielen genutzte IE damit Probleme hat. Wie ja von dir beschrieben, wird der Alphakanal nicht ausgewertet. Sowas zerstört ein Design, wenn man dann auf einmal so graue Flächen im Bild hat. Das andere ist diese Gammakorrektur. Wenn ich ein Bild zerlege und dann in verschiedenen Formaten speichere, dann verwurschtelt png in verbindung mit manchen Brwosern immer die Farben.

Zumindest beim GIMP kann man beim Speichern auswählen, ob man Gamma-Informationen speichern will. Allerdings ist das auch das Einzige, was ich am GIMP irgendwie gut finde... *g*

BTW, das mit dem IE und der fehlenden Alpha-Unterstützung ist wirklich schade. Ich habe mal ein ganz nettes Design gehabt, das einfach aus einem Hintergrundbild und mehreren <table>s mit einem halbtransparenten 1x1-PNG als Hintergrund bestand. Übereinandergelegt konnte man mit denen einen wirklich netten Effekt erzielen, ohne mühselig die <table>s pixelgenau an den Hintergrund anzupassen.
Dann habe ich mir das Design mit dem IE angesehen: Die schönen strukturierten und übersichtlichen Tabellen waren plötzlich nur noch graublaue Flächen.

Ich hoffe, daß der nächste MS-Browser (ob's nun der IE oder der MSNE ist) endlich vernünftige PNG-Unterstützung bietet. Es ist frustrierend, ein seit 1994 existierendes Format, das seit 1996 vom W3C empfohlen wird und seit 1997 standardisiert ist nicht benutzen zu können und gezwungen zu sein, mit den Methoden von 1993 zu arbeiten, nur weil Microsoft sich nicht dazu bequemen kann, libpng vernünftig zu benutzen (was sie auch schon seit 1998 versprechen).

PNG ist meiner meinung nach ein recht interresantes Thema, da es gegenüber JPG und Gif in sehr vielen Fällen überlegen ist. Weiß eigentlich jemand, warum Microsoft nicht an einer besseren PNG-Unterstützung im IE arbeitet? Ich benütze fast ausschließlich dieses Format und finde, das es einfach das beste ist.

@Jesus_666: Ich hab immer geglaubt, dass du den Hintergrund vom Ava absichtlich grau hast ^^

Vielleicht liegt es daran, daß es Microsoft herzlich egal sein kann, ob die Leute sich über den IE beschweren. Hundert Millionen Leute, deren Wissen: Computer-Skill nicht hoch genug ist um Opera oder Firefox zu installieren, werden sicherstellen, daß der IE der Standardbrowser im Netz bleiben wird. Selbst, wenn er sich nach Version 6 nicht mehr im Geringsten weiterentwickelt. Dann entwickelt sich das Netz eben auch nicht weiter und fertig.

Das ist traurig aber wahr. Wenn Microsoft sich entscheidet, ein Feature nicht zu unterstützen, obwohl die W3C es ausdrücklich empfiehlt, dann hat das Feature eben Pech gehabt und mu sich mit einem Nischendasein zufriedengeben. So ist das mit PNG (teilweise) und so wird es vermutlich auch mit SVG gehen. Wenn die IE-User sich ein Flash-Plugin runterladen können, ohne daß MS dafür arbetien muß - warum dann Unterstützung für ein Flash-ähnliches Format in den IE einbauen? Es ist ja nicht so als ob der IE auch nur annähernd gut sein müßte um erfolgreich zu sein.


BTW, wenn du den IE benutzt ist der Hintergrund meines Avas absichtlich grau. Ich benutze mit voller Absicht einen Avatar, der nicht mit dem IE kompatibel ist weil ich keine Lust habe, zu einem völlig veralteten Browser abwärtskompatibel zu sein, nur weil 100 Millionen DAUs denken, daß das Internet von Microsoft kommt und sich seit 2001 nicht weiterentwickelt hat.

...Über diese Diskussion könnte ich glatt meinen alten "Aktion Tötet IE"-Button wieder rauskramen.

Okay, mal angenommen, ich will jetzt wirklich den Browser wechseln:
Welcher wäre deiner Meinung nach der beste?
Ich habe bisher nur IE und irgendsoein Netscape-Teil gehabt und von beiden fand ich den IE besser.

BTW: Den Button kannst du mir trotzdem mal zeigen ^^

Ich bin mit Mozilla (und neuerdings Mozilla Firefox) sehr zufrieden, vor allem die Plugins für den Fox finde ich praktisch. Opera soll auch gut sein, habe ich aber nicht getestet. Hol' dir einfach beide und teste sie ein Bißchen.


Hier ist der Button (oder wird das bei der Größe schon Banner genannt?), der auf hellem Hintergrund besser aussieht als auf dunklem. Ja, es ist ein alphatransparentes PNG. Was sonst?
http://www.rpgmaker.info/temp/ATI.png

Irgendwo gab's auch mal einen Thread dazu.

Ich benutze den normalen Mozilla und hab auch mal Opera ausprobiert, eigentlich ist beides ganz gut, aber an opera hat mich gestört dass es da keine Linksuche per Tastatur gibt (das Feature find ich sehr praktisch bei Mozilla). btw: Den Button pack ich gleich mal in meine sig :D
edit: Ich hab übrigens mal das PNG von Jesus_666 noch auf 2 Farben indiziert und noch das Optimierungsprog mit -o7 drüber laufen lassen (das hat aber ne meldung ausgegeben, dass das Bild schon optimiert ist). Damit konnte ich die Größe noch auf 244 Bytes runterdrücken.

Ich hab mich jetzt mal ein bisschen mit Opera rumgespielt und muss sagen, dass es garnicht so schlecht ist.

Was mich stört, ist das die Daten vom IE nicht übernommen werden:p
Jetzt darf ich mich überall neu anmelden wo ich doch größtenteils die passwörter vergessen habe. :(

Hab per Zufall wie nudel heute auch mal Opera installiert.

Es ist irgendwie gewöhnungsbedürftig und dass es schneller sein soll, davon hab ich nichts mitgekriegt. Eher das Gegenteil! Vielleicht mach ich ja was falsch :rolleyes:

Die Einstellungen machens.
Werkseitig ist Opera auf eher langsame Verbindungen eingerichtet. Versuch mal, in den Einstellungen Netzwerk/Verbindungen->Max. Verbindungen hoschzuschrauben und Fenster und Seiten->Seitenaufbau auf "sofort" zu setzen.

Außerdem ist der größte Vorteil an Opera, dass man ihn beliebig konfigurieren kann. Screenshot Der langgestreckte Button mit dem Pfeil ganz links schaltet die Karteileiste an und aus, in der Symbolleiste kann ich schnell alle wichtigen Funktionen an- und ausschalten (JS etc.) und außerdem noch die aktuelle Seite in verschiedenen Browsern anzeigen. Alles selbst koniguriert:D

DITO @ Nightmare:
Hab auch seit ein paar Tagen mal Mozilla installiert und konnte eigentlich bisher auch keine sooo großen Unterschiede feststellen, was vielleicht mit dran liegt, dass ich einer der dummen "mit IE eigentlich ganz zufrieden"-Menschen bin *g*
Dass er schneller ist, hab ich auch noch nicht gemerkt, grad eben beim Antworten war er sogar viel langsamer als der IE sonst.
Aber ich bin ja offen für Neues *g*

Hab Mozilla eigentlich installiert gehabt, um meine HP endlich mal mit nem anderen Browser zu testen :D
Das einzige, was mir bei meiner HP aufgefallen ist, dass meine schönen, ordentlichen Tabellen, die im IE so dargestellt werden, wie ich sie haben will, etwas anders aussehen (vom Rahmen her) und teilweise leicht oder schwer verschoben sind... Wie kommt denn das? :confused:
Ok, ist O-T, erwarte keine Antwort *g*

Edit: Oh sh... - hab grad festgestellt, dass ich mich total vom Thmema wegverirrt hab! Man möge mir diese OT-Post verzeihen...

Kriegste aber trotzdem:D
Der IE hält sich an alles mögliche, nur eben nicht an Standards, andere Browser viel mehr.
Im Prinzip ist man gezwungen, falsche Seiten zu schreiben, damit sie im IE korrekt dargestellt werden. Diese werden eben in anderen Browsern verkehrt dargestellt.
Es gibt Tonnen von •••••, mit denen man trotzdem erreichen kann, dass auch der IE halbwegs mitspielt (Man nutzt im Prinzip Fehler aus, die andere ausgleichen)

Alternativ kann man sich auch einfach an die Standards halten, dann laufen die Seiten in jedem ernstzunehmenden Browser. Der IE kann standardkonformaes HTML 4.01 normalerweise wunderbar anzeigen und mit ein paar Hacks kriegt man sogar browserübergreifendes CSS2 fast perfekt zum Laufen.


BTW, zum Thema "Grafikformate": Sieht so aus, als ob SVG doch groß rauskommt - auf zukünftigen Handys. Da wächst und gedeiht eine abgespeckte version von SVG wohl ganz prächtig, im Gegensatz zu Flash light...

Sorry aber ich habe einen Fehler gefunden ebi dem Glb Schwazen
bild gewinnt natürlich PNG mit 249bit wer nicht glaubt sihe
diese bild URL

http://dlcc.funpic.de/dadie-fun/

bilddatei

format_grafik_01.png

Öffen

Wie ich das geschaft habe ?

Naja beim .gif hast du 2 farben gemacht meim
PNG 32mill

Kein wunder das die so fett war.

Sorry, dadie, das hatten wir schon:

Zitat:

---

Original geschrieben von Geiu
edit: Ich hab übrigens mal das PNG von Jesus_666 noch auf 2 Farben indiziert und noch das Optimierungsprog mit -o7 drüber laufen lassen (das hat aber ne meldung ausgegeben, dass das Bild schon optimiert ist). Damit konnte ich die Größe noch auf 244 Bytes runterdrücken.

---

BTW, deine Datei ist 249 Byte groß, nicht 249 Bit. Deine Angabe war um den Faktor 8 falsch...

1,sorry
2,das könnte aber mal in den Oberthread reingeschreiben werden.
3,Nochmal sorry
4,Aber meine datei lag nach an dem angegebenen wert XD
5,Sorry
6,sry
7,Tuht mir leid
8,http://www.multimediaxis.de/images/s.../old/sm_12.gif Danke für die aufklärung
9,sorry
10,Boa habe nun *zähl* 6 mal sorry gesagt mir muss man doch verzeien oder ?

Zitat:

---

Boa habe nun *zähl* 6 mal sorry gesagt mir muss man doch verzeien oder ?

---

Hm, ich überlege, ob ich dir 2. übel nehmen soll, da ich keine 86400 Sekunden am Tag online sein kann und außer mir nur ein Admin/Mod den Thread editieren kann.^^
Keine Sorge, ich lese mir jeden Thread durch, wenn ich dabei auf etwas stoße, das ich für nützlich halte werde ich es sofort meiner Liste hinzufügen.
Momentan denke ich jedoch, dass der Thread etwas erweitert werden sollte und den Unterschieden, die durch Bildoptimierung vorgenommen wurden angepasst wird.

OptiPNG habe ich in meinem Thread übrigens auch verlinkt, man trifft auf viel nützliches, wenn man 'alte' Threads durchwühlt.

Hallo!

Also, als ich hier gelesen habe, dass gif, Transparenz zulässt habe ich sofort auf meiner Homepage ein Bild genommen, wo mich das
sowieso stört (also die nicht-transparenz) habe es bei PSP berabeitet, habe auch transparent angegeben...
Aber als ich es dann auf Gif umgestellt habe, war das TRansparente auf einmal weiß =|.
http://www.rdn-online.com/images/Linkbox3.png
Hier das ist das Bild.
Ich bitte um Hilfe.
Edit: Achja, die ecken und unten das was übersteht sollte durchsichtig sein

Wie wärs mit dem Bild?
http://www.wrtlprnft.de/Linkbox3.png
7,1KB, ist allerdings nicht großartig optimiert.