Converjon Image Server

22.05.2015

Komplexe Webportale wie berlin.de und berlinonline.de benötigen häufig Bilder in verschiedenen Formaten, Größen und Qualitäten. Ein Foto zu einem Artikel kann z.B. als kleine Vorschau in einem Teaser, in einer Galerie, im Artikel selbst und als hochaufgelöste Vollbildansicht eingesetzt werden. Durch die variierenden Größenverhältnisse mobiler, responsiver Layouts steigt die Anzahl der Bildversionen zusätzlich.

In klassischen Content-Management-Systemen wird du diesem Zweck jede benötigte Version eines Bildes vorgehalten. Eventuell werden sie beim hochladen automatisch erzeugt, oft jedoch ist manuelle Bildbearbeitung erforderlich. Ein weiteres Problem entsteht, wenn zusätzliche Bildformate hinzukommen, beispielsweise durch eine Layoutänderung. Hierfür müssten alle bestehenden Bilder aufwändig angepasst werden.

Um diese Aufwände zu vermeiden wurde bei BerlinOnline der Image-Server "Converjon" entwickelt. Es handelt sich dabei um serverseitige Software, die Bilder dynamisch in beliebige Formate umwandelt, sobald sie benötigt werden. Die gewünschten Abmessungen und andere Optionen werden beim Anfordern des Bildes mit übergeben und Converjon erzeugt automatisch die gewünschte Version des Bildes.

Zum Beispiel könnte ein Bild, dessen Originalversion unter http://www.example.org/images/one.jpg verfügbar ist, als kleine Vorschau für einen Teaser angefragt werden. Die neue URL, angenommen Converjon ist unter http://converjon.example.org erreichbar, wäre:

http://converjon.example.org/?url=http%3A%2F%2Fwww.example.org%2Fimages%2Fone.jpg&width=200&height=200&quality=50

Hier werden insgesamt 4 Parameter an Converjon übergeben:

  • Original-URL
  • Breite (200)
  • Höhe (200)
  • JPEG-Qualität (50)

Alle Parameter bis auf die Original-URL sind Optional. Es ist z.B. auch möglich, nur die Breite anzugeben. Die Höhe wird dann automatisch anhand des Original-Seitenverhältnisses berechnet.

Cropping

Wenn sowohl Breite als auch Höhe angeben werden und sich das Seitenverhältnis von dem des Originals unterscheidet, muss das Bild teilweise abgeschnitten werden, da es auf keinen Fall verzerrt werden soll. Hierfür stehen verschiedene Cropping-Modi zur Verfügung.

Center Cropping

Dies ist der einfachste Modus. Der Bildausschnitt wird hierbei aus der Mitte des Originalbildes entnommen.

Area of Interest Cropping

Um das Cropping besser kontrollieren zu können, wurde die sog. "Area of Interest" (AOI) eingeführt. Die AOI ist ein rechteckiger Bereich im Originalbild, der in jedem Fall erhalten bleiben soll. Die AOI kann entweder als Parameter zusammen mit Höhe/Breite/etc. übergeben werden oder sie kann in den Metadaten des Originalbildes bereits enthalten sein. Converjon liest diese Metadaten dann bei Bedarf aus.

Die AOI ermöglicht drei verschiedene Cropping-Modi:

  • AOI Coverage: Es wird so viel Material wie möglich aus dem Originalbild verwendet.

    Dies führt dazu, dass der Bereich der AOI im erzeugten Bild relativ klein ist aber viel Bildkontext erhalten bleibt.

  • AOI Emphasis: Der Bildausschnitt wird so gewählt, dass die AOI ihn so weit wie möglich ausfüllt, ohne das Bild vergrößern zu müssen.

    Dieser Modus eignet sich, um bestimmte Details eines Bildes, z.B. ein Gesicht, hervorzuheben.

  • AOI Auto: Abhängig vom Größenverhältnis des Originals und des Zielformates, wird ein Ausschnitt gewählt, der zwischen "Coverage" und "Emphasis" liegt.

    Dieser Modus bewirkt, dass bei sehr kleinen Bildformaten die AOI das Bild ausfüllt, während bei größeren Formaten mehr vom Originalbild zu sehen ist.

Cropping Beispiel

Originalbild (AOI grün hervorgehoben):

Originalbild, Stadtansicht Berlin, Fernsehturm hervorgehoben

Center Cropping:

Mittlerer Bildausschnitt, Fernsehturm abgeschnitten

AOI Coverage Cropping:

Seitlicher Bildausschnitt, Fernsehturm komplett im Bild

AOI Emphasis Cropping:

Detailausschnitt, Fernsehturm formatfüllend

AOI Auto Cropping:

Etwas weiter gefasster Detailausschnitt

Padding:

Sollte es nicht möglich sein, das Originalbild in das gewünschte Seitenverhältnis zu bringen, ohne Teile der AOI abzuschneiden, wird das Bild entsprechend skaliert und die Ränder mit einer frei definierbaren Farbe gefüllt.

Komplettes Bild mit grauen Balken links und rechts

Technologie

Converjon ist eine serverseitige JavaScript-Anwendung und läuft auf node.js. Es müssen gleichzeitig Originalbilder von ihrer Quelle heruntergeladen, umgewandelt und an den Browser ausgeliefert werden, ohne dabe zu viel Systemressourcen zu belegen. Das asynchrone IO-Modell von Node.js eignet sich hervorragend für Anwendungsfälle wie diesen.

Zum eigentlichen Umrechnen der Bilder in die gewünschten Formate kommt imagemagick zum Einsatz, eine bewährte Open-Source-Lösung für automatisierte Bildverarbeitung.

Open Source

Converjon steht als Open-Source-Software unter MIT-Lizenz frei zur Verfügung und wird aktiv gepflegt und weiterentwickelt.

Weiterlesen ...