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 jeder 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 ä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 manuelle 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.

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.

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.