Warum werden mehrere Bilder auf Mobile untereinander oder zu breit dargestellt?

Ich habe in einer E-Mail mehrere Bilder (z. B. 3 Marken- oder Produktlogos) nebeneinander platziert.
Auf dem Desktop stimmt das Layout, auf dem Smartphone werden die Bilder jedoch untereinander angezeigt oder die Spalten sind sehr breit, obwohl die Bilder selbst klein sind. Woran liegt das – und wie kann man das steuern? Es ist wichtig, die Herausforderungen zu verstehen, die mit mehreren Bildern auf Mobile verbunden sind.

Mehrere Bilder werden auf Mobile oft nicht optimal dargestellt. Dieses Verhalten entspricht dem Standard-Responsive-Verhalten von MJML. Denn MJML ist mobile first:

• Spalten (mj-column) werden auf Mobile standardmässig auf 100 % Breite gestapelt
• Dadurch entstehen einzelne, sehr breite Spalten
• Wenn dann gleichzeitig noch «Fluid on mobile» auf «Ja» gesetzt ist, wird das Bild auf der ganzen Breite dargestellt

Was «Fluid on Mobile» macht – und was nicht

Fluid on Mobile = No bedeutet:

• Das Bild wird auf Mobile nicht automatisch auf die ganze Breite skaliert
• Die definierte Bildbreite (z. B. 120px) bleibt erhalten

Aber:

• Die umgebende Spalte bleibt weiterhin 100 % breit
• Das Layout (nebeneinander vs. untereinander) wird dadurch nicht beeinflusst

Lösung: mj-group für feste Spalten auf Mobile verwenden

Damit mehrere Bilder auch auf Mobile nebeneinander bleiben, müssen die Spalten logisch gruppiert werden.

Dazu wird in MJML ein mj-group verwendet:

• mj-group verhindert das automatische Stapeln der Spalten
• Prozentuale Spaltenbreiten (33.33 %, 50 %) bleiben erhalten
• Spalten innerhalb einer Gruppe müssen zwingend eine Breite in Prozent haben (nicht Pixel)

Wie du mehrere Bilder in Aivie nebeneinander darstellst

1. Öffne den Aivie E-Mail-Builder
2. Wähle auf der linken Seite den Block «Bilderreihe» aus
3. Wähle mit einem Doppelklick das passende Bild aus
4. Füge ggf. weitere Bilder als Block hinzu, oder entferne nicht benötigte Bilder

Advanced: Mehrere Bilder nebeneinander über den Code darstellen

Alternativ kannst du es auch über den Code lösen. Hier ist ein Beispielcode für ein Layout mit drei Bildern:

  <mj-group>
    <mj-column>
      <mj-image width="160px" height="80px" src="https://..."></mj-image>
    </mj-column>
    <mj-column>
      <mj-image width="160px" height="80px" src="https://..."></mj-image>
    </mj-column>
    <mj-column>
      <mj-image width="160px" height="80px" src="https://..."></mj-image>
    </mj-column>
  </mj-group>

Wann du Bilder gruppieren solltest

Verwende mj-group immer dann, wenn:

• Logos, Marken oder Produkte visuell zusammengehören
• Elemente auch auf Mobile nebeneinander bleiben sollen

So lassen sich E-Mail-Layouts präzise steuern.

Wenn du weiter steuern möchtest, wie deine E-Mails auf Mobile dargestellt werden, könnte dieser Beitrag spannend sein: Wie kann ich Bilder oder Buttons nur auf Desktop oder nur auf Mobile anzeigen?

Mehr zum Schreiben von Code mit mj-group erfährst du in der MJML-Dokumentation.