Nach dem erfolgreichen Launch der Konfigurator-App für den schweizweit führenden Baustoffhersteller Saint Gobain Weber im Sommer, hat die De-Media nun ein großes Update veröffentlicht.
Im Juni 2015 wurde der Fassadenkonfigurator in den Appstore aufgenommen. Seitdem steht für alle interessierten Kunden eine Möglichkeit zur Verfügung, sich einen visuellen Eindruck von der ganz individuellen Fassadengestaltung zu machen. Mit dem neuen Update auf die Version 1.1 wurde das Hauptaugenmerk nun auf die Optimierung der hochauflösenden Bilder gelegt. Zusätzlich wurden in die App direkte Kontaktmöglichkeiten integriert.
App-Daten um über 60% reduziert
[sciba leftsrc=“http://blog.de-media.de/wp-content/uploads/2015/12/orig-vers.jpg“ leftlabel=“Original“ rightsrc=“http://blog.de-media.de/wp-content/uploads/2015/12/pngquant-vers.jpg“ rightlabel=“Komprimiert“ mode=“horizontal“ width=““]
Aufgrund der Komplexität der 360Grad-Ansicht und der Konfigurationsvielfalt jedes der einzelnen Häuser betrug die Größe der ca. 6000 einzelnen .png-Bilder insgesamt mehr als 3 gb – eine Datenmenge für die manche Nutzer nicht bereit sind, den limitierten Speicher des iPads aufzuopfern. Eine User-Experience Frage, die für uns unumgänglich war!
Als wesentlich nützlich erwies sich bei der Lösung des Problems die Kommandozeilen-Anwendung pngquant. Der Website zufolge spart man mit dem Programm bis zu 70% an Dateigröße, wobei die Qualität der Bilder erhalten bleiben soll.
Es blieb nur noch die Frage offen, wie man über 6000 Bilder so schnell wie möglich durch diesen Prozess bringen kann. Da pngquant von Haus aus eine command-line utility ist, kann man diese perfekt in eine Stapelverarbeitung integrieren und so sieht die dafür vorgefertigte Befehlszeile aus:
find . -name '*.png' -exec pngquant --ext .png --force 256 {} \;
Zuerst werden alle .png-Dateien gesucht:
find . -name '*.png'
Anschließend wird die eigentliche Hauptaufgabe ausgeführt:
-exec pngquant --ext .png --force 256 {} \;
Mit –ext .png –force werden die bestehenden Dateien überschrieben (Backups wurden reichlich vor dem Prozess erstellt 😉 ). Zuletzt und nicht ganz unwichtig: Anstatt 24-bit, werden 256 Farben-PNGs erstellt, was eine niedrigere Farbtiefe ausmacht. Das Resultat waren leicht entsättigte Farben, die mit einem kleinen Trick wieder behoben wurden.
CSS3 Filter als Kompensator für entsättigte Bilder
Nach dem Durchlauf der Stapelverarbeitung konnten wir die Datenmenge auf 1,2gb reduzieren, was sich als sehr zufriedenstellend darstellte. Dennoch litten einige Farben unter der Ersparnis der Farbtiefe, wie man beim Vergleichsbild weiter oben (bei genauerer Betrachtung) erkennt. Nach dem Testen von unterschiedlichen Farbflächen auf den Fassaden, erwies sich der Sättigungsfilter als nützlich. Jeder weitere Filter verfälschte die Farben im Durchschnitt zu stark.
-webkit-filter: saturate(120%)
[sciba leftsrc=“http://blog.de-media.de/wp-content/uploads/2015/12/zoom-orig.jpg“ leftlabel=“Original“ rightsrc=“http://blog.de-media.de/wp-content/uploads/2015/12/zoom-cssfilter.jpg“ rightlabel=“CSS Filter“ mode=“horizontal“ width=““]
Bei ganz genauem Vergleich der gefilterten Version mit der originalen sieht man, dass eine 100% Farbechtheit nicht möglich ist. Aber wir sind ganz nah dran gekommen.
Abschlussgedanken
Es war eine spannende Aufgabe, derart viele Bilder in ihrer Datengröße so klein wie möglich zu bekommen und dennoch die Qualität aufrecht zu erhalten.
Letzten Endes wurde durch die Einsparung der Farbtiefe ein unerwünschter Effekt in der Sättigung vor allem bei intensiveren Farben erzeugt. Doch dank CSS3 Filter und 20% mehr Sättigung konnte dieses Manko nahezu komplett ausgemerzt werden.
Nach der Fertigstellung waren wir zufrieden und der Kunde glücklich!
Sie können Sich einen eigenen Eindruck von der aktualisierten App machen, in dem Sie auf den folgenden Button klicken – Viel Spaß!
https://itunes.apple.com/de/app/apple-store/id1006572688?pt=344872&ct=DM-Blog&mt=8