Responsive und Retina-optimieriert Bilder in TYPO3

Bilder und responsive Webdesign sind nur schwer zu vereinen.
Während das Frontend in relativen Prozent-Angaben und Breakpoints arbeitet, bleiben Bilder zwangsläufig in Form von einzelnen Pixeln erhalten.

Die <picture>-Tag-Lösung hat unter Webentwicklern zwischenzeitlich eine hohe Beliebtheit gefunden und wird von vielen Browsers bereits nativ unterstützt.
Ältere Browser können über Polyfills versorgt werden.

Während aus technischer Sicht die Lösung steht, fängt für den Redakteur der Website das Problem gerade einmal an.

Anforderungen:

Ein Bild-Set für hochauflösende und Pagespeed-optimierte Darstellung von Grafiken verlangt unter Umständen folgendes:

  • Ein Bild pro Viewport für „normale“ Displays.
  • Ein Bild pro Viewport für Retina-Displays.
  • Eine Fallback-Grafik für ältere Browser.
  • Eventuell eine vergrößerte Grafik für die Lightbox-Funktion.

Für den Redakteur bedeutet dies schnell mal bis zu 14 einzelne Bilder in unterschiedlichen Größen zu erstellen, auf den Server zu laden und zu verknüpfen.

html picture-tag

Unser Tribut an alle Mobile-User mit geringer Bandbreite und Retina-Displays

Mit dem neuen fluid-basierten Content-Elemente-Rendering in der jüngsten Version von TYPO3 haben wir eine Lösung ausgearbeitet, welche es erlaubt mit nur einer Grafik die gewünschten Bild-Größen einzelner Viewports im Backend einfach auszuwählen.
Der Rest läuft nun ganz automatisch ab!

Ihre Grafik wird mit einem Klick auf allen Viewports in die optimale Größe gebracht.
Die Möglichkeit den Bildausschnitt über die Crop-Funktion zu wählen bleibt dabei selbstverständlich erhalten.

Keine Lust mehr darauf alle Fotos manuell mit Photoshop auf die richtige Größe zu bringen?
Wir auch nicht!

mask image online
Bild-Ausschnitt wählen

Relaunch Website der zeroseven design studios

Ein Relaunch der Website einer kreativen Agentur stellt immer eine ganz besondere Herausforderung dar. Auf der einen Seite sollte die Website am besten alle technischen Möglichkeiten ausschöpfen und darüber hinaus Grafisch möglichst eine Vorreiter-Rolle spielen. Und umgesetzt werden sollte sie am besten auch noch. Relaunch Website der zeroseven design studios weiterlesen