Beim April-Treffen der TYPO3-Usergroup Düsseldorf ging es diesmal um Responsive Images und darum, wie diese effektiv im CMS eingesetzt werden können. Tim Schreiner erläuterte nicht nur die Hauptprobleme auf dem Weg zu den optimal angepassten Bildgrößen für jedes Device, sondern präsentierte auch gleich die praktische Lösung – in Form einer selbstgeschriebenen Extension.

Die Idee hinter „Responsive Images“ im responsiven Webdesign ist einfach: Im Sourcecode werden alternative Bildformate für die verschiedenen Mediaqueries angeboten, der Browser lädt und zeigt dann nur das für den jeweiligen Bildschirm optimale Format an.  Auf diese Weise kann deutlich Übertragungsbandbreite gespart werden. Ein wichtiger Faktor in der Performance-Optimierung von Webseiten.

Darauf wurden dann die verschiedenen Ansätze für die Codegestaltung (mit vielen Anmerkungen aus der Praxis) vorgestellt. Hier die Slides zum Vortrag von Tim mit den Codebeispielen. Als einer der besten Ansätze hat sich inzwischen das Picture-Sourceset mit alternativen Pixeldensity-Angaben (in den Slides Beispiel 2) erwiesen. Für den IE11 wird dabei allerdings noch ein Polyfill benötigt. Empfehlenswert für die Zukunft ist auch der Einsatz des Bildformats WebP, das optimale Komprimierung mit Farbechtheit und hoher Bildqualität vereint.

Das Problem

Problematisch bei der Umsetzung von Responsive Images ist, dass für jedes Bild eine handvoll Varianten in verschiedenen Abmessungen und mit verschiedenen Auflösungen erstellt und in den Sourcecode eingebunden werden müssen.

An dieser Stelle sollte das CMS natürlich dem Redakteur sinnvollerweise diese Arbeit abnehmen und die Generierung der verschiedenen Bildformate übernehmen. Wie ein Einwurf aus dem nicht ganz neutralen Publikum herausstellte, ist TYPO3 aber immer noch eines der wenigen CMS, das schon von Haus aus in der Lage ist, diese Bildbearbeitungsaufgaben zu übernehmen.

Die Lösung

Dennoch ist die Einrichtung von TYPO3 für die Ausgabe von Responsive Images noch mit relativ viel Konfigurationsaufwand verbunden. Dafür präsentiere Tim jetzt aber eine Lösung mit seiner Extension Responsive Images. (Zur Zeit ist der Extension-Schlüssel im TER leider noch belegt, dafür wird allerdings jetzt hoffentlich nach einer Lösung gesucht.)

Wenn man sich damit abfinden kann, dass man schon wieder „eine Extension mehr“ installieren muss, wird einem hier sehr clever viel Konfiguations- und Tippaufwand bei der Einrichtung eines responsivem Webdesigns abgenommen. In Kürze folgt auch noch eine Konfigurationsvariante für das Bootstrap-Framework.

Bei Fragen und Anregungen zu der Extension freut sich Tim über eine Nachricht bei Twitter oder im #tugdus-Slackchannel.

Fazit für uns:

Die Responsive Image Extension werden wir uns für die nächsten Projekte auf jeden Fall näher anschauen und wahrscheinlich nutzen, da sie viele der anfallenden Konfigurationsprobleme sehr elegant löst. 

Über Karoline Steinfatt

Bio als 3. Abifach. Orchideenfächer studiert. Jetzt 'was mit Internet. U.a. Frontend, TYPO3, Social Media und Suchmaschinen.

Zeige alle Artikel von Karoline Steinfatt →

Profile:
• 
• 
• 
• 
• 
•