Über diese Seite

Diese TYPO3-Seite dient mir als Spielwiese und Demo-System für https://github.com/mmunz/c1_adaptive_images - meinem mittlerweile dritten Versuch, adaptive Images in TYPO3 möglichst perfekt einzusetzen. "Möglichst perfekt" meint:

• wenig Aufwand beim Editor verursachen, also keine komplexen Optionen für adaptive Images einführen
• möglichst wenige HTTP-Requests - es kommt nicht in Frage, jedes Bild zweimal oder gar noch öfter  zu laden
• für alle Bildschirmgrössen Bilder in der optimalen Größe ausliefern
• wenig Aufwand für Entwickler und einfache Benutzung
• Entwickler unterstützen, aber nicht einschränken
• Unterstützung der in TYPO3 Version 8 eingeführten Cropping Varianten, also unterschiedliche Bildbeschnitte je nach Breakpoint.
• Guter Browser Support und noscript-Lösungen
• Page Redraws/Reflows vermeiden

Adaptive Images, also Bilder, die in passenden Grössen für verschiedene Bildschirmgrößen geladen werden, sind eine guter Ansatzpunkt zur Performanceoptimierung von Webseiten. Bilder machen den größten Teil (um die 2/3) des Datenvolumens einer typischen Webseite aus, daher lohnen sich Optimierungen hier oft überdurchschnittlich.

Das Problem

Mit srcset und picture/sources haben wir einen HTML-Standard, mit dem sich adaptive Images gut umsetzen lassen, WENN man die tatsächliche Grösse kennt, in der das Bild dargestellt wird. Warum? Ganz grob: der Browser fängt bereits an Bilder herunterzuladen, bevor er das Stylesheet interpretiert hat, "er" weiss in dem Moment noch nicht, wie gross das Bild tatsächlich dargestellt wird. Dafür gibt es in der srcset Spezifikation das sizes-Attribut, mit dem der Entwickler dem Browser hier mitteilen kann, wie gross das Bild denn auf der gerenderten Seite sein wird.

Als Entwickler wissen wir aber nicht immer, wie groß tatsächlich dargestellt wird. Das ist unter anderem der Fall wenn ein CMS (wie hier TYPO3) verwendet wird und der Editor viele Gestaltungsmöglichkeiten hat. Ich kann hier z.B. flexibel Elemente in Spalten ablegen (zweispaltiger,dreispaltiger Inhalt...). Wenn ich will die Spalten auch nochmal verschachteln. Als Entwickler müsste ich nun beim Rendern der HTML-Templates ein korrektes sizes-Attribut ins img-Tag schreiben, damit das Bild immer in der richtigen Größe angezeigt wird. Ich könnte z.B. rekursiv verschachtelte Grid-Container nach oben wandern und versuchen, daraus ein sizes-Attribut zu generieren. Ich habs versucht. Das war in der Tat mein erster Versuch, damals noch für flux als Grid-Extension. Das lief nach einigen Abenden auch ganz gut. Irgendwann wollte ich eher auf gridelements wechseln und ich hätte viel der komplexen "finde heraus wie breit das Bild hier bei verschiedenen Breakpoints sein wird"-Logik für gridelements anpassen müssen. Aber ich hole hier zu weit aus, eins nach dem anderen.