Flipbook für TYPO3

Flipbooks sahen 2012 beeindruckend aus, kosten heute Performance und Barrierefreiheit

Der Blättereffekt war eine der beliebtesten Darstellungsformen für Kataloge, Jahresberichte und Magazine auf Unternehmenswebsites. Ein PDF wird in einzelne Seiten zerlegt, im Browser als Buch dargestellt und per Mausklick oder Wischgeste umgeblättert. Die Technik stammt aus der Flash-Ära. Seit dem Ende von Flash (2020) basieren Flipbook-Lösungen auf JavaScript und Canvas. Die Grundidee hat sich aber nicht geändert: Es geht um die visuelle Simulation eines physischen Dokuments.

Das Problem: Flipbooks sind Performance-Killer. Ein 40-seitiges PDF wird in 40 Einzelbilder konvertiert (je 200 bis 500 KB), dazu kommt die JavaScript-Library (100 bis 300 KB minifiziert). Ergebnis: 10 bis 20 MB Payload für ein einzelnes Content-Element. Auf Mobilgeräten sind Flipbooks kaum bedienbar, Screenreader können die Inhalte nicht lesen, und Google indexiert den Text nicht, weil er in Bildern steckt.

Typische Einsatzszenarien

Unternehmensberichte und Jahresabschlüsse. Vorstände wollen den Geschäftsbericht “wie gedruckt” auf der Website zeigen. Die Druckagentur liefert ein PDF, das Marketing-Team will es 1:1 online stellen. Flipbook scheint die einfachste Lösung. Gosign empfiehlt hier eine Alternative: den Bericht als HTML-Seite aufbereiten (suchbar, barrierefrei, responsive) und das PDF als Download-Link daneben stellen. Das erfordert mehr Aufwand, liefert aber SEO-Wert und Barrierefreiheit.

Produktkataloge mit vielen Seiten. Industrieunternehmen mit 200-Seiten-Katalogen nutzen Flipbooks als “Blätterkatalog” auf der Website. Die Realität: Nutzer blättern maximal 5 bis 10 Seiten, bevor sie abbrechen. Ein durchsuchbarer HTML-Katalog mit Filter und Produktdetailseiten konvertiert besser. Wenn der Blättereffekt gewünscht ist, reicht ein Lightbox-Slider mit den wichtigsten Seiten als Vorschau.

Immobilien-Exposés und Broschüren. Maklerbüros zeigen Exposés als Flipbook, damit Interessenten ein Gefühl für das gedruckte Dokument bekommen. Hier reicht oft ein eingebetteter PDF-Viewer (pdf.js) ohne Blättereffekt, der auf allen Geräten funktioniert und den Text durchsuchbar lässt.

Technische Architektur

Die Flipbook-Extension für TYPO3 (wie auch rflipbook, die andere populäre Variante) arbeitet in drei Schritten. Erst wird das PDF serverseitig in Einzelbilder konvertiert (über ImageMagick, Ghostscript oder einen externen Service). Dann werden die Bilder in einer Canvas-basierten JavaScript-Bibliothek (turn.js, StPageFlip oder eine kommerzielle Lösung) gerendert. Der Blättereffekt wird per CSS3-Transform und JavaScript-Animation erzeugt.

Die TYPO3-Integration erfolgt als Content-Element: Redakteur lädt ein PDF hoch, wählt Optionen (Seitenbereich, Thumbnail-Grösse, Effekt-Geschwindigkeit), das Frontend rendert das Flipbook. Die konvertierten Bilder werden im fileadmin oder in einem Cache-Verzeichnis gespeichert.

Abhängigkeiten: ImageMagick oder Ghostscript muss auf dem Server installiert sein (für die PDF-Konvertierung). Die JavaScript-Bibliothek wird als Asset eingebunden. Bei turn.js (die bekannteste Library) muss jQuery geladen werden, was auf modernen Websites ein zusätzlicher Performance-Nachteil ist.

Häufige Probleme und Lösungen

Bilder werden nicht generiert. Die PDF-Konvertierung scheitert, wenn Ghostscript nicht installiert ist, eine falsche Version läuft oder die Rechte für das Ausgabeverzeichnis fehlen. Lösung: gs --version auf dem Server prüfen (mindestens 9.50), Ausgabeverzeichnis mit Schreibrechten für den Webserver-User versehen, bei Shared Hosting den Provider kontaktieren.

Ladezeit über 5 Sekunden. Ein 80-Seiten-PDF erzeugt Dutzende hochauflösende Bilder. Lösung: Bildqualität reduzieren (72 dpi statt 150 dpi für Web-Darstellung), Lazy Loading für Seiten ausserhalb des sichtbaren Bereichs implementieren, WebP statt PNG/JPEG verwenden. Oder die grundsätzliche Frage stellen: Braucht es wirklich ein Flipbook?

Mobilgeräte zeigen Darstellungsfehler. Der Blättereffekt funktioniert auf Touch-Geräten nur eingeschränkt. Der 3D-Page-Turn-Effekt ist auf kleinen Bildschirmen kaum sichtbar, und die Wischgeste kollidiert mit dem Browser-Scroll. Lösung: Auf Mobilgeräten automatisch auf einen einfachen Slider oder den nativen PDF-Viewer zurückfallen.

Migration und Versions-Kompatibilität

Die Flipbook-Extension hat eingeschränkten Support für aktuelle TYPO3-Versionen. Die letzte stabile Version unterstützt TYPO3 v10 und v11. Für v12 und v13 gibt es keinen offiziellen Release (Stand April 2026). rflipbook, die alternative Extension, ist in einer ähnlichen Situation.

Gosign empfiehlt bei einem TYPO3-Upgrade die Ablösung des Flipbooks durch eine der folgenden Alternativen: PDF-Viewer auf Basis von pdf.js (Open Source, keine Konvertierung nötig, Text bleibt suchbar), HTML-Aufbereitung des Inhalts (maximale SEO-Wirkung, volle Barrierefreiheit) oder ein Lightbox-Slider mit ausgewählten Seiten als Bilder (visueller Kompromiss, gute Performance). Die Migration ist in der Regel in 1 bis 2 Tagen abgeschlossen, weil der Inhalt bereits als PDF vorliegt und nur die Darstellungsform wechselt.

Für Unternehmen, die regelmässig neue Publikationen veröffentlichen (quartalsweise Kundenmagazine, jährliche Geschäftsberichte), lohnt sich ein automatisierter Workflow: PDF hochladen, serverseitig per pdf.js rendern, Vorschaubilder generieren, Volltext für die Suche extrahieren. TYPO3 kann diesen Prozess über einen Scheduler-Task automatisieren, sodass Redakteure nur noch das PDF hochladen und die Darstellung automatisch erfolgt. Der Initialaufwand für diesen Workflow liegt bei 3 bis 5 Entwicklungstagen, spart aber bei jeder neuen Publikation 2 bis 4 Stunden manueller Arbeit.

Ein weiterer Aspekt ist die Barrierefreiheit. Flipbooks sind für Screenreader-Nutzer vollständig unzugänglich, weil der Text in Bildern steckt. Das Barrierefreiheitsstärkungsgesetz (BFSG), das ab Juni 2025 gilt, betrifft auch digitale Publikationen auf Unternehmenswebsites. Die Umstellung auf HTML-basierte Darstellungen oder pdf.js (das den Originaltext rendert) ist damit nicht nur eine Performance-Frage, sondern auch eine rechtliche Notwendigkeit. Gosign prüft bei jedem Relaunch-Projekt, ob Flipbooks oder vergleichbare bildbasierte Darstellungen vorhanden sind und schlägt barrierefreie Alternativen vor, bevor das BFSG greift.