{"id":957,"date":"2020-01-24T16:19:27","date_gmt":"2020-01-24T14:19:27","guid":{"rendered":"https:\/\/www.mail-signatures.com\/de\/?p=957"},"modified":"2020-09-10T16:01:10","modified_gmt":"2020-09-10T14:01:10","slug":"wie-fugt-man-abgerundete-bilder-zu-html-e-mail-signaturen-hinzu","status":"publish","type":"post","link":"https:\/\/www.mail-signatures.com\/de\/articles\/wie-fugt-man-abgerundete-bilder-zu-html-e-mail-signaturen-hinzu\/","title":{"rendered":"Wie f\u00fcgt man abgerundete Bilder zu HTML-E-Mail-Signaturen hinzu?"},"content":{"rendered":"\n

Dank abgerundeter Ecken sind Bilder mehr auff\u00e4llig. 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\u00fcgen und wann Sie dies besser vermeiden sollten.<\/p>\n\n\n\n

\"E-Mail-Signatur<\/a><\/figure>\n\n\n\n\n\n\n\n

So f\u00fcgen Sie Bilder mit abgerundeten\nEcken in HTML hinzu<\/h2>\n\n\n\n

Das Hinzuf\u00fcgen abgerundeter Ecken zu Bildern in HTML-E-Mails ist gleich wie auf jeder Website. Sie m\u00fcssen 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<\/a> erstellt wurde.<\/p>\n\n\n\n

Diese Vorlage<\/a> wendet abgerundete Ecken auf das Absenderfoto an, ohne dass das Bild angepasst bzw. ge\u00e4ndert werden muss. So k\u00f6nnen Sie einfach Ihr viereckiges Foto hochladen und beobachten, wie es automatisch abgerundet wird. Wenn fertig, befolgen Sie die im Generator aufgef\u00fchrten Schritte, um Ihre Vorlage zu personalisieren und auf einen ausgew\u00e4hlten E-Mail-Client anzuwenden.<\/p>\n\n\n\n

Um den gleichen Effekt mit\neinem anderen Bild in einer anderen Signaturvorlage zu erreichen, m\u00fcssen Sie\nauf den HTML-Code dieser Vorlage zugreifen. W\u00e4hlen Sie dazu im Generator eine Vorlage\naus, richten\nSie sie wie gew\u00fcnscht ein<\/a>, markieren Sie Thunderbird<\/strong> als E-Mail-Plattform und klicken Sie auf Apply your signature<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Klicken Sie dann auf Generate HTML<\/strong> und kopieren Sie den HTML-Code <\/strong>in die Zwischenablage:<\/p>\n\n\n\n

\"\"<\/a><\/figure><\/div>\n\n\n\n

Starten Sie jetzt den Notepad (oder einen anderen Texteditor) und f\u00fcgen Sie diesen Code in eine neue Datei ein. Verwenden Sie Strg+F, um nach Ihrem Bild zu suchen und f\u00fcgen Sie border-radius:50%; <\/strong>zu dem Style<\/strong>-Attribut (siehe unten). Dadurch wird das Foto in einem kreisf\u00f6rmigen Format angezeigt. Sie k\u00f6nnen niedrigere Werte f\u00fcr den Border-Radius-Parameter verwenden. Dadurch werden die Kanten weniger abgerundet. Machen Sie sich keine Sorgen, wenn 50% \u00fcberschritten werden. Browser behandeln h\u00f6here Werte genau als 50%.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Wenn Sie einen Plain-HTML-Code f\u00fcr Ihre Signatur ben\u00f6tigen, k\u00f6nnen Sie den gesamten Inhalt dieser Notepad-Datei an das Ziel Ihrer Wahl kopieren. In den meisten F\u00e4llen sind jedoch zwei zus\u00e4tzliche Schritte notwendig. Speichern Sie zun\u00e4chst Ihr Bild als HTML-Datei. Sie k\u00f6nnen dazu die Tastenkombination Strg+Umschalt+S verwenden, um auf das Save-As<\/strong>-Fenster zuzugreifen. W\u00e4hlen Sie einen beliebigen Speicherort, benennen Sie Ihre Signatur und beenden Sie den Namen mit der Erweiterung .htm<\/strong>, \u00e4ndern Sie den Save as type<\/strong> in All files<\/strong> und klicken Sie anschlie\u00dfend auf Save<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

\u00d6ffnen Sie anschlie\u00dfend\ndie Datei in Ihrem Browser (Doppelklick auf die Datei sollte den Zweck erf\u00fcllen).\nSie sollten Ihre Unterschrift mit dem runden Bild sehen. Sie k\u00f6nnen die\nSignatur ausw\u00e4hlen (Strg+A) und in die Zwischenablage kopieren (Strg+C). Richten\nSie es dann wie gewohnt in Ihrem E-Mail-Client ein.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

Outlook zeigt keine runden Bilder an<\/h2>\n\n\n\n

Ich pers\u00f6nlich 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\u00e4tzlicher Codezeilen erm\u00f6glicht 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\u00f6glichkeiten, damit umzugehen:<\/p>\n\n\n\n