Pixelboxx hat diese Woche die neue Webseite von Intermedia Fotoficient ins Netz gestellt. In Kürze werden auch die deutschen Seiten online gestellt, bisher gibt es (wie auch auf der alten Homepage) nur englische Texte. Die Webseite glänzt durch das helle und freundliche Design, durch welches die einzelnen Themenbereiche sehr übersichtlich präsentiert werden.
Mit Intermedia Fotoficient bietet Pixelboxx eine extrem schnelle Möglichkeit, Bilder schnell an Webapplikationen auszuliefern. Dabei spielt es keine Rolle, ob es sich um eine normale Webseite oder einen Webshop handelt. Dieser Beitrag soll zeigen, wie der Intermedia Fotoficient Server Bilder im (mit Caching auch einstelligen) Millisekundenbereich ausliefert und wie Webseiten davon profitieren können.
Dynamisch erstellte Bilder werden aktuell im Internet nicht überwiegend genutzt. Das Problem liegt an der Performance, einzelne Bilder “on the fly” zu berechnen und in einem passenden Zeitrahmen auszuliefern. In den meisten Fällen werden (z.B. in CMS Systemen) Bilder in diversen Auflösungen einfach vorberechnet und in allen evtl. benötigten Formaten auf den Server gelegt.
Unsere kleine aber rasannte Reise in die Welt der dynamisch erstellten Internetbilder erfolgt in vier Schritten:
1. Schnelle Pixel-Transformation
Schnelle dynamische Bilder benötigen schnelle Pixel-Transformationen – das ist offensichtlich. Aber was macht diese Pixel-Transformationen schnell?
Die Intermedia Fotoficient Transformations-Engine ist flink wie ein Wiesel
Als die Transformations-Engine konzipiert wurde, lag die Priorität der Entwicklung auf der Geschwindigkeit. Intermedia liefert ein Bild schneller aus, als der Apache Webserver eine statische Datei ausliefern kann. Aber was sind die Geheimnisse dieser Architektur?
Weniger ist mehr
Intermedia verwendet einen sehr effizienten internen Speicher und Caching Mechanismus. Wir speichern nicht nur die generierten Ergebnisse, sondern auch Zwischenschritte, die auf Bildfragmenten beruhen. Dies sind gute Ausgangspositionen, sollte eine leicht abgewandelte Version eines Bildes benötigt werden. Keine Operation mit einem Bild ist isoliert von einer anderen im Intermedia Framework.
Der Client ma(h)lt zuerst
Im Gegensatz zu diversen anderen Bildtransformations-Frameworks, übergibt Intermedia zuerst die Daten (per Filestream) an den Client (jpeg, gif, png, xml oder json), bevor es die Daten in den Cache schreibt. Auf diese Weise muss der Client nicht darauf warten, dass Intermedai die Daten in den Speicher geschrieben hat. Die meisten anderen Frameworks prodizieren zuerst die lokale Datei mit den Transformationen und liefern erst im Anschluss den Inhalt aus. Sich auf den lokalen Chache zu verlassen ist ein Fehler, weil andere Prozesse auf dem Server diesen ausbremsen können. Intermedia hat interne, speicherbasierte PixelProcessoren, die keinerlei Dateien für die Transformationen benötigen.
Pixel wiederverwerten
Speicher und Cache verwalten nicht nur die fertigen Bilder, sondern auch die Zwischenschritte. Durch eine Prüfung, welcher Teil der Transformation wieder benötigt wird, verwenden wir die Pixel erneut für grundliegende Transformationen.
2. Effiziente Kommunikation
Weil das HTTP Protokoll sehr gesprächig ist, zählt jedes Byte. Vergessen Sie nicht, dass Requests ein Teil des Auslieferungsprozesses sind. Je kleiner der Request, umso schnelle die Auslieferung.
Eine magische Wand heißt MTU (maximum transfer unit) des TCP Protokolls. Bei Ethernet/DSL basierten Medien hat die MTU eine Größe von 1400 Bytes. Ist ein HTTP Request größer als 1400 Bytes, muss TCP den Request in mehrere Packete aufteilen. Das hört sich erst einmal nicht schlimm an, verlangsamt allerdings den Prozess.
Ein einfacher Request für ein Bild muss nicht größer als 1400 Bytes sein. Dieser besteht aus ein paar Headern:
Weitere sind nützlich für den Bild Request:
Folgende Header sind für den Bild Request nutzlos, werden aber trotzdem übertragen:
Einer der größten Header ist der Cookie. Wenn die eigene Applikation keine Informationen aus dem Cookie benötigt, setzt man einfach den Bildserver in eine andere Domain, um den Cookie zu umgehen.
Hinweis:
Jeder dieser Header wird bei jedem einzelnen Request verwendet und belegt diverse Bytes. Intermedia reduziert die Header bei der Antwort auf diese Requests auf ein Minimum.
Beispiel, bei dem nur der Server optional ist:
HTTP/1.1 200 OK Server: Intermedia Fotoficient Date: Tue, 28 Dec 2010 20:55:24 GMT Expires: Tue, 28 Dec 2010 21:55:24 GMT Cache-Control: max-age=3600, public, must-revalidate Content-Type: image/png ETag: "f2ebe9b7332cc739fdf103609872685b" Content-Length: 9802
3. Auf ein Minimum redizierte Dateigröße
Ein Bild besteht nicht nur aus Pixeln. Alle Bildformate unterstützen Header bzw. Metadaten. Das JPEG Dateiformat ist das Format mit dem höchsten Verbrauch an unnötigen Daten. JPEG, PNG und GIF Dateien haben einen Header, welcher für Textinformationen bzw. Kommentare reserviert ist. Intermedia übernimmt die Kontrolle über dieses Feld und setzt die Informationen über die Quelle so kurz wie möglich. Bei JPEG Dateien gibt es noch andere Informationen, die möglicherweise eingebunden sind: IPTC, EXIF, XMP und ICC/colormanagement. Diese verbrauchen evtl. einige Kilobyte an Speicher. Speziell der XMP Teil wird mit Daten regelrecht zugepflastert (machmal mit bis zu 32 Kilobyte). Wenn man sich eine Thumbnail-Bildvorschau eines Produktbilder in einem Webshop anschaut, hat dies in einigen Fällen nur 2 Kilobyte an Bilddaten, aber 32 Kilobyte an Metadaten. Intermedia generiert Bilddaten, die nur die nötigen Pixelinformationen inkl. des oben genannten Inhalts. Das Orginalbild inkl. aller Metadaten bleibt natürlich unangetastet.
4. Effektive Seitenberechnung
Um Bilder im Internet darzustellen benötigt man Webseiten, die diese Bilder referenzieren. Wie kann Intermedia dabei helfen, diesen Mechanismus effizienter zu nutzen? Intermedia verwendet kurze URLs, die leicht gecached werden können. Es wird immer eine kurze ID (shortkey id) für ein Bild verwendet, um keinen einzigen Buchstaben in der URL zu verschwenden. Sämtliche URLs sind kurz aber dennoch lesbar.
Mit dem Bootloader kann man Ansammlungen von Bildern in RIA-Widgets verwenden und auf diese Weise eine große Anzahl von Bildern in einem einzigen Request zu verarbeiten (Voraussetzung hierfür ist ein moderner Browser). Wenn diese Technik richtig eingesetzt wird, kann man den Seitenaufbau um Faktor 2 beschleunigen.
Das erste Release von Intermedia Fotoficient im noch jungen Jahr 2011 ist online. Diverse Neuerungen sind in das Release eingeflossen. Hier eine kleine Übersicht über alle Änderungen:
Neue Features
Änderungen
Eigehen möchte ich an dieser Stelle hauptsächlich auf die neue SliderGallery, die mittlerweile mein absoluter Favorit ist. Diese Galerie holt sich vom Intermedia Fotoficient Server die Bilder mit einer einzigen Connection (JSONP), wodurch sich sämtliche Bilder im Speicher befinden, sobald die Galerie vollständig geladen wurde. Dies hat zur Folge, dass man ruckelfreie Animationen erstellen kann, ohne ein Nachladen zu erzwingen. Außerdem sind damit Animationen ganz ohne Flash-Plugin möglich. Die Konfigurationsmöglichkeiten reichen von der Anzeige des Sliders bzw. des AnimationsButtons bis hin zum Autostart der Animation oder zum Einstellen des Animationsintervals.
An dieser Stelle möchte ich auf die Demoseite von Intermedia Fotoficient und auch auf meinen älteren Blogeintrag über die SliderGallery verweisen:
Mit der neuen sliderGallery von Intermedia Fotoficient lassen sich sehr ansehnliche 360 Grad Produktbilder erstellen. Im Prinzip werden die Grafiken – wie auch die Bilder der anderen Galerien – aus einem Verzeichnis der Datenquelle gelesen. Auf mobilen Geräten mit Touchgesten funktioniert auch das drüberstreifen mit den Fingern. Die insgesamt 40 Demobilder wurden uns freundlicherweise von Packshot Creator zur Verfügung gestellt.
Die Manipulation einen Bildes mit einfachen Parametern in der URL war schon immer ein Traum vieler Templateentwickler diverser CMS-Hersteller. Man musste immer, wenn man eine neue Auflösung benötigte, einen Entwickler mit entsprechenden Berechtigungen darum bitten, einem diese neue Auflösung anzulegen. Vor allem dann, wenn Bilder in Stagingsystemen extra vorgeneriert werden müssen. Aus diesem Grunde möchte ich hier ein kleines aber feines Beispiel mit einem Bild von der Intermedia Webseite zeigen.
Die Beispielgrafik
Zuerst benötigen wir einen Intermedia Fotoficient Server, dessen Demoversion wir entweder beim Hersteller herunterladen und installieren, oder wir verwenden ein Beispielbild vom der Herstellerseite. Hier der Link zum Bild (URL-Umbruch beachten):
http://intermedia.pixelboxx.com/demo/img /YKlH_MoHbIJA_FhQmevVJfOHbIrG_ERtYSxum2o2/f,p/bildname
Aufbau der URL im Überblick
Direkt nach dem Server folgen – mit / getrennt – die einzelnen URL-Parameter. Hier der Überblick über die Parameter:
Hinzufügen der Parameter zur Manipulation des Bildes
Die einzelnen Parameter werden in der URL nach der ID des Bildes angegeben. Jeder Bearbeitungsschritt wird ebenfalls mit einem / abgetrennt und kann in beliebiger Reihenfolge kombiniert werden.
Hier ein Beispiel für ein rotiertes und im Anschluss skaliertes Bild (URL-Umbruch beachten)
http://intermedia.pixelboxx.com/demo/img /YKlH_MoHbIJA_FhQmevVJfOHbIrG_ERtYSxum2o2/r,a,45/s,x,300,y,300/f,p/bildname
Liste mit Beispielparametern
Skalieren auf 100 x 100 (Bild wird in das Quadrat eingepasst)
/s,x,100,y,100/
Rotieren
/r,a,45/
Spiegeln (vertikal)
/m,d,v/
Gammacorrection
/g,a,1.5/
Helligkeit
/b,a,50/
Bild in eine Box einfügen
/bo,w,100,h,100,b,00f,p,cc/
Wasserzeichen (“b85D_Il3N0vgJSO1N0RGJFhEa2ou5d” ist die ID des Wasserzeichens)
/o,i,b85D_Il3N0vgJSO1N0RGJFhEa2ou5d,p,tl,o,50/
Text
/t,t,Test,c,f00,p,tl,ox,400,oy,200,fs,250,r,35,s,fff/
Bildbereich ausschneiden
/c,x,347,y,219,w,220,h,307/
Bildbereich nach vordefiniertem Pfad ausschneiden
/cl,b,00f/
Perspektivische Verzerrung
/p,a,25/
Ecken abrunden
/rc,w,100,h,100/cl/
Viel Spaß beim Ausprobieren der einzelnen Parameter.
Zu Demonstrationszwecken habe ich in der letzten Woche die Bildbearbeitung von Intermedia Fotoficient in ein extJS Beispiel integriert. Das Beispiel der extJS Version 3.3.1 war die Web Desktop Demo, die dem Standardpacket des Downloads beiliegt. Die Herausforderung war, die Bildbearbeitung auch über den Intermedia Bootloader – welcher die Bildergalerien von Intermedia Fotoficient dynamisch in andere Seiten einbettet – in ein extJS Fenster einzubinden.
Teil 1: Die Hovergallery
Ob es überhaupt möglich ist, die beiden JavaScriptFrameworks jQuery und extJS zu verheiraten, habe ich mit der Hovergallery ausprobiert. Ohne einen erfolgreiche Einbindung einer Bildergalerie, hätte ich den Umbau des Frameworks der Bildbearbeitung nicht vorgenommen.
Datei: desktop.html
Um nicht den Aufbau eines der Windows inspirierten Fenster unter extJS zu stören und keine gravierenden Änderungen in deren Handler machen zu müssen, habe ich mich für den Proof-Of-Concept dazu entschieden, die Galerie einfach in die desktop.html einzubinden. Dies geschieht genauso, wie man es auch auf den Beispielseiten von Intermedia kennt. Allerdings habe ich dem umschließenden DIV noch eine ID und einen style mitgegeben, damit die Galerie nicht sofort zu sehen ist:
<div id="im_hg" style="width:100%;display:none;"> <script type="text/javascript" src="http://localhost:8080/examples/boot/streetwear%2F/hovergallery"></script> </div>
Datei: sample.js
Oben in der Beispieldatei von extJS definiert man einfach eine Variable, in welcher man die Galerie beim ersten Aufruf zwischenspeichert:
var obj_im_hg;
Wichtig ist jetzt der Handler des Fensters, in welches man die Galerie einhängen will. Dazu habe ich das GridWindow verwendet und diversen Code aus dem ursprünglichen Beispiel entfernt (vor allem das Grid aus dem items Objekt). Als nächstes habe ich den Titel geändert und dem HTML ein DIV hinzugefügt, in das ich die HoverGallery einsetzte. Folgender Handler blieb übrig:
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Intermedia HoverGallery',
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
html : '<div id="hg_con"></div>',
items: new Ext.Container({
autoEl: 'div',
render : function(){
if(!obj_im_hg)
{
obj_im_hg = document.getElementById('im_hg')
}
document.getElementById('hg_con').appendChild(obj_im_hg);
obj_im_hg.style.display = 'block';
}
})
});
}
win.show();
}
Innerhalb der Items Auflistung habe ich einen einfachen extJS Container erstellt und in das Render-Event eine Funktion gehängt. In genau dieser prüfe ich die ursprüngliche Variable. Ist sie nicht gesetzt, setze ich sie auf das Galerie-DIV. Als nächstes muss man nurnoch die Galerie in das unter html definierte DIV hängen und die Galerie sichtbar machen.
Durch die neue Version des Intermedia Bootloaders bekommt die HoverGallery auch mit, wenn das Fenster in der Größe verändert wird. Dadurch passt sich die Galerie in den Ausmaßen jedesmal neu an.
Teil 2: Die Bildbearbeitung
Neben den etwas aufwändigeren Umbau des Frameworks, den ich hier leider nicht im Detail durchgehen kann, sind die Anpassungen nach diesem Proof-Of-Concept im extJS minimal anders. Der einzig nennenswerte Unterschied besteht in der Styleangabe, in welcher zusätzlich noch die Höhe des Containers und die Hintergrundfarbe angegeben wird:
Datei: desktop.html
<div id="imgpro_con" style="width:100%;height:100%;background:#fff none; display:none;"> <script type="text/javascript" src="http://localhost:8080/imgpro3/boot/YKlH_MoHbIJA_FhQmevVJfOHbIrG_ERtYSxum2o2/imgpro/0" ></script> </div>
Datei: sample.js
Jetzt fügt man der Deklaration am Anfang der Datei noch eine weitere Variable hinzu:
var obj_im_hg, obj_imgpro_con;
Das AccordionWindow, welches als Demonstration für die Bildbearbeitung herhalten musste, hat jetzt folgenden Handler:
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('acc-win');
if(!win){
win = desktop.createWindow({
id: 'acc-win',
title:'Intermedia Bildbearbeitung',
width:900,
height:600,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
html : '<div id="im_con"></div>',
items: new Ext.Container({
autoEl: 'div',
render : function(){
if(!obj_imgpro_con)
{
obj_imgpro_con = document.getElementById('imgpro_con');
}
document.getElementById('im_con').appendChild(obj_imgpro_con);
obj_imgpro_con.style.display = 'block';
}
})
});
}
win.show();
}
Hier bestehen nur Unterschiede in der Betitelung, der Fenstermaße und der ID des DIV-Containers.
Fazit
Die jQuery-Beispiele lassen sich – vor allem unter Verwendung von “jQuery.noConflict();” relativ leicht in andere JavaScript-Frameworks integrieren. Ich würde mich sehr freuen, wenn jemand die Intermedia Galerien auch noch in andere Frameworks einbauen würde. Die nötigen Beispiellinks findet man auf der Webseite von Intermedia Fotoficient.
In neue Version der Bildbearbeitung sind diverse Verbesserungen und auch neue Features eingeflossen. In diesem Posting möchte ich kurz diese Änderungen im Vergleich zu der ersten Version auflisten:
Alpha2Image
Eine grundliegende Neuerung ist die Verwendung der Alpha2Image-Funktion von Intermedia. Diese erlaubt es, den transparenten Hintergrund mit einer Graphik (z.B. einem Schachbrettmuster) zu belegen. Dadurch konnte der Aufbau der “Stage”, auf der man das Bild bearbeitet, vereinfacht und beschleunigt werden.
Parameterreihenfolge
Die Reihenfolge der Boxen hat jetzt direkte Auswirkung auf das Ergebnis. Platziert man z.B. die Box mit dem ausgewählten Graustufenkanal hinter die Box mit dem farbigen Text, wird der Text auch in Graustufen dargestellt, weil die Graustufenoperation erst nach dem Hinzufügen des Textes auf das Bild angewandt wird. An jeder Box, die eine Auswirkung auf die Parameter hat, steht eine Zahl, die die Nummer des angewendeten Parameters anzeigt. Wird die Box vertauscht, ändert sich auch die Nummer. Zusätzlich zum Drag&Drop kann man jetzt auch die Pfeile verwenden, um die Boxen zu vertauschen. Die ist vor allem für die Verwendung der Bildbearbeitung auf mobilen Geräten notwendig.
Änderungen innerhalb der Boxen
Color
In der Farbbox gibt es zu den Werten von Helligkeit und Kontrast eine Auswahl für die Normalisierung. Außerdem kann man neben den Graustufen auch die einzelnen Farbkanäle selektieren.
Watermark
Die Wasserzeichen lassen sich jetzt über einen Dialog auswählen.
Text
Die Schriftarten lassen sich jetzt über einen Dialog auswählen.
Download
In der Downloadbox gibt es zusätzlich eine Auswahl, um sich die Graphik in einer bestimmten Größe skalieren zu lassen. Bitte beachten Sie hierbei, dass die Graphik bei falschem Format nicht proportional verändert wird.
Parameter
Über diese Box kann man jetzt auch die einzelnen Parameter selbst setzen. Dadurch kann man sehr einfach einen Parametersatz kopieren und z.B. auf ein anderes Bild anwenden. Die Reihenfolge der Boxen wird evtl. verändert.
Im neuen Release (Version 1.2.78252) von Intermedia Fotoficient ist jetzt auch ein FileUploader enthalten. Dieses Tool ist leider nicht auf der Intermedia Webseite als Demo enthalten, was aber – aufgrund der Sicherheitsrisiken – durchaus Sinn macht. Würde man den FileUploader ohne eine entsprechende Passwortabfrage zu Demonstrationszwecken auf eine Seite stellen, wäre das eine Einladung für diverse Denial-of-Service Attacken.
Drag&Drop Feature des Upload Moduls
Der FileUploader läuft auf allen gängigen Browsern und unterstützt – einen aktuellen Browser vorausgesetzt – auch Multifile und sogar Drag&Drop. Bei älteren Browsern öffnet sich der Standard Dateidialog, den ein jeder kennen sollte. Für die Drag&Drop Variante benötigt der Browser eine HTML5 Unterstützung, die z.B. ab einem Firefox 3.6 oder einem aktuellen Chrome zur Verfügung steht. Auch ein Safari macht – zumindest unter MacOS – keinerlei Probleme. Unter der Windowsversion des Safari habe ich dieses Feature leider nicht anwenden können. Ebenso problematisch sind Linuxsysteme, bei denen die Dateiexplorer (Konqueror oder auch Nautilus) Probleme bereiten. Mit Firefox 3.6 und Konqueror habe ich das Drag&Drop nicht verwenden können – mit FF3.6 und Nautilus nur bei Vollmond. 
Konfiguration in der Skin
Die Beispielkonfiguration des FileUploaders befindet sich in der Datei boot_fileupload_configuration.skin, welche man im Verzeichnis apps/examples/Root/fileupload_handlers/Skins findet. Diese hat folgenden Aufbau:
{
"scripts" : [
{ "test" : "window.skalib",
"load" : "<% param.staticurl %>libs/skalib.min.js"},
{ "test" : "window.fileupload",
"load" : "<% param.staticurl %>fileupload/js/fileupload.js" }
],
"styles" : "<% param.baseurl %>/page/<% param.prefix %>/fileupload.css",
"bootObject" : "window.fileupload",
"bootConfig" : {
"cssprefix" : "<% param.prefix %>",
"allowedExtensions" : ['jpg', 'jpeg', 'png', 'gif'],
"sizeLimit" : 0,
"action" : "<% param.baseurl %>/uploadFile",
"deleteAction" : "<% param.baseurl %>/deleteFile"
}
}
Neben den JavaScript-Dateien und dem Stylesheet findet man in dem Objekt bootConfig den wichtigsten Teil der Konfiguration. Hier hat man die Möglichkeit, über allowedExtensions die erlaubten Dateiendung anzugeben. Es muss sich dabei nicht zwangsweise um Bilddateien handeln. Man könnte damit auch z.B. einen reinen Dokumentenupload kreieren, indem man nur PDFs oder andere Dokumente erlaubt. Die zweite, für den Ablauf der Webanwendung wichtige, Variable ist sizeLimit, welche die maximale Dateigröße, die der Benutzer pro Datei hochladen darf. Steht der Wert auf 0 (wie in der Demokonfiguration) ist die Größenbeschränkung deaktiviert. Das sollte man bei der Einrichtung des FileUploaders – neben der Zugriffsbeschränkung auf den FileUpload selbst – immer im Hinterkopf behalten.
Für den ersten Test empfehle ich, die restlichen Werte, sofern man keinen eigenen Handler für den Upload oder das Löschen der Files schreiben will, unangetastet lassen.
Hinweis zu Intermedia Fotoficient
Wer die Software noch nicht kennt, sollte sie meines Erachtens herunterladen und ausprobieren. Voraussetzung ist entweder ein Linux oder Windows Betriebssystem auf dem Java installiert ist. Nach dem Entpacken des ZIPs startet man einfach die start.sh oder entsprechend die start.bat.
Fazit
Die Kombination des FileUploaders mit den anderen, interessanten Features von Intermedia Fotoficient beflügeln die Fantasy eine jeden Internetentwicklers. Man denke nur an die Möglichkeit, Bilder hochzuladen, diese mit einer der Galerien anzuzeigen und ausgewählte Fotos im Anschluss mit der Bildbearbeitung von Intermedia zu bearbeiten. Aus der Kombination diverser Features lässt sich eine Vielzahl an Anwendungen erstellen, die sicherlich nicht so einfach mit anderen Tools zu realisieren sind.