Fotos vorher und nachher

Nummer 11/2015

Mit dem Tool Juxtapose lassen sich schnell und einfach interessante Bildeffekte erzielen.

Scrollreportagen haben als neues journalistisches Format wichtige Impulse für den Online-Journalismus gesetzt. Aber nicht jedes Thema ist groß genug, um daraus eine aufwendige Multimediageschichte zu machen. Und manchmal sind es gerade die kleinen und schnell umzusetzenden Ideen, die den Unterschied machen. In dieser Internetwerkstatt geht es um das Tool Juxtapose JS, das es ermöglicht, mit wenigen Mausklicks zwei Fotos miteinander zu vergleichen.

Was ist Juxtapose JS?

Juxtapose ist ein webbasierter Dienst, mit dessen Hilfe zwei Fotos quasi übereinandergelegt und dann mit Hilfe eines Schiebereglers verglichen werden können. Ideal also, um Vorher-nachher-Vergleiche anzustellen. Der Dienst ist kostenlos und wird von Knight Lab zur Verfügung gestellt, welches seinen Sitz an der Northwestern University im amerikanischen Illinois hat. Aus dem Labor, das von der Knight Foundation gefördert wird, stammt auch das Tool Timeline JS, das es gestattet, mehrere Erzählstränge auf einer Zeitleiste darzustellen (siehe Internetwerkstatt 3/2013).

Wie funktioniert Juxtapose JS?

Die Bedienung von Juxtapose JS (auf Deutsch „gegenüberstellen“) ist sehr einfach gehalten. Auf der Website ist ein Assistent zum Erstellen eines Fotovergleichs mitintegriert. Es muss lediglich jeweils der Link zur Bilddatei für das erste und das zweite Foto hinterlegt werden. Für beide Bilder gibt es jeweils ein Eingabefeld für den Text, der im Bild integriert wird (zum Beispiel das Erstellungsdatum des Fotos), und ein Feld, das für die Bildunterzeile oder den Quellennachweis verwendet werden kann. Unmittelbar nach Eingabe der Daten zeigt der Assistent eine Vorschau an, in der jeweils die Hälfte des ersten und des zweiten Bildes zu sehen ist. In der Mitte ist ein Schieberegler sichtbar, der mit der Maus nach links oder rechts bewegt werden kann. Außerdem gibt der Assistent den Quellcode aus, der für das Einbetten des Bildvergleichs auf der eigenen Website genutzt werden kann. Zum Funktionsumfang des Tools gehören noch weitere Optionen: So kann zum Beispiel die Startposition des Schiebereglers verändert werden. Man kann entscheiden, ob es ein horizontaler Vergleich (linkes Bild/rechtes Bild) oder ein vertikaler Vergleich (oberes Bild/unteres Bild) sein soll. Außerdem kann bestimmt werden, ob der Schieberegler animiert ist oder ob er durch Mausklick an die neue Position springt. Durch das Setzen von Häkchen können darüber hinaus Bildunterzeile und eingeblockter Text angezeigt oder ausgeblendet werden, und es kann entschieden werden, ob der Einbettungscode für responsives Webdesign optimiert sein soll.

Welche technischen Voraussetzungen sind nötig?

Juxtapose JS verwendet Iframes und ist in gängigen Content-Management-Systemen und neuen Browsern einsetzbar. Laut Hersteller ist Juxtapose mit mobilen Geräten auf iOS kompatibel. Da das Knight Lab den Nutzern keinen eigenen Serverplatz für das Ablegen der Fotos bereitstellt, müssen die Bilddateien auf einem eigenen Server oder bei einem Drittanbieter gehostet werden.

Wie kann die Darstellung von Juxtapose im Browser angepasst werden?

Für Anwender, die den Bedarf haben, das Aussehen der Juxtapose-Elemente zu verändern, bietet Juxtapose auf der Plattform GitHub zahlreiche Hinweise, wie sich die Designelemente gezielt steuern lassen.

Für welche Themen eignet sich das Tool?

Anwendungsszenarien für Vorhernachher-Vergleiche sind viele denkbar: Veränderung des Stadtbildes, historisches Kartenmaterial, Typveränderungen bei Menschen, alter versus neuer 20-Euro-Schein, Jahreszeitenvergleich von Landschaften, Luftaufnahmen vor und nach Naturkatastrophen. In der Online-Ausgabe der Berliner Morgenpost findet sich zum Beispiel eine Bilderstrecke, die mit Juxtapose gebaut wurde. Gegenübergestellt werden darin Fotos von Berliner Straßen nach dem Krieg und Fotos derselben Straßen 70 Jahre später.

Fazit

Juxtapose JS ist klein, aber fein und gestattet den unkomplizierten Vergleich von Vorher-nachher-Fotos. Im Alltag schnell umgesetzt, können damit passende Themen um ein schönes multimediales Element aufgewertet werden.