Email signature hell - Bagaimana cara memasukkan gambar logo dan membuatnya tetap tajam?

11

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.

— jorok
sumber

6

Ini adalah tugas bodoh - tetapi klien sering tidak sadar atau tidak mungkin diyakinkan. Anda tidak dapat mengontrol klien email pengguna. Banyak pengguna (seperti saya) hanya melihat email teks biasa, karena itu apa pun yang Anda lakukan, itu hanyalah lampiran gambar dan tidak ada gunanya.

— Scott

Sangat benar; dan memang ini tugas orang bodoh. Sayangnya saya mendapat respons "tapi saya sudah melihat logo tanda tangan email yang terlihat tajam", sehingga membuat penjelasan teknis, betapapun benarnya, yang jauh lebih sulit untuk diajukan ...

— nickpish

3

Saya menemukan menjelaskan bahwa apa yang berfungsi untuk klien klien email tidak universal membantu. Misalnya, celana yang pas dengan tubuh Anda, tetapi berapa banyak tubuh yang tidak pas? Anda dapat menargetkan sesuatu yang spesifik, tetapi Anda tidak dapat menargetkan alam semesta. Tentu saja host gambar bisa responsif, tetapi mereka tidak pernah benar-benar bagian dari email itu sendiri. Ragu klien Anda ingin melakukan lebih dari sekadar melampirkan gambar ke emailnya - yang tidak akan pernah berhasil.

— Scott

Baik. Saya telah menghabiskan banyak waktu untuk hal ini. Mengingat bahwa logo yang dimaksud sebagian besar adalah teks, solusi terbaik yang saya buat adalah menemukan font "web safe" terdekat dan membangun semuanya dalam html / css murni tanpa gambar sama sekali. Tentu saja, fontnya tidak sama persis dan seperti yang Anda sebutkan, siapa yang tahu berapa banyak penerima email yang akan benar-benar melihat hal itu sama sekali, dalam bentuk apa pun yang diperlukan ...

— nickpish

@ font-face juga tidak dapat diandalkan di klien email.

— Scott

8

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/

— KSPR
sumber

Terima kasih atas tanggapan dan tautannya, Kaspar; Saya pasti akan memeriksanya. Saya ingin sekali meninggalkan semuanya seminggu yang lalu, tetapi klien tidak dapat sepenuhnya memahami keterbatasan teknis yang ada. Sulit menjelaskan bagaimana sesuatu yang tampaknya begitu sederhana dalam kenyataannya sangat sulit jika bukan tidak mungkin, ha.

— nickpish

4

Saya biasanya melempar grafik dukungan E-Mail Client pada klien, yang menunjukkan betapa buruknya dukungan untuk berbagai hal. Dengan begitu lebih mudah untuk menunjukkan bahwa sumber daya manusia lebih baik digunakan dengan sesuatu yang lain: campaignmonitor.com/resources/will-it-work/image-blocking

— KSPR

Poin bagus - grafik itu sangat membantu, terima kasih.

— nickpish

4

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 ...)

— Falco
sumber

1

Hm, terima kasih atas sarannya; sehubungan dengan yang terakhir, apakah Anda merujuk ke pertanyaan media dan menggunakan gambar latar belakang yang bertukar berdasarkan dpi atau viewport?

— nickpish

# 1 Saya merujuk pada komentar di atas. Ini adalah satu-satunya solusi yang mungkin. # 2 tidak akan berfungsi untuk banyak klien email - Outlook langsung muncul di benak Anda.

— Scott

@nickpish tepatnya! Ini digunakan pada banyak Situs Web modern (kebanyakan ponsel) sehingga ada banyak tutorial di sekitarnya.

— Falco

@Scott Ya - memiliki gambar yang di-host memungkinkan untuk logika sisi server dan dengan demikian responsif :-) Tapi seperti yang Kaspar sebutkan dalam jawabannya, sebagian besar Klien mungkin akan menghapus atau memblokir gambar sama sekali, sehingga solusi terakhir mungkin akan mengirim email plaintext dengan tautan ke salinan surat yang di-host sebagai "lihat email gaya bagus online"

— Falco

@ Falco solusi media query adalah yang menarik; Saya seorang desainer web yang cukup berpengalaman. Meskipun seperti yang ditunjukkan Scott, jika Outlook tidak mendukung kueri media dalam email, sayangnya itu tidak ada

— gunanya

2

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.

— phyrfox
sumber

1

Sejauh menyangkut SVG, pertanyaan pamungkas dalam hal ini adalah apakah didukung oleh Outlook, yang menurut saya tidak ..

— nickpish

1

@nickpish SVG tidak akan berfungsi di Outlook, itu sebabnya saya menyebutkan mekanisme mundur. Outlook dengan senang hati akan mendukung CSS yang menjadikan gambar asli menggantikan SVG. Dan, sejauh yang saya ketahui, tidak ada yang menyukai Outlook di iOS (seperti pada, mereka akan menggunakannya jika mereka harus , tapi ...).

— phyrfox

1

Paham - Saya pasti akan melihat ke tautan yang Anda berikan; itu bisa menjadi jawabannya. Terima kasih phyrfox.

— nickpish

Meskipun Anda tidak harus menetapkan HighDPI sama dengan perangkat iOS ... Ada semakin banyak perangkat modern (Smartphone, tablet, laptop, desktop) dengan kerapatan dan penskalaan ikon yang lebih tinggi, menghasilkan gambar buram!

— Falco

0

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. Bersulang

— salju
sumber

0

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!

— Rachel
sumber

1

Itu satu klien email dari total yang tak terhitung jumlahnya. Sudahkah Anda menguji metode ini di beberapa klien email lainnya?

— Zach Saucier

1

Mengapa ppi melakukan sesuatu?

— joojaa