Vorher-Nachher-Slider auf der Website: Wann er überzeugt und wie Sie ihn einbauen

Wer Dinge sichtbar besser macht, hat auf der eigenen Website ein starkes Argument: den direkten Vergleich. Ein Regler, den Besucher selbst über das Bild ziehen, wirkt dabei stärker als zwei Fotos nebeneinander, weil sie den Unterschied selbst aufdecken.

Ein Vorher-Nachher-Slider lohnt sich für jede Leistung, deren Ergebnis man sehen kann. Entscheidend sind zwei Fotos aus exakt demselben Winkel und bei ähnlichem Licht. Für WordPress gibt es Plugins; mit einem eigenen Regler kommen Sie ohne Fremdcode aus, und er lässt sich auch per Tastatur bedienen.

Ziehen Sie den Regler. Beide Beispiele sind erfunden und gezeichnet:

Für welche Betriebe sich ein Vorher-Nachher-Vergleich lohnt

Passend ist alles, wo sich Vorher und Nachher aus derselben Position fotografieren lassen:

• Handwerk: Maler, Fassadenbau, Fliesenleger, Tischler, Gärtner, Dachdecker.
• Reinigung und Aufbereitung: Fahrzeuge, Teppiche, Steinböden, Fassaden.
• Fotografie und Bildbearbeitung: die Rohaufnahme neben dem fertigen Bild.
• Webdesign: die alte Website neben der neuen, wie im zweiten Beispiel.

Ein Vergleich beantwortet die Frage „Können die das wirklich?“ schneller als jeder Text und zeigt nebenbei, dass die Arbeit echt ist. Mit einer einzelnen Hochglanzaufnahme gelingt das nicht in gleicher Weise.

Eine, zugegeben etwas außergewöhnliche, Ausnahme mit Rechtsfolgen: Für operative plastisch-chirurgische Eingriffe verbietet § 11 des deutschen Heilmittelwerbegesetzes außerhalb der Fachkreise die Werbung mit einer vergleichenden Darstellung des Aussehens vor und nach dem Eingriff. Wenn Sie im Gesundheitsbereich arbeiten, klären Sie vorher ab, was für Sie gilt, auch in Österreich und der Schweiz.

Gute Vorher-Nachher-Fotos: darauf kommt es an

Der schönste Regler rettet keine schlecht zueinander passenden Fotos. Schon ein paar Grad Unterschied in der Ausrichtung, und der Vergleich springt beim Ziehen hin und her.

• Vorher fotografieren, bevor Sie anfangen. Das klingt banal und ist der häufigste Grund, warum es keinen Vergleich gibt. Machen Sie es zur Gewohnheit bei jedem Auftrag.
• Standpunkt merken. Gleiche Stelle, gleiche Höhe, gleiche Brennweite, beim Handy also dieselbe Zoomstufe. Ein Foto vom Vorher-Bild auf dem Handy hilft beim Ausrichten.
• Ähnliches Licht. Sonst vergleichen Besucher das Wetter statt Ihrer Arbeit. Und nichts schönen, was Sie nicht gemacht haben, denn das fällt früher oder später auf.
• Exakt gleiches Format. Beide Bilder brauchen dieselben Pixelmaße, sonst passen sie nicht übereinander. Schneiden Sie beide gemeinsam zu.
• Fragen, bevor Sie zeigen. Sind Menschen, Kennzeichen oder das Haus eines Kunden erkennbar, holen Sie vorher deren Einverständnis ein. Am einfachsten gleich bei der Beauftragung.

Vergessen Sie die hier im wahrsten Sinne des Wortes doppelt so wichtige Rolle der Dateigröße nicht: Ein Slider lädt zwei Bilder, wo sonst eines genügt. Für die richtige Größe und das passende Format, und wie Sie beides optimieren, lesen Sie meinen Beitrag Bilder in WordPress richtig optimieren.

Vorher-Nachher-Slider in WordPress einbauen: Plugin oder eigener Code

Mit einem Plugin. Twenty20 Image Before-After ist kostenlos und laut wordpress.org für WordPress 7.1.4 ausgewiesen, mit mehr als 20.000 aktiven Installationen. Getestet habe ich es für diesen Beitrag nicht. Viele Block-Sammlungen für den WordPress-Editor und Erweiterungen für Page-Builder wie Divi oder Elementor bringen ebenfalls einen solchen Vergleich mit; prüfen Sie zuerst, ob Sie schon etwas Passendes installiert haben, bevor ein weiteres Plugin dazukommt.

Mit eigenem Code. Das Beispiel oben ist im Kern ein normaler Schieberegler des Browsers, der unsichtbar über dem Bild liegt und bestimmt, wie viel vom oberen Bild zu sehen ist. Der Vorteil dieser Bauweise ist etwas, das nicht gleich ins Auge sticht: Der Browser bringt Bedienung per Maus, Finger und Tastatur schon mit, und sogar Screenreader erkennen ihn (das sind jene Programme, die blinden und sehbehinderten Menschen eine Seite vorlesen). Wo der Code im konkreten Fall hingehört, lesen Sie am besten in meinem Artikel eigenen Code in WordPress einbauen.

Prüfen Sie jede Lösung auf drei Dinge, ganz gleich, woher sie kommt:

1. Am Handy ziehen. Der Regler darf das Scrollen der Seite nicht verhindern. Im Beispiel wandert der Finger waagrecht über den Regler, senkrecht scrollt die Seite weiter.
2. Mit der Tastatur bedienen. Mit der Tabulatortaste auf den Regler, dann die Pfeiltasten. Wenn nichts passiert, schließt diese Lösung einen Teil Ihrer Besucher aus.
3. Ohne fremde Server. Wenn das Plugin Dateien von einem anderen Anbieter lädt, erfährt dieser die IP-Adresse Ihrer Besucher, und das gehört in die Datenschutzerklärung.

Was ein Vorher-Nachher-Slider an Ladezeit kostet

Das gezeigte Beispiel überträgt 4,0 KB plus 1,6 KB gemeinsame Hilfsdateien (komprimiert mit gzip gemessen, so wie die Dateien tatsächlich übertragen werden) und spricht mit keinem fremden Server. Es speichert nichts und setzt keine Cookies. Die eigentlichen Kosten sind auf einer echten Website Ihre zwei Fotos, nicht der Regler. Deshalb lädt das Beispiel im Beitrag erst, wenn Sie in seine Nähe scrollen. Bei Ihren Fotos erreichen Sie dasselbe mit dem Attribut loading="lazy": Es sagt dem Browser, ein Bild erst kurz vor dem Sichtbarwerden zu laden, und WordPress setzt dieses Attribut bei Bildern, die weiter unten im Text eines Beitrags vorkommen, in der Regel selbst.

Einmal zieht sich das Beispiel kurz von selbst, damit man sieht, dass es sich bewegt. Wer in den Bedienungshilfen von Handy oder Computer „Bewegung reduzieren“ eingeschaltet hat, sieht auch das nicht.

Wenn Sie noch keine Fotos haben, fangen Sie beim nächsten Auftrag an: Ein Bild vorher, eines nachher, vom selben Punkt aus. Nach ein paar Monaten haben Sie mehr Überzeugungskraft auf der Website als mit jedem Text. Weitere Beispiele für interessante Effekte und Demo-Werkzeuge zum Ausprobieren finden Sie in der Website-Werkstatt.