Wenn Bilder im Newsletter gestaucht, unscharf oder falsch beschnitten erscheinen, liegt es fast immer an einer Größendiskrepanz zwischen Datei, HTML und Mail-Client. So beheben Sie das endgültig.
Profi-Tipp: Goldene Regel — 600 px Body-Breite, Bilder exakt 1× oder 2× dieser Breite für gestochen scharfe Retina-Darstellung.
Die 4 häufigsten Größenprobleme
- Bild größer als die Spalte — Client skaliert herunter, oft unscharf.
- Bild kleiner als im HTML deklariert — wird gestreckt und pixelig.
- Fehlende
width/height-Attribute — Outlook nutzt die Originalgröße. - Mobile Clients ignorieren CSS — sie fallen auf die Inline-Attribute zurück.
Empfohlene Maße
| Block | Datei (Retina) | HTML-Breite |
|---|---|---|
| Vollbreiter Hero | 1200 px | 600 px |
| Zweispaltiges Bild | 560 px | 280 px |
| Logo | 300 px | 150 px |
| Icon | 96 px | 48 px |
Schrittweise Lösung
- Quelldatei auf 2× der Renderbreite skalieren — Retina-Schärfe.
- Im
<img>-Tag immerwidthundheightsetzen. - Inline-CSS
max-width:100%;height:autofürs Mobile. - Mit TinyPNG oder Squoosh komprimieren — jedes Bild unter 200 KB.
- Vor dem Versand auf Gmail, Apple Mail und Outlook testen.
Pixelgenaue Bilder in jedem Newsletter — Mailpro kostenlos testen
Der Bildeditor skaliert Uploads automatisch, setzt Retina-Maße und komprimiert beim Upload. Bildeditor entdecken · WYSIWYG-Editor
Weiterführende Themen: