BASE (Mobile First): Responsive Bilder

Die Bildbreitenauswahl und die Bildbreitenberechnung wurden in der BASE (Mobile First) grundlegend überarbeitet.

Dem Umstand geschuldet, dass es inzwischen sehr viele unterschiedliche Bildschirmgrößen gibt, setzt die BASE (Mobile First) konsequent auf Responsive Images, um eine optimale Bildqualität bei gleichzeitig minimaler Bildgröße auszuliefern.

Funktionsumfang der Responsive Bilder

Bilder werden als Einzelelemente, Vorschaubildern in Listen, Bannerbilder oder als Bildergalerien dargestellt. In allen Fällen setzt Weblication auf das HTML5 Picture-Tag, um bei Bedarf unterschiedliche Bildgrößen zur Verfügung zu stellen.

Die wichtigsten Funktionen und Merkmale der Mobile First Bilder sind:  

  • Optimale Bildgröße pro CSS-Breakpoint (Bildschirmgrößenraster)
  • HD-Bilder für optimale gestochen scharfe Bilder auf hochauflösenden Bildschirmen
  • Lazy Loading, um die Bilder erst zu laden, wenn sie im Anzeigebereich sind
  • Pixelgenaues Laden von Bildern, falls für jede Bildschirmgröße exakt das passende Bild ausgeliefert werden soll
  • Frei definierbare Qualitätsstufen pro Bild, pro Bildtyp oder global über CSS-Only
  • Art Direction, um bei kleinen Bildschirmen einen alternativen Bildausschnitt anzuzeigen

Für den Redakteur

Für den Redakteur ändert sich kaum etwas. Die meisten Bilder wird er weiterhin mit automatischer Breitenberechnung einbinden. Die aufgelistete Möglichkeit, alternative Bildausschnitte zu definieren, geben ihm bei Bedarf weitere Möglichkeiten, die Bilder optimal darzustellen. Sollen z.B. Referenzlogos mit einer speziellen Breite eingesetzt werden, kann er diese Breiten über CSS-Only Varianten auswählen. In der Variante ist dann auch definiert, ob das Bild ggf. als HD angezeigt werden soll. 

Folgende Auswahlmöglichkeiten der Bildbreiten stehen dem Redakteur zur Verfügung:

  • Automatisch, wodurch der maximal mögliche Platz ausgefüllt wird, ohne die Originalgröße zu überschreiten. Hierbei wird für jede Bildschirmgröße das optimale Bild ausgeliefert
  • Original bzw. Original HD, wodurch immer nur ein Bild in der Originalgröße bzw. bei HD in halber Originalgröße ausgeliefert wird
  • Vordefinierte, auswählbare Breite, wodurch das Bild in der Breite und ggf. pro Breakpoint optimierten Breite ausgeliefert wird

Ein manuelles Setzen der Bildbreite ist standardmäßig nicht vorgesehen, da diese Angaben, analog zu Inline-Styles, nachträgliches Anpassen per CSS unmöglich machen würden. Alternativ können auch mehrere passende vordefinierte Breiten als CSS-Only Untervarianten zur Verfügung gestellt werden.

Für den Administrator bzw. den Designer

Da in der BASE (Mobile First) praktisch alle gestalterischen Angaben zu Bildern über CSS-Only Varianten definiert werden, hat der Designer die größtmögliche Kontrolle über die Darstellung von Bildern. Wie sich Bilder und auch Hintergrundbilder verhalten, ist jederzeit im CSS steuerbar. Damit die Breitenberechnung korrekt funktioniert, muss sich der Designer nicht mehr an spezielle Definitionen innerhalb des CSS bezüglich des hierarchischen Aufbaus halten, was ihm mehr Freiheiten lässt.

So funktioniert die Breitenberechnung

Die Bildbreitenberechung geschieht in der BASE (Mobile First) über Client-Feedback. Das bedeutet, dass der Client dem System mitteilt, wie groß die Bilder für die jeweiligen Breakpoints gerendert werden. Dazu findet im Hintergrund eine breakpoint-basierte Breitensimulation statt. Der Redakteur bekommt davon allerdings nichts mit. Das Ergebnis der Breitenberechnungen lässt sich im Panel über Werkzeuge / Bildgrößen aufrufen. Bei Bedarf können dort die existierenden Bildgrößen auch gelöscht bzw. zurückgesetzt werden.

Werkzeug Bildgrößen
Werkzeug Bildgrößen

Die Bildgenerierung wird seit ca. September 2018 protokolliert (/weblication/grid5/logs/imageSizes).

In den Logs steht drin, bei welchem Seitenaufruf welche Breiten für welche Bilder übermittelt wurden.
Wenn ein Bild nicht passt, muss einfach geprüft werden, wann dafür welche Breiten übermittelt wurden, um herauszufinden wo etwas schief lief.
Dazu am besten die ID des Bildes (im Quelltext im data-rwid Attribut ersichtlich) heranziehen. Diese ID muss für eine ermittelte Konstellation (CSS-Only-Parameter zu einem Bild an Stelle XY) eindeutig sein.

Diese Webseite verwendet Cookies. Durch die Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Datenschutzinformationen