Dank abgerundeter Ecken sind Bilder mehr auffällig. Sie werden zusammen mit Avataren im UI-Design immer beliebter. In E-Mail-Signaturen treten sie aber nicht so oft auf. In diesem Artikel erfahren Sie, wie Sie so ein Bild in Ihre Signatur einfügen und wann Sie dies besser vermeiden sollten.
So fügen Sie Bilder mit abgerundeten Ecken in HTML hinzu
Das Hinzufügen abgerundeter Ecken zu Bildern in HTML-E-Mails ist gleich wie auf jeder Website. Sie müssen das richtige CSS-Stilattribut im HTML-Code der Nachricht anwenden. Es ist wirklich einfacht. Ich zeige Ihnen dies am Beispiel einer E-Mail-Signatur, die mit diesem kostenlosen E-Mail-Signaturgenerator erstellt wurde.
Diese Vorlage wendet abgerundete Ecken auf das Absenderfoto an, ohne dass das Bild angepasst bzw. geändert werden muss. So können Sie einfach Ihr viereckiges Foto hochladen und beobachten, wie es automatisch abgerundet wird. Wenn fertig, befolgen Sie die im Generator aufgeführten Schritte, um Ihre Vorlage zu personalisieren und auf einen ausgewählten E-Mail-Client anzuwenden.
Um den gleichen Effekt mit einem anderen Bild in einer anderen Signaturvorlage zu erreichen, müssen Sie auf den HTML-Code dieser Vorlage zugreifen. Wählen Sie dazu im Generator eine Vorlage aus, richten Sie sie wie gewünscht ein, markieren Sie Thunderbird als E-Mail-Plattform und klicken Sie auf Apply your signature.
Klicken Sie dann auf Generate HTML und kopieren Sie den HTML-Code in die Zwischenablage:
Starten Sie jetzt den Notepad (oder einen anderen Texteditor) und fügen Sie diesen Code in eine neue Datei ein. Verwenden Sie Strg+F, um nach Ihrem Bild zu suchen und fügen Sie border-radius:50%; zu dem Style-Attribut (siehe unten). Dadurch wird das Foto in einem kreisförmigen Format angezeigt. Sie können niedrigere Werte für den Border-Radius-Parameter verwenden. Dadurch werden die Kanten weniger abgerundet. Machen Sie sich keine Sorgen, wenn 50% überschritten werden. Browser behandeln höhere Werte genau als 50%.
Wenn Sie einen Plain-HTML-Code für Ihre Signatur benötigen, können Sie den gesamten Inhalt dieser Notepad-Datei an das Ziel Ihrer Wahl kopieren. In den meisten Fällen sind jedoch zwei zusätzliche Schritte notwendig. Speichern Sie zunächst Ihr Bild als HTML-Datei. Sie können dazu die Tastenkombination Strg+Umschalt+S verwenden, um auf das Save-As-Fenster zuzugreifen. Wählen Sie einen beliebigen Speicherort, benennen Sie Ihre Signatur und beenden Sie den Namen mit der Erweiterung .htm, ändern Sie den Save as type in All files und klicken Sie anschließend auf Save.
Öffnen Sie anschließend die Datei in Ihrem Browser (Doppelklick auf die Datei sollte den Zweck erfüllen). Sie sollten Ihre Unterschrift mit dem runden Bild sehen. Sie können die Signatur auswählen (Strg+A) und in die Zwischenablage kopieren (Strg+C). Richten Sie es dann wie gewohnt in Ihrem E-Mail-Client ein.
Das einzige Problem beim Bearbeiten des Border-Radius-Attributs besteht darin, dass nicht alle E-Mail-Clients diese abgerundeten Ecken anzeigen. Genauer gesagt: Outlook zeigt keine runden Zuschneidebilder an.
Outlook zeigt keine runden Bilder an
Ich persönlich verwende Microsoft Outlook gerne im Arbeitsalltag. Das Problem ist, dass Outlook eine eigene Methode zum Verstehen und Parsen von HTML- und CSS-Code hat. Keine Menge zusätzlicher Codezeilen ermöglicht die Anzeige runder Bilder mit der Border-Radius-Methode: Es wird ignoriert und Ihr Bild wird in originaler Form (quadratisch oder rechteckig) angezeigt. Daher haben Sie zwei Möglichkeiten, damit umzugehen:
- Erstellen Sie kreisförmige oder abgerundete Bilder mit einem Grafikeditor. Auf diese Weise sollten sie in jedem E-Mail-Client, einschließlich Outlook, gleich angezeigt werden. Verleihen Sie den ausgeschnittenen Fragmenten Transparenz, indem Sie die Datei im PNG-Format speichern. Warum? Andernfalls sehen Ihre gerundeten Bilder beispielsweise im Outlook-Dunkelmodus oder bei der Verwendung eines anderen Hintergrunds für Ihre E-Mail-Signaturen (oder generell für E-Mails) schlecht aus.
- Verwenden Sie die Border-Radius-Methode (die für jedes Bildformat funktioniert, das von E-Mail-Clients unterstützt wird), wobei Sie es im Sinn haben, dass Ihre Bilder in Outlook rechteckig werden.
Lesen Sie auch:
