E-Mail-Banner-Größe und Header-Bild
Wähl Mailbreite und Bannerhöhe. Du bekommst die Exportgröße für scharfe Bilder, eine Vorschau, den Bild-Code und verkleinerst dein eigenes Banner im Browser. Kostenlos, ohne Anmeldung, nichts wird hochgeladen.
Der Größen-Guide braucht JavaScript: Exportier doppelt so breit, wie die Mail zeigt, meist 1200 px für eine 600-px-Mail.
Wie groß sollte ein E-Mail-Banner sein?
So breit wie deine Mail, exportiert in doppelter Breite. Die meisten E-Mail-Vorlagen sind 600 px breit, eine Konvention, kein Standard: Ein Banner über die volle Breite wird also mit 600 px angezeigt und mit 1200 px für hochauflösende Bildschirme exportiert.
Die Höhe wählst du. Halt die Botschaft auf dem Handy ohne Scrollen sichtbar, wo ein 600 × 300 Banner etwa halb so groß erscheint.
Ein Banner, das funktioniert
- 2×-Export: 1200 px breit für eine 600-px-Mail
- width-Attribut gesetzt, damit Outlook unter Windows die Größe hält
- Alt-Text, der sagt, was das Bild sagt
- JPG für Fotos, PNG für Logos und Text
- Die einzige Kopie deiner Botschaft in einem Bild
Gängige Bannergrößen
Für eine 600-px-Vorlage. Klick eine Größe im Tool an, um sie zu sehen.
| Banner | Angezeigt | Export (2×) | Gut für |
|---|---|---|---|
| Logo-Kopf | 600 × 100 | 1200 × 200 | Markenzeile über dem Inhalt |
| Header-Banner | 600 × 200 | 1200 × 400 | Newsletter, kurze Ankündigungen |
| Hero-Bild | 600 × 300 | 1200 × 600 | Events, Webinare, Launches |
| Hohes Hero-Bild | 600 × 400 | 1200 × 800 | Ein Produkt oder eine Person im Fokus |
Das Banner in vier Schritten
Von der Design-Datei zum scharfen, leichten Bild in deiner Vorlage.
- 1
In Anzeigegröße gestalten
Leg es 600 px breit an, mit Text, der auf dem Handy lesbar ist.
- 2
In 2× exportieren
1200 px breit. JPG für Fotos, PNG für Flächen und Text.
- 3
Gewicht prüfen
Öffne die Datei im Tool oben: Es zeigt die Größe in KB und verkleinert eine größere Datei auf die Exportbreite.
- 4
Mit dem Code einsetzen
Nutz den Bild-Code: width-Attribut, max-width und height:auto, dazu Alt-Text.
Vor dem Versand
Vier Dinge, an denen Banner nach dem Design scheitern.
- Pardot und Marketing Cloud Next. Account Engagement (Pardot) und Marketing Cloud Next versenden beide das HTML deiner Vorlage, die Breite der Vorlage bestimmt also die Bannerbreite. Lad die 2×-Datei hoch und setz die Anzeigebreite in den Bildeinstellungen oder im HTML.
- WebP und AVIF. Nicht jedes E-Mail-Programm zeigt sie an. Übersicht auf caniemail.com (öffnet in neuem Tab)
- Gmail-Kürzung. Gmail kürzt Mails, deren HTML etwa 102 KB überschreitet (Google dokumentiert die Zahl nicht). Gehostete Bilder zählen nicht mit, Inline-Code schon. Spam Resource (öffnet in neuem Tab)
- Bilder aus. Manche Leser sehen nur den Alt-Text. Setz Überschrift und Button als HTML-Text, nicht ins Banner.
Mehr kostenlose Tools
Häufige Fragen zur E-Mail-Banner-Größe
Kurze Antworten auf das, was Leute zu Banner- und Header-Größen fragen.
Welche Größe ist für ein E-Mail-Banner am besten?
Für eine 600-px-Vorlage: 600 px breit in einer Höhe, die zur Botschaft passt, exportiert mit 1200 px Breite, damit es auf hochauflösenden Bildschirmen scharf bleibt.
Wie groß ist ein E-Mail-Header-Bild?
Meist die volle Vorlagenbreite, 600 px, und 100 bis 200 px hoch für Logo oder Header-Banner. Exportier doppelt so groß.
Warum wirkt mein Banner unscharf?
Es wurde in Anzeigegröße exportiert. Handys und die meisten Laptops haben zwei oder mehr Gerätepixel pro CSS-Pixel, exportier also doppelt so breit.
Warum ist mein Banner in Outlook riesig?
Outlook unter Windows ignoriert max-width und zeigt die Datei in Originalgröße. Setz das width-Attribut am img-Tag auf die Anzeigebreite.
Welches Dateiformat sollte ich nutzen?
JPG für Fotos, PNG für Logos, Flächen und Text, GIF für einfache Animationen. WebP und AVIF zeigt nicht jedes E-Mail-Programm.
Wird mein Bild hochgeladen?
Nein. Das Tool liest es in deinem Browser und verkleinert es dort; nichts geht an uns.
Wir sorgen dafür, dass dein Salesforce-Marketing für dich arbeitet
Du sprichst mit einem zertifizierten Berater, nicht mit dem Vertrieb, und weißt nach dem ersten Gespräch, was als Nächstes kommt.