Saya menemukan beberapa utas bermanfaat di forum ini sehubungan dengan masalah yang ditimbulkan oleh (menampilkan) gambar dalam tanda tangan email - di sini , misalnya - dan saya telah mencari di seluruh web, tetapi masih belum menemukan solusi yang baik yang cukup mengatasi masalah tersebut. Seorang klien saya hanya ingin logo perusahaannya termasuk dalam tanda tangan email-nya, dan masalah yang saya temui dapat diringkas sebagai berikut:
- Saya dapat mengekspor versi raster logo dari AI pada ukuran sebenarnya, dan itu akan terlihat tajam pada desktop tetapi pixelated / buram pada hi-density (mis. "Retina") menampilkan seperti iPhone.
- Seperti yang disarankan di utas yang saya referensikan, saya dapat mengekspor logo 2-3 kali ukuran sebenarnya, yang ditampilkan untuk menargetkan tampilan hi-density, tetapi logo kemudian akan terlihat lunak pada tampilan non-hi-density ketika diperkecil . Ini adalah masalah khusus dalam hal ini karena logo berisi teks, yang tampak mengerikan ketika disandingkan dengan teks aktual di browser / klien email.
- Saya sudah mempertimbangkan
.svgsebagai pilihan, tetapi ternyata dukungannya tidak bagus; dan dalam hal ini saya berasumsi sebagian besar pengguna yang membaca email klien ini akan menggunakan Outlook, jadi sesuatu yang hanya ditampilkan dengan benar di iOS / webkit / etc bukanlah pilihan yang layak.
Saya bingung pada saat ini dan bertanya-tanya apakah ada pilihan lain yang mungkin di luar sana. Saya tidak yakin, misalnya, apakah mungkin untuk mengimplementasikan gambar hi-density dengan lo-res fallback dalam tanda tangan email?
Setiap saran / wawasan di sini sangat dihargai. Berbatasan dengan lucu betapa sulitnya tugas ini ternyata.
sumber
Jawaban:
Jika saya jadi Anda, saya akan meninggalkan Ide. Penanganan karyawan adalah masalah Anda yang paling kecil, karena sama sekali tidak ada dukungan di dalam E-Mail.
Tapi masalahnya mulai lebih awal. Sebagian besar klien email menghapus gambar dan menambahkan tombol di mana pengguna dapat mengaktifkan gambar. Semua keributan hanya dengan logo ini terlalu merepotkan.
Saya hanya akan menulis sig dengan plaintext dan hanya itu.
Tetapi mungkin Anda tidak ingin menyerah sehingga ini bisa menjadi sesuatu untuk Anda
Atau gunakan teknik ini:
http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/
sumber
Solusi teknis dapat berupa:
Host Gambar di server dan hanya menyematkan
<img>tag dengan alamat. Server dapat menggunakan meta-informasi dari HTTP-Request yang akan mengambil gambar dan memberikan ukuran gambar yang tepat untuk perangkat.Lakukan hal yang sama dengan ukuran tampilan CSS sadar (Tapi saya tidak tahu seberapa baik dukungan untuk ini di berbagai Klien E-Mail) Tapi pada dasarnya Anda dapat menambahkan kedua gambar ke surat dan menggunakan CSS untuk berbagai ukuran tampilan untuk menampilkan gambar kanan (dan Anda bahkan dapat menentukan gambar khusus untuk dicetak ...)
sumber
Banyak klien email saat ini mendukung SVG (Scalable Vector Graphics). Untuk klien tersebut, perlihatkan SVG. Ini dijamin tidak akan dihancurkan oleh penskalaan, karena membaca seperti program komputer (misalnya menggambar lingkaran, kemudian menggambar garis yang terhubung ke lingkaran itu pada 120 dan 240 derajat, dll), sehingga prosesor akan dengan benar membuat gambar yang tidak buram di dalam perangkat lunak pendukung.
Ada berbagai teknik fallback jika Anda peduli dengan klien yang lebih tua, tetapi Anda harus menentukan fallback yang mana, jika ada, yang Anda pedulikan (mis. Klien email mana yang Anda khawatirkan untuk menunjukkan tanda tangannya). Saya pribadi memilih metode yang memberikan penutup yang hampir universal dengan upaya minimal daripada mencoba cakupan 100% rumit atau tanpa cakupan - ada yang bagus yang mendukung semua kecuali Android 2.3, yang mungkin jarang, dan hanya empat baris kode.
Di sisi lain, pemilih media CSS mungkin harus bekerja juga. Jika resolusi layar kurang dari, katakanlah lebar 800 piksel, gunakan PNG atau JPEG yang Anda gunakan hari ini, jika tidak gunakan SVG. Saya cukup yakin bahwa perangkat "retina display" apa pun akan mendukung SVG, atau setidaknya mayoritas.
sumber
Posting yang sangat lama tapi karena saya berjuang dengan masalah yang sama selama berjam-jam dan kebetulan menyelesaikannya, saya akan menjelaskan bagaimana saya melakukannya. Masalah yang saya hadapi adalah bahwa logo perusahaan saya telah ditampilkan dengan baik di monitor desktop (bahkan HD). Tapi itu terlihat buram / kabur ketika dilihat pada telepon retina display. Gambar yang saya dapatkan dari klien persis sama dengan ukuran yang diminta. Masalahnya (khusus untuk devs :) dengan tampilan retina adalah mereka memiliki piksel empat kali lebih banyak di area unit daripada layar standar. Jadi yang Anda butuhkan adalah gambar dua kali ukuran yang Anda inginkan di layar. Misalnya, jika Anda ingin logo Anda menjadi lebar dan tinggi 124x48, buat gambar 248x28. Apa yang dilakukan adalah, ini menggandakan resolusi gambar dan melipatgandakan jumlah piksel. Kemudian gunakan HTML untuk memaksa gambar baru Anda untuk ditampilkan di setengah lebar baru yaitu
<img src=”your_image.jpg” width=”124” />. Melakukan ini harus menyelesaikan pixelation gambar atau kabur. Bersulangsumber
Saya punya masalah yang sama! Sangat frustasi, tetapi saya akhirnya menemukan bahwa menggunakan artboard 120px (tinggi) dengan 300px (lebar), misalnya, di Illustrator lalu mengekspor untuk layar sebagai PNG 8 dengan resolusi 96 ppi bekerja dengan baik untuk tanda tangan prospek Microsoft!
sumber