Zum 'allerletztenmal' Optimierung des GFX-Pack (die 9.)

[Gast]

(Besserseher und Besserschreiber bitte einfach mal wegsehen)

Da ich seit mehr als 27 Jahren Erfahrung im Bereich der Verarbeitung und
Entwicklung von digitale Bildformaten habe, kann ich aus dieser Erfahrung
heraus einige Grenzwerte der Verwendeten Formate GIF und JPEG nennen,
die ganz einfach, ohne Aenderung des bisherigen Workflows, den Rendering-
Process, (im Browser), um 50 Prozent 'schneller' machen wuerden:


1. Transparente GIF-Bilder oder einfache, Lineare Farbverlaeufe, als
GIF-Format, sind sowohl von der Dateigroesse her, wie auch von der
Rechenzeit her, bei der Darstellung (von Seiten der Rendering-Engine im Browser)
schlechter geeignet, als das PNG-Format, daher sollte GIF generell nicht ver-
wendet werden, sofern es moeglich ist bzw. es sich nicht um (Index-Color)
'Animationen' handelt. Zudem sollte bei der Bildbreit auf die Teilbarkeit durch
8 oder 16 Pixel geachtet werden, da alle Graphikkarten optimierte Routinen
fuer solche Bildgroesseen bereithalten.


2. Bei dem derzeit verwendeten, graphischen (Index-Color) Stil, ist das PNG-Format besser
geeignet als das JPEG-Formate, da keine Realfotos verwendet werden, sondern
ausschliesslich kuenstlich generierte Graphik (3D generatet, Index-Color). Kurz, die
Grenzbereich zwischen den Farben/Pixeln sind homogen und nicht, wie bei Fotos,
'verrauscht', insofern bringt hier die JPEG-Optimierung genau das Gegenteil zum Vorschein:
schlechte, visuelle Qualitaet und grosses Datenvolumen.
Wenn man aber auf JPEG, zB aus produktionstechn. Gruenden, nicht verzichtet will,
sollte bekannt sein, dass das 'durchschnittliche Auge' nur 3 Qualitaetsspruenge beim
JPEG-Format wahrnehmen kann;:37 Prozent, 72 Prozent und 92 Prozent JPEG-Qualitaet.
>= 37% bedeutet: minimale Qualitaet bzw. klare Artefaktbildung noch erkennbar
>=72% bedeutet: mittlere Qualitaet , d.h. rauschen am Rand von Komplementaerfarben sichtbar
>=92% bedeutet : max. sichtbare Qualitaet, d.h. hoehere Werte werden vom Auge nicht mehr als
Qualitaetssteigerung wahrgenommen. Rauschen ist kaum sichtbar.

3. Um JPEGs nicht ohne Grund, 'vom Datenvolumen her' ,extra-gross werden zu lassen, sollten
Text+Bild nicht in einer Bilddatei kombiniert werden, da der Versuch, die schrift noch lesbar
zu halten, ducrh erhoehung der JPEG-Quealitaet zwischen 72 und 92 Prozent, keine Qualitaets-
verbessrung auf den Rest der Graphik hat, sondern nur zu mind. 40 Prozent mehr Datenvolumen
fuehrt. Die Loesung ist, soweit vom HTML-Layout moeglich, Hintergrundgrafiken als JPG und
transparente Vordergrundgraphiken (Gif oder PNG), welche das Schriftbild enthalten, zu verwenden.
So reduziert sich das Datenvolumen um 40-60 Prozent.

4. Umwandlungen von JPEG nach GIF oder PNG-IndexColor erzeugen zu grosse Dateigroessen.
Besser ist daher immer die Umwandlung vom (RGB-)Original (BMP,TIF,PNG,PSD als 24Bit), um
die Index-Color Tabelle so klein wie moeglich zu halten.

5. User, per Profileinstellung, die Moeglichkeit geben, zwischen High- und
Low-Quality Images waehlen zu koennen. Gleiches sollte fuer GIF gelten,
wo z.T. 128 oder mehr Farben im Index verwendet werden, obwohl 64
ausreichen wuerden. Das wirkt sich insbesondere bei den Animation
katastrophal aus, wenn die Rendering-Engine des Browsers, beim Ab-
spielen bzw. Cachen der Frames, die CPU mit 80-90 Prozent belasten.

6. Generell waere eine bessere Erklaerung im FAQ oder Wiki angebracht, um zu
erklaeren, welchen Sinn die GFX-Pack Option bei den unterschiedlichen Browsern machen.

7. Oft beschworen und auch einfach in der Umsetzung: Select-Box Option Einfuehren, die Animations-
grafiken abzuschalten, d.h. ein GFX-Pack ohne Gif-Animationen. Oder eine einfach visuelle Erklaerung,
wie bei den jew. Browser die ausfuehrung von Gif-Animationen generll abgeschaltet werden kann.

Da ich das Spiel wirklich amuesant finde, war es mir auch wichtig, dieses einmal losswerden zu koennen.
Daher weiterhin noch viel Erfolg mit allem.

Gruss,
Rubennase

[Gast]

Hm liest sich ein bisschen wie aus dem Internet gezogen, wobei ich dir jetzt nichts an deiner Erfahrung unterstellen will, aber ich denke mal eher Sonne, dass dieses Thema eher bei den Programmierern interessant wäre oder?

[Gast]

Zumindest das was ich verstehe hört sich schlüssig an.
Mit dem neuen Rechner hier ist alles easy, mit dem alten Knecht war ich kurz davor,
aufzuhören.

[Gast]

Hm liest sich ein bisschen wie aus dem Internet gezogen, wobei ich dir jetzt nichts an deiner Erfahrung unterstellen will, aber ich denke mal eher Sonne, dass dieses Thema eher bei den Programmierern interessant wäre oder?

Nein, aber ich kann es ja mal in's Wiki der Developer einstellen ... (ob ein Text aus dem Netz genommen wurde laesst sich ueber jede Suchmaschine ermitteln. Einfach einen laengeren Textabschnitt des 'verdaechtigen' Textes in Anfuehrungszeichen setzen und als Suchtext abschicken) ... und natuerlich gilt das oben Gesagte nicht nur fuer Programmierer. Wer zB, als beruechtigter Home/Hobby-User, ein wenig Bildbearbeitung macht, d.h. roten Augen wegmachen, seine oder die Pickel seiner Freunde glaetten - oder die Ulaubsfotos verwalten, der wird diese Erfahrungen indirekt auch schon gemacht haben.

Die Mozille Rendering-Engine 'Gecko' ist an dem Performance-Loch natuerlich nicht ganz Unschuldig. Ein schoenes Beispiel ist das Sat-Wetterbild vom Deutschen Wetterdienst:
xxxxxxxxxxxxx
Mal abgesehen davon, dass es auch hier keinen Sinn macht, von Seiten der Qualitaet und dem Datenvolumen her, die Wolken-Kloetzchen direkt mit der Karte zu kombinieren, (noch dazu ohne Transparenz, um jedweden Orientierungsversuch zu unterbinden), wird alles, huebsch haesslich, als JPEG abgespeichert. Die Gecko-Engine hat somit, aufgrund der einfarbigen Flaechen, ordentlich was zu tun, da der JPEG-Decoder das Bild nicht einfach Zeilenweise entpackt, sondern immer in Quadranten. Bei GIF oder PNG waere das Bild weitaus schneller aufgebaut, da dort eine rein zeilenweise orientiert (RunLength-)Kodierung verwendet wird.

Ein weiterer, kleiner aber relativ haeufige Fehler ist es, den Bildangaben in HTML immer eine width=".." und height=".." Angabe mitzugeben, die ebenso haeufig um 1 Pixel zu gering oder zu hoch ist. Die Tagesschauseite macht davon haeufig gebrauch, was zum einen zu Darstellungsfehlern fuehrt, zum anderen hat auch hier der Browser ordentlich was zu tun, denn schon startet die interne Bild-Skalierungsfunktion des Browser, um das Bild auf die eingetragene Groesse zu ziehen. Da wird also, nur weil einer nicht Zaehlen kann, Speicher ohne Ende belegt, um ein Bild um 1 Pixel in Hoehe und Breite zu 'vergroessern'.

Aber so ist das eben heute, wo die ganzen Ready-Made und Wizard-Funktion, wie auch die Developer-Kit's den Resten der eigenen Denkfaehigkeit den Rest geben.

Es ist generell schade, das guten Web-Spiele oft am Mangel an elementaren Grundwissen scheitern und das Verstehen von Datenformaten und deren sinnvolle Verwendung ist so ein Punkt. Leider wird heut aber auch nicht mehr von dieser Ebene aus gelernt, denn dann muesste man in der Uni und an der Schule mit Assembler, auf einer 8-Bit Maschine, anfangen und mit Javascript, Python, PHP, und Perl, auf einem Linux-Server, aufhoeren. Doch wer kann das denn alles 'ertragen', es funktioniert doch auch so, halbwegs, mit einigen Macken, etwas wackelig und mancham schmiert halt der Browser ab. Doch wen juckt das schon ?

; )

[Gast]

Dein Text ist zwar viel zu lang und ich habe ihn nicht gelesen.

Aber alles was das Spiel ein wenig schneller machen würde kann ich nur empfehlen!

[Gast]

Dein Text ist zwar viel zu lang ...

( : Ich weiss - manchmal geht es einfach mit mir durch - kommt sicher nochmal vor (( :

[Gast]

kommt sicher nochmal vor (( :