PNGs und JPGs sind zwei beliebte Bildformate im Internet - das eine kann Transparenz, das andere komprimiert Bilder gut. Das Problem ist, man kann es nicht kombinieren.

So die Theorie, und eigentlich stimmt es auch. Aber was macht man, wenn man wie im ECCO-Projekt schöne große freigestellte Zoom-Bilder auf elegante Bühnen stellen will? 4MB oder gar 12MB dem Nutzer zumuten? Wohl kaum.

Eine Lösung musste her, der Screen sah einfach zu gut aus, als dass er an der Technik scheitern durfte. Und wir fanden eine Lösung: Wir schnitten den inneren Teil aus jedem Schuh und zerteilten ihn in Rechtecke, die komplett opaque waren und sich damit als JPG gut komprimieren ließen. Der Rest, die halbtransparente Hülle, blieb in einem PNG, das nun nicht mehr viel Bildmaterial enthält und dadurch ebenfalls klein ist.

Das klingt total wild, reduziert aber den Platzbedarf tatsächlich um mehr als zwei Drittel, z.B. von 970KB auf 250KB. Bei größeren Bildern sogar im Verhältnis noch besser. Es lohnt sich.

Und so läuft das Verfahren im Detail, und zwar komplett automatisiert:

Zuerst wird das Ausgangsbild auf die vorgegebenen Minimal- und Maximalgröße für Zooms heruntergerechnet. Dies geschieht mithilfe der Thumbnail-Factory des Commerce-Frameworks, die mit nur wenigen Zeilen Code komprimieren, herunterskalieren, croppen, auf Hintergründe stellen und das Format wechseln kann.

Nun wird das Zoombild in Kacheln zerteilt und auf Transparenz untersucht. Kacheln, die ausschließlich aus vollständig opaquen Pixeln bestehen, können in das JPG verschoben werden. Damit die Anzahl der späteren Requests reduziert wird, werden dabei nicht mehrere JPGs erzeugt, sondern nur eins mit denselben Maßen wie das Zoom-PNG.

Hier das Ergebnis nach dem Kacheln und Verschieben:

Als weiterer Analyseschritt werden zusammenhängende Kacheln gesucht und Rechtecke gebildet. Für jedes dieser Rechtecke wird ein absolut positioniertes DIV mit dem JPG im Hintergrund erzeugt. Das JPG stellt dabei ein Sprite dar, jedes DIV zeigt einen Ausschnitt. Ach ja, und das PNG natürlich noch dazu, und schon wird ein Schuh draus.

Die Lösung existiert als wiederverwendbarer Java-Code unter Verwendung von JAI, das Verfahren ist aber technologieunabhängig, es gibt also keine Ausreden mehr für große, transparente Bilder.