Direkt zum Seiteninhalt springen

Showcase Before / After Slider

Unsere Idee:

Before / After Slider (auch image comparison) sind beliebte Tools, um zwei Abbildungen deckungsgleich darzustellen und zu vergleichen. Durch die Möglichkeit der Slider-Funktion können fließend verschiedene Punkte der Bilder direkt miteinander verglichen werden. Für das Deutsche Museum Digital bietet sich diese Technologie etwa beim Vergleich historischer und aktueller Objektaufnahmen an, um Veränderungen am Objekt sichtbar zu machen. Zudem sind zum Verständnis komplexer technischer Objekte oft Aufnahmen in verschiedenen Zuständen, zum Beispiel mit Abdeckung oder ohne, notwendig.

In diesem Showcase wird ein eigenentwickelter Before / After Slider vorgestellt. Hierbei ging es primär um die Fragen der Responsivität im Bezug auf mobile Endgeräte und der Performance.

Before After

Predigender Mönch:

Before After

Aufrechtes Klavier, Pyramidenklavier:

Unsere Erfahrungswerte:

Die technische Integration des Sliders gestaltete sich unproblematisch. Es müssen lediglich zwei Bilddateien und damit keine großen Datenmengen verarbeitet werden, so dass dieses Visualisierungstool vielseitig, zum Beispiel in Blogs, zum Einsatz kommen kann. Das Skript für den hier verwendeten Before / After Slider wurde von der IT des Deutschen Museums selbst geschrieben. Vergleichbare Skripte finden sich auf GitHub zur freien Verwendung (bspw. https://codepen.io/bamf/pen/jEpxOX bzw. https://github.com/jotform/before-after.js oder https://juxtapose.knightlab.com/ bzw. https://github.com/NUKnightLab/juxtapose). Man erkennt beim verwendeten Beispiel des „predigenden Mönchs“ beim genauen Hinsehen eine perspektivische Verschiebung; deutlich erkennbar an den Füßen oder an der Ausrichtung des Kopfes. Dies liegt am Aufnahmewinkel der einzelnen Fotografien, der nicht exakt deckungsgleich war. Bei entsprechender Vorbereitung können die Fotos bei der Aufnahme aus dem gleichen Winkel aufgenommen werden. Da es inhaltlich jedoch keinen Unterscheid macht, muss im Einzelfall entschieden werden, ob der Mehraufwand gerechtfertigt ist. Gerade beim Vergleich historischer Aufnahmen wird dies relevant. Das Design des Sliders ist bewusst schlicht gehalten und lädt durch das animierte Logo (hier die Eule des Deutschen Museums) des Schiebereglers zur Interaktion ein. Die Veränderung erfolgt stufenlos. Die Startposition des Reglers lässt sich im Vorhinein einstellen, so dass zum Beispiel das zweite Bild zu Beginn komplett verborgen ist. Ein Feature, das vor allem für digital storytelling interessant ist. Die Anwendung des Tools ist mit verhältnismäßig wenig Aufwand möglich, da lediglich geeignetes Bildmaterial vorliegen muss.