BASE (Mobile First): Responsive Bilder

Die Bildbreitenauswahl und die Bildbreitenberechnung wurden mit der BASE (Mobile First) grundlegend überarbeitet. Erfahren Sie hier mehr Details dazu.

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. Der Administrator kann die Bildberechnung über die Entwicklerkonsole oder dessen Fortschritt auch über das Panel verfolgen.

Das Ergebnis der Breitenberechnungen lässt sich im Panel über Werkzeuge / Bildgrößen aufrufen. Bei Bedarf können dort die existierenden Bildgrößen auch (einzeln) gelöscht bzw. zurückgesetzt werden. Um die passende ID für ein Bild zu ermitteln, lesen Sie über den Browser-Inspektor zum entsprechenden picture-Tag das Attribut data-rwid aus. Die rwid wird in der Regel über die CSS-Angaben der Container in der die Bilder liegen generiert, d.h. dass die rwid nicht ausgehend vom Dateipfad erstellt wird. Somit werden für unterschiedliche Bilder dieselbe rwid eingesetzt. 

Ist für die rwid eines Bildes keine passende ID in der Bildgrößentabelle eingetragen, so wird diese im eingeloggten Zustand für jeden Breakpoint erstellt oder über den Seitenbesucher für den aktuell angezeigten Breakpoint.
Wichtig zu wissen: Während dem Generieren der Bilder, werden dem Benutzer die Original-Bilder angezeigt, erst nach Neuladen die  generierten Thumbnails.

Ab aktueller CMS-Version 14 steht zudem für jede ID hinten in der Zeile auch ein Statistik-Symbol zur Verfügung, über welches man das Log hierzu direkt aufrufen kann.

Die Auflistung erfolgt spaltenweise wie folgt:
  time;userAgent;sizes file;referrer;breakpoint;simulation width;picture sizes data
und gibt somit Aufschluss über den Zeitpunkt der Erstellung, User-Agent, etc.

Werkzeug Bildgrößen
Werkzeug Bildgrößen

Beim Löschen der Bildgrößen müssen die generierten Bilder nicht gelöscht werden. Es ist also keine Bereinigung der Thumbnails erforderlich, um die Bilder neu generieren zu lassen (nur um alte Daten zu löschen).
Beim Löschen gehen alle Daten verloren, beim Zurücksetzen sind diese noch vorhanden, werden genutzt und erst beim Neuberechnen überschrieben.

Hinweise

Weblics® in aktueller Version
Die Bildberechnungsfunktionen hängen grossteils von den Templates und CSS der Weblics® ab, weshalb mindestens die folgenden Weblics® auf aktuellstem Stand sein sollten:

  • Inhaltsbereich (container.section)
  • Mehrspaltiger Inhaltscontainer (container.standard)
  • Inhaltsbox (container.box)
  • Objekt aus einer anderen Seite einbinden (container.includeObject)
  • Bild (standard.picture.wItem.php)
  • Objekt-Template aus Ansprechpartner (contactPerson.wObject.php)

  • Akkordeon-Container (container.accordeon)
  • Registerlaschen-Container (container.tabs)
  • ggf. OpenStreetMap (map.openStreetmap)

Beachten Sie, daß bei einer Projektumsetzung zwischen zwei Breakpoints ein Bild nie kleiner werden darf, da immer vom größtmöglichen Wert innerhalb des Breakpoint Bereiches ausgegangen, also simuliert wird.
Beispiel:
Zwischen den Breakpoints 1200 px und 2560 px, wird zu einem Inhaltsbereich ein padding-right von 20% angewandt und eine max-width von 1200 px. Dies wirkt sich so aus, daß ab dem unteren Breakpoint der rechte Innenabstand immer größer und der eigentliche Inhaltsbereich links daneben immer kleiner wird. Somit wird auch für die Bildbreiten-Simulation die Basis immer geringer, was kleinere Bilder bei eigentlich grösserem viewport zur Folge haben.


Nützlich zu wissen:
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 nicht korrekt war.
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.
Im Bild-Item kann dazu auch debugged werden (getCurrentWidthPath).