Das Einbetten externer Grafiken in ein HTML-Dokument mit dem <img>-Tag ist via „Quellcode Anzeige“ sehr einfach im CRM möglich. Hier ist die grundlegende Syntax:
<img src="https://example.com/bild.jpg" alt="Beschreibung des Bildes">Erklärung der Attribute:
• src: Die URL der externen Grafik.
• alt: Alternativer Text, falls das Bild nicht geladen werden kann (wichtig für Barrierefreiheit und SEO).
• (Optional) width & height: Definiert die Größe des Bildes in Pixeln.
• (Optional) title: Zeigt einen Tooltip an, wenn der Mauszeiger über das Bild fährt.
• (Optional) loading=“lazy“: Verzögertes Laden von Bildern zur Verbesserung der Seitenladezeit.
Beispiel mit einer externen Grafik:
<img src="https://www.example.com/images/logo.png" alt="Firmenlogo" width="300" height="100" title="Firmenlogo">Wichtige Punkte zur Verwendung externer Grafiken:
- Zugriffsrechte beachten:
• Die externe Grafik muss öffentlich erreichbar sein.
• Falls die Grafik eine Anmeldung erfordert, wird sie nicht angezeigt.
- CORS-Beschränkungen (Cross-Origin Resource Sharing):
• Manche Server blockieren das Laden von Bildern auf anderen Domains.
• Falls das Bild nicht angezeigt wird, prüfe die CORS-Einstellungen des Servers.
- Externe Abhängigkeit vermeiden:
• Falls der externe Server ausfällt oder das Bild entfernt wird, erscheint es nicht mehr auf deiner Website.
• Falls die Kontrolle über das externe Bild wichtig ist, sollte es auf dem eigenen Server gehostet werden.
Alternative: Base64-Codierung zur Einbettung ohne externe Abhängigkeit
(ACHTUNG: Dieser Weg funktioniert nicht, wenn das HTML-Dokument später vom CRM in ein PDF umgewandelt werden soll!)
Falls das Bild direkt im HTML-Dokument eingebettet werden soll (z. B. um externe Abhängigkeiten zu vermeiden), kann es in Base64 umgewandelt werden:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Base64 Bild">Dieser Ansatz eignet sich für kleine Bilder, aber nicht für große Dateien, da er die HTML-Datei aufbläht.
Fazit:
Das <img>-Tag mit einer externen URL ist die einfachste Möglichkeit, Bilder in eine HTML-Seite einzubinden. Man sollte jedoch auf Ladezeiten, Zugriffsbeschränkungen und externe Abhängigkeiten achten.