HTML Newsletter mit (eingebetteten) Bildern

Wenn Sie einen HTML Newsletter erstellen haben Sie zwei Möglichkeiten zum Einfügen von Bildern und/oder Hintergrundbildern.

Die zur Verfügung stehenden Varianten

• Eingebettetes Bild
  

• Verweis auf eine Online-Resource des Bildes
  

Die wohl am häufigsten genutzt Variante ist die Bilder per Online-Resource nachladen zu lassen. Dies hat wie bereits erläutert den Nachteil, dass einige E-Mail-Programme im ersten Schritt diese Bilder nicht anzeigen. Bei E-Mail-Programme wie Outlook oder Thunderbird ist ein zusätzlicher Mausklick notwendig um das Nachladen der Bilder zu erlauben. Das ist abhängig von der Einstellung im Programm des Empfängers.

Da die Bilder als Online-Resource im Newsletter genutzt werden ist es zudem erforderlich, dass die Bilder auf einem Webspace liegen. Nur so kann der Empfänger zum Zeitpunkt des Lesens die Bilder erfolgreich laden und in seinem Newsletter erkennen.

Vorteil dieser Variante ist mit Sicherheit der geringe Datenverbrauch bei dem Inhalt des Newsletters. Im Gegensatz zur ersten Variante muss nicht das Bild hochgeladen werden und "als Anhang" mit versandt werden.

Technische Umsetzung der beiden Lösungen

Im folgenden Text werden nun diese beiden Varianten für den jeweils genutzten Editor beschrieben. Zur Erstellung eines Newsletters bietet NEWSTROLL einerseits den WYSIWYG Editor oder ein einfaches Textfeld an. In letzterem ist es möglich, den HTML Code direkt einzufügen und/oder zu bearbeiten. Der HTML-Code wird dann nicht durch den WYSIWYG Editor nachbearbeitet. Weitere Hinweise dazu können Sie dem Artikel über die Editoren entnehmen.

Bearbeitung ohne WYSIWYG Editor (Textfeld / HTML Plain Ansicht)

1. Eingebettes Bild verwenden:

Um ein eingebettetes Bild im Newsletter zu verwenden laden Sie bitte das Bild zunächst über den Reiter "Bildupload / Anhänge" auf unseren Server. Das Bild erscheint nach erfolgreichem Upload in der Übersicht aller Anhänge. Jetzt können Sie über zwei Varianten das Bild in Ihren HTML Code integrieren.

Die erste Variante besteht darin, den Button "als eingebettetes Bild verwenden" () direkt im Reiter "Bildupload / Anhänge" zu benutzen. Dazu gehen Sie bitte im Textfeld des HTML-Newsletters an die entsprechende Stelle an der Sie das Bild einfügen möchten und klicken den o.g. Button. Dadurch wird der HTML-Code für dieses eingebettete Bild in das Textfeld Ihres HTML-Newsletters Inhalts per JavaScript eingefügt. Der dadurch automatisch eingefügte HTML Code kann auch - wie in der nächsten Variante beschrieben - manuell eingefügt werden.

Den dadurch erzeugten HTML Code können Sie jedoch auch selbst per Hand anlegen ohne den o.g. Button. In dieser Variante legen Sie bitte ein neues IMG HTML-Tag an der gewünschten Stelle im HTML Newsletter an mit folgenden Inhalt:

<img src="cid:newsletter_bild1.jpg" alt="mein bild" border="0" />

Wichtig ist dabei, dass der Zielwert (src=) mit dem Dateinamen der hochgeladenen Datei übereinstimmt. Das System prüft beim (Zwischen)-Speichern dann, ob die Datei vorhanden ist und kümmert sich um die Verarbeitung.
 

2. Online-Resource für Bild verwenden:

Die Nutzung eines Bildes per Online-Resource ist die einfachste Variante. Dabei legen Sie wie gewohnt ein IMG HTML-Tag an mit dem Zielwert des Bildes auf Ihrem Webspace. Beispiel:

<img src="http://www.ihrwebspace.de/ihrbild.jpg" alt="mein bild" border="0" />

Bearbeitung mit WYSIWYG Editor

1. Eingebettes Bild verwenden: 

Um ein eingebettetes Bild im Newsletter zu verwenden laden Sie bitte das Bild zunächst über den Button "Anhänge" auf unseren Server. Das Bild erscheint nach erfolgreichem Upload in der Übersicht aller Anhänge unter dem Inhalt. Jetzt können Sie über zwei Varianten das Bild in Ihren Newsletter integrieren.

Die erste Variante besteht darin, den Button "als eingebettetes Bild verwenden" zu benutzen. Dazu gehen Sie bitte im Textfeld des WYSIWYG Editors an die entsprechende Stelle in Ihrem Newsletter, an der Sie das Bild einfügen möchten und klicken den Button des Anhangs unter dem Inhalt und wählen das Einbetten als Bild. Dadurch wird der HTML-Code für dieses eingebettete Bild in das Textfeld Ihres HTML-Newsletters Inhalts per JavaScript eingefügt. Das Bild erscheint dann sofort im WYSIWYG Editor und kann weiter bearbeitet werden.

2. Online-Resource für Bild verwenden:

Wenn Sie das Bild als Online-Resource hinzufügen möchten nutzen Sie bitte die entsprechende Funktion des WYSIWYG Editors () und geben als Ziel-URL Ihr Bild an.

Hinweise:

1. Der Bildupload / Upload von Anhängen ist nur in den kostenpflichtigen Systemen möglich.
2. Nach dem Speichern wird das IMG HTML-Tag (src-Wert) verändert. Dies ist erforderlich, um eine korrekte Vorschau des Newsletters zu ermöglichen und das eingebette Bild anzuzeigen. Das Ziel des IMG HTML-Tag wird dabei auf einen relativen Pfad geändert.
   Dies müssen Sie bei erneuter Speicherung nicht ändern. Das System wandelt diesen temporären IMG-Link für die Vorschau beim Speichern und Versand so ab (auf cid:), dass es im Newsletter als eingebettetes Bild verwendet wird.
3. In einigen E-Mail-Programmen werden Bilder, die als Online-Resource verwendet wurden nicht angezeigt. Das E-Mail-Programm versucht hier den Empfänger/Leser vor dem Nachladen von Bildern zu bewahren. Dies ist in den meisten E-Mail-Programmen konfigurierbar sollte jedoch vor dem Versand beachtet werden. Hier empfiehlt es sich auch die Online-Variante (personalisierte Webansicht ) des Newsletters per Link mit zur Verfügung zu stellen. (<%$webviewlink%>)
   

Dies stimmt so nicht mehr ganz. Die meisten Mailprogramme sind in der HTML Ansicht in der Lage ganz genau zwischen integrierten und angehängten Objekten zu unterscheiden. Schau Dir mal den NEWSTROLL Newsletter z.B. im Thunderbird oder Outlook an. Der hat keine Attachments. Laut Thunderbird sind alle Bilder eingebettet.

Aber hat die Variante mit dem eingebetteten Bild nicht den Nachteil, dass die Bilder als Dateianhang mitversendet werden und bei den meisten Mailprogrammen diese Bilder unterhalb des Letters nochmal angezeigt werden?