Bilder und Banner für alle Bildschirmgrößen optimal anzeigen

12.10.2017

Mit Responsive Images bietet Weblication® mit der Mobile First BASE viele Möglichkeiten, um Bilder responsive optimiert für unterschiedliche Bildschirmgrößen zu veröffentlichen.

Dabei nutzt das System Client-Feedback beim Aufruf einer Seite. Auf Basis der im CSS definierten Breakpoints berechnet Weblication® fünf verschiedene Bildgrößen. Diese werden gecacht abgelegt, damit Bilder nur einmalig berechnet werden müssen.

Die wichtigsten Vorteile der Responsive Bilder

  • 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

Art Direction: Geräteabhängige Bildausschnitte - Ladezeiten auf mobilen Geräten reduzieren

Es lassen sich verschiedene Bildausschnitte für Desktops und mobile Endgeräte vom selben Bild definieren. Beim Einsatz von mobilen Geräten können Bild-Ladezeiten dadurch insbesondere bei geringer Bandbreite erheblich reduziert werden. Insbesondere bei Bannerbildern entfaltet die dadurch mögliche Ladezeitoptimierung ihr volles Potenzial.

Art Direction: Geräteabhängige Bildausschnitte
Art Direction: Geräteabhängige Bildausschnitte

Responsive Bilder für Administratoren und Designer

Da in der Mobile First BASE 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.

Automatische Bildbreitenberechnung über Client-Feedback - Responsive Bilder - So funktioniert die Breitenberechnung

Die Bildbreitenberechung geschieht in der Mobile First BASE ü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.

Bildgrößenwerkzeug
Bildgrößenwerkzeug