TYPO3-Extension für Bilder, die responsive sind

  • Bilder werden in allen Endgeräten ansprechend dargestellt
  • passende Bildgröße in PC-Ansichten, Tablets und Smartphones
  • einfache Handhabung durch vordefinierte Größenverhältnisse

Passende Bilder in allen Bildschirmgrößen und Endgeräten

Seit der Entwicklung von Lösungen für responsive Designs setzen wir bereits ab TYPO3-Version 6.2 LTS die von uns entwickelte TYPO3-Erweiterung "a7images" ein. Diese sorgt für passende Bildgrößen in allen Endgeräten und Bildschirmgrößen, von großen PC-Ansichten über Laptops und kleine Tablets bis hin zu Smartphones.

Gegenüber dem TYPO3-Standard arbeitet die Extension bei der Bildgröße nicht mit festen Pixelangaben, sondern gibt die Breite des Bildbereichs in Prozent und im Verhältnis zum Textbereich an, was eine flexible Darstellung in unterschiedlichen Bildschirmgrößen ermöglicht. Auch das Umfließen von Text entfällt, um unschöne Ansichten bei kleineren Auflösungen zu vermeiden. Darüber hinaus bietet die a7images vordefinierte Größenverhältnisse, die direkt für eine gute Aufteilung und ansprechende Darstellung Ihrer Bilder in allen Ansichten sorgen. Zusätzliche Einstellungen sind im Standard nicht nötig, können aber für ausgefallene Darstellungen von Bildern leicht vorgenommen werden.

Bilder, die mit der TYPO3-Extension a7images responsive sind
Einstellungen für Bilder im Backend mit der TYPO3-Erweiterung a7images

Ergänzende Extensions zur Bildoptimierung

Um die Bilder auf Ihrer Website weiter zu optimieren, können zusätzlich zwei weitere Extensions eingesetzt werden: "a7imageoptim" und "image_autoresize".

Die von a7digital entwickelte Erweiterung a7imageoptim reduziert die Dateigröße von Bildern bei deren Speicherung in TYPO3, d.h. beim Hochladen oder Erzeugen von verkleinerten Versionen durch TYPO3, ohne die Bildqualität sichtbar zu verringern. Wird diese Extension eingesetzt, bietet die Extension a7images zusätzlich die Spezialfunktion, allen Bildern, die durch Bildreferenzen einen img-Tag erzeugen (was in TYPO3 seit Version 6 Standard ist) entsprechende srcset-Attribute verleihen. Damit kann man - vereinfacht gesagt - dem Browser kleinere Versionen von einem Bild anbieten, falls das Bild z.B. in kleineren Bildschirmgrößen nicht in der Originalgröße sondern kleiner dargestellt werden soll. Für den Benutzer hat das den Vorteil, dass ein kleineres Bild schneller geladen werden kann, wo die volle Auflösung unnötig wäre.

Die TYPO3-Erweiterung image_autoresize verkleinert die Bilder beim Hochladen auf die für den jeweiligen Ordner angegebene Größe unter Beibehaltung der Bildproportionen. Zudem kann sie Formate wie .bmp oder .tif in webgeeignete Formate wie .jpg oder .png umgewandeln.

Interessante Funktionen der a7images im Überblick

  • berechnet die passenden Bildgrößen unter Berücksichtigung verschiedener Kriterien wie Anzahl der Bilder, Position neben dem Text und diverser Layout abhängiger Einstellungen
  • vordefinierte Größenverhältnisse, die ohne zusätzliche Einstellungen gleich für eine gute Aufteilung und Darstellung der Bilder in allen Endgeräten sorgen
  • leichte Einstellungsmöglichkeiten für ausgefallenere Darstellung
  • im Zusammenspiel mit der TYPO3-Extension a7imageoptim bietet sie die Nutzung von srcsets, mit denen Bilder in einer konfigurierbaren Anzahl und Größe angeboten werden, von denen der Browser das jeweils passende Bild für die aktuelle Bildschirmgröße holt (s. oben)

Nutzung der Extension

Diese von a7digital entwickelte Erweiterung ist bis auf Weiteres nicht im TYPO3 Extension Repository (TER) vertreten, weil es dazu kein Handbuch gibt und die Extension nur im Kontext von bestimmten TYPO3-Installationen ausgiebig getestet wurde. Wir beschreiben sie hier dennoch, da sie ein anschauliches Beispiel für individuelle Programmierung darstellt.

Kontaktdaten Kontaktdaten
TYPO3-Websites ist ein Service von a7digital.
German
English