ईमेल हस्ताक्षर नरक - एक लोगो छवि कैसे शामिल करें और क्या यह तेज है?


11

मैं द्वारा (प्रदर्शित) ईमेल signatures-- में छवियों उत्पन्न मुद्दों के संबंध में इस मंच पर एक जोड़े को उपयोगी सूत्र पाया यहाँ , example-- और मैं कर लिया है के लिए खोज की वेब पर सभी, लेकिन अभी भी एक अच्छा समाधान है कि नहीं किया है पाया पर्याप्त रूप से समस्या का समाधान करता है। मेरा एक ग्राहक बस अपनी कंपनी के लोगो को अपने ईमेल के हस्ताक्षर में शामिल करना पसंद करेगा, और जिन मुद्दों का मैंने सामना किया है, उन्हें निम्नानुसार संक्षेप में प्रस्तुत किया जा सकता है:

  1. मैं वास्तविक आकार में एआई से लोगो के एक रेखापुंज संस्करण को निर्यात कर सकता हूं, और यह डेस्कटॉप पर तेज दिखाई देगा लेकिन हाय-डेंसिटी (जैसे "रेटिना") पर पिक्सलेटेड / धुंधले आईफोन जैसे प्रदर्शित होंगे।
  2. जैसा कि मैंने संदर्भित थ्रेड में सुझाव दिया है, मैं लोगो को 2-3 बार वास्तविक घनत्व वाले डिस्प्ले को हाई-डेंसिटी डिस्प्ले को लक्षित करने के लिए निर्यात कर सकता हूं, लेकिन लोगो को तब गैर-हाय-घनत्व डिस्प्ले पर नरम दिखाई देगा जब इसे छोटा किया जाता है । इस उदाहरण में यह एक विशेष समस्या है क्योंकि लोगो में पाठ होता है, जो ब्राउज़र / ईमेल क्लाइंट में वास्तविक पाठ के साथ juxtaposed होने पर भयानक लगता है।
  3. मैंने .svgएक विकल्प के रूप में विचार किया है, लेकिन स्पष्ट रूप से समर्थन महान नहीं है; और इस मामले में मैं इस ग्राहक के ईमेल को पढ़ने वाले उपयोगकर्ताओं के विशाल बहुमत को आउटलुक का उपयोग कर रहा हूँ, इसलिए कुछ ऐसा है जो केवल iOS / webkit / etc में ठीक से प्रस्तुत करता है एक व्यवहार्य विकल्प नहीं है।

मैं इस बिंदु पर एक नुकसान में हूं और सोच रहा हूं कि क्या कोई अन्य संभव विकल्प है। मुझे यकीन नहीं है, उदाहरण के लिए, यदि एक ईमेल हस्ताक्षर में लो-रेस कमबैक के साथ एक उच्च घनत्व वाली छवि को लागू करना संभव है?

किसी भी सुझाव / अंतर्दृष्टि यहाँ बहुत सराहना की है। यह हास्यप्रद है कि यह कार्य कितना कठिन हो गया है।


6
यह मूर्खों की भूल है - लेकिन ग्राहक अक्सर अनभिज्ञ या असंभव होते हैं। आप उपयोगकर्ता के ईमेल क्लाइंट को नियंत्रित नहीं कर सकते। कई उपयोगकर्ता (जैसे स्वयं) केवल सादे पाठ ईमेल देखते हैं, इसलिए कोई फर्क नहीं पड़ता कि आप क्या करते हैं, यह सिर्फ एक छवि अनुलग्नक और व्यर्थ है।
स्कॉट

सच सच; और वास्तव में मूर्खतापूर्ण है। दुर्भाग्य से मुझे "लेकिन मैंने ईमेल सिग्नेचर लोगो देखा है जो तीक्ष्ण दिखता है" प्रतिक्रिया, जिससे कोई भी तकनीकी स्पष्टीकरण हो सकता है, हालांकि, यह सच है, कि मुद्रा को और अधिक कठिन ...
निकिताश

3
मैं समझाता हूं कि क्लाइंट ईमेल क्लाइंट के लिए जो काम करता है वह सार्वभौमिक मदद नहीं है। उदाहरण के लिए, पैंट की वह जोड़ी आपके शरीर पर फिट होती है लेकिन वे कितने शरीर में फिट नहीं होती हैं? आप कुछ विशिष्ट लक्ष्य कर सकते हैं, लेकिन आप ब्रह्मांड को लक्षित नहीं कर सकते। बेशक होस्ट की गई छवियां उत्तरदायी हो सकती हैं, लेकिन वे वास्तव में कभी भी ईमेल का हिस्सा नहीं होती हैं। यह संदेहास्पद है कि आपका ग्राहक अपने ईमेल से सिर्फ छवि संलग्न करने से अधिक कुछ करना चाहता है - जो कभी काम नहीं करेगा ।
स्कॉट

सही। मैंने इस पर बहुत अधिक समय व्यर्थ / व्यर्थ किया है। यह देखते हुए कि प्रश्न में लोगो ज्यादातर पाठ है, जो सबसे अच्छा समाधान मैं लेकर आया हूं वह निकटतम "वेब सेफ़" फ़ॉन्ट ढूंढ रहा है और पूरी चीज़ को शुद्ध एचटीएमएल / सीएसएस में बना रहा है जिसमें कोई चित्र नहीं है। बेशक, फ़ॉन्ट बिल्कुल मेल नहीं खाता है और जैसा कि आपने उल्लेख किया है, जो जानता है कि कितने ईमेल प्राप्तकर्ता वास्तव में कभी भी इस चीज को देखेंगे, जो भी रूप में इसे अंततः लेता है ...
निकितांश

@ फॉन्ट-फेस ईमेल क्लाइंट्स में भी अविश्वसनीय है।
स्कॉट

जवाबों:


8

अगर मैं होता तो मैं आइडिया छोड़ देता। हायर हैंडलिंग आपकी समस्याओं में से कम से कम है, क्योंकि ई-मेल के भीतर कोई समर्थन नहीं है।

लेकिन समस्याएं पहले से शुरू होती हैं। अधिकांश ईमेल क्लाइंट छवियों को बाहर निकालते हैं और एक बटन जोड़ते हैं जहां उपयोगकर्ता छवियों को सक्रिय कर सकता है। सिर्फ एक लोगो के लिए यह सब उपद्रव सिर्फ एक परेशानी का बहुत अधिक है।

मैं सिर्फ़ प्लेनटेक्स्ट के साथ सिग लिखूंगा और इसे पूरा करूंगा।

लेकिन शायद आप इसे छोड़ना नहीं चाहते हैं इसलिए यह आपके लिए कुछ हो सकता है

या इस तकनीक का उपयोग करें:

http://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/


प्रतिक्रिया और लिंक के लिए धन्यवाद, कास्पर; मैं निश्चित रूप से उन्हें बाहर की जाँच करेंगे। मुझे एक हफ्ते पहले पूरी चीज को छोड़ना पसंद था, लेकिन ग्राहक तकनीकी सीमाओं को पूरी तरह से नहीं पकड़ सकता है। यह स्पष्ट करना मुश्किल है कि कैसे कुछ सरल प्रतीत होता है, वास्तविकता में बहुत मुश्किल से मुश्किल है अगर असंभव नहीं, हा।
निकल

4
मैं आमतौर पर क्लाइंट पर ई-मेल क्लाइंट सपोर्ट चार्ट फेंकता हूं, जो बहुत अच्छा दिखाता है कि विभिन्न चीजों के लिए खराब समर्थन कैसे हैं। इस तरह यह दिखाना आसान है कि मानव संसाधन किसी और चीज़ के साथ बेहतर रूप से उपयोग किए जाते हैं: campaignmonitor.com/resources/will-it-work/image-blocking
KSPR

अच्छा बिंदु-- वह चार्ट बहुत मददगार है, धन्यवाद।
निकिताश

4

तकनीकी समाधान हो सकते हैं:

  1. सर्वर पर छवि होस्ट करें और <img>पते के साथ एक टैग एम्बेड करें । सर्वर HTTP-रिक्वेस्ट के मेटा-इनफॉर्मेशन का इस्तेमाल कर सकता है जो इमेज को लाएगा और डिवाइस के लिए सही इमेज साइज देगा।

  2. प्रदर्शन-आकार के बारे में अवगत सीएसएस के साथ भी ऐसा ही करें (लेकिन मुझे नहीं पता कि विभिन्न ई-मेल ग्राहकों में इसका समर्थन कितना अच्छा है) लेकिन अनिवार्य रूप से आप मेल में दोनों छवियों को जोड़ सकते हैं और प्रदर्शन के लिए विभिन्न डिस्प्ले आकारों के लिए सीएसएस का उपयोग कर सकते हैं। सही छवि (और आप मुद्रण के लिए एक विशेष छवि भी निर्दिष्ट कर सकते हैं ...)


1
एचएम, सुझावों के लिए धन्यवाद; उत्तरार्द्ध के संबंध में, क्या आप मीडिया के प्रश्नों का उल्लेख कर रहे हैं और पृष्ठभूमि चित्रों का उपयोग कर रहे हैं जो डीपीआई या व्यूपोर्ट पर आधारित हैं?
10

# 1 मैंने उपरोक्त टिप्पणियों में उल्लेख किया है। यह बहुत संभव एकमात्र समाधान है। # 2 कई ई-मेल क्लाइंट के लिए काम नहीं करेगा - आउटलुक तुरंत दिमाग में आता है।
स्कॉट

@nickpish बिल्कुल! यह कई आधुनिक वेबसाइटों (ज्यादातर मोबाइल) पर उपयोग किया जाता है इसलिए आसपास कई ट्यूटोरियल हैं।
फाल्को

@Scott हां - होस्ट की गई छवियां सर्वर साइड लॉजिक और इस प्रकार जवाबदेही के लिए अनुमति देती हैं :-) लेकिन जैसा कि कस्पर ने अपने जवाब में बताया है कि ज्यादातर ग्राहक शायद पूरी तरह से छवियों को ब्लॉक या ब्लॉक कर देंगे, इसलिए अंतिम समाधान संभवतः एक लिंक के साथ प्लेनटेक्स्ट मेल भेज रहा होगा। मेल की एक होस्टेड कॉपी को "अच्छे स्टाइल वाले ईमेल ऑनलाइन देखें"
फाल्को

@Falco मीडिया क्वेरी समाधान एक पेचीदा है; मैं बहुत अच्छी तरह से वाकिफ एक वेब डिजाइनर हूँ। हालांकि जैसा कि स्कॉट बताते हैं, यदि आउटलुक ईमेल में मीडिया के सवालों का समर्थन नहीं करता है, तो यह दुर्भाग्य से नहीं है
2

2

कई मेल क्लाइंट आज SVG (स्केलेबल वेक्टर ग्राफिक्स) का समर्थन करते हैं। उन ग्राहकों के लिए, एक एसवीजी दिखाएं। यह स्केलिंग द्वारा नष्ट नहीं होने की गारंटी है, क्योंकि यह एक कंप्यूटर प्रोग्राम की तरह पढ़ता है (उदाहरण के लिए एक सर्कल खींचना, फिर 120 और 240 डिग्री, आदि पर उस सर्कल से जुड़ी एक रेखा खींचना), इसलिए प्रोसेसर एक गैर-धुंधली छवि को सही ढंग से प्रस्तुत करेगा समर्थन सॉफ्टवेयर के अंदर।

यदि आप पुराने क्लाइंट्स की परवाह करते हैं, तो कई प्रकार की फ़ॉलबैक तकनीकें हैं, लेकिन आपको यह निर्धारित करने की आवश्यकता होगी कि आपको कौन सी कमियां हैं, यदि कोई हो, तो आप इस बात की परवाह करते हैं (उदाहरण के लिए कि आप कौन से ईमेल क्लाइंट को हस्ताक्षर दिखाने के बारे में चिंतित हैं)। मैं व्यक्तिगत रूप से एक ऐसी विधि चुनूंगा, जिसने जटिल 100% कवरेज या कोई कवरेज की कोशिश करने के बजाय न्यूनतम प्रयास के साथ लगभग सार्वभौमिक कवर दिया है - एक अच्छा एक है जो सभी लेकिन एंड्रॉइड 2.3 का समर्थन करता है, जो शायद दुर्लभ है, और लेकिन चार लाइनें हैं कोड।

दूसरी ओर, CSS मीडिया चयनकर्ताओं को भी शायद काम करना चाहिए। यदि स्क्रीन रिज़ॉल्यूशन 800 पिक्सेल से कम है, तो पीएनजी या जेपीईजी का उपयोग आज ही करें, अन्यथा एक एसवीजी का उपयोग करें। मुझे पूरा यकीन है कि कोई भी "रेटिना डिस्प्ले" डिवाइस एसवीजी का समर्थन करेगा, या कम से कम बहुमत होगा।


1
जहां तक ​​एसवीजी का सवाल है, इस मामले में अंतिम सवाल यह है कि क्या यह आउटलुक द्वारा समर्थित है, जो मुझे नहीं लगता कि यह है ..
21

1
@nickpish SVG आउटलुक में काम नहीं करेगा, इसीलिए मैंने फालबैक मैकेनिज्म का उल्लेख किया। Outlook ख़ुशी से CSS का समर्थन करेगा जो SVG के स्थान पर मूल छवि प्रदान करता है। और, जहां तक ​​मैं जानता हूं, किसी को भी आईओएस पर आउटलुक पसंद नहीं है (जैसा कि, उन्हें इसका उपयोग करना होगा यदि उन्हें करना है, लेकिन ...)।
phyrfox

1
समझ गया-- आपके द्वारा दिए गए लिंक पर मैं अवश्य गौर करूँगा; इसका उत्तर हो सकता है। धन्यवाद phyrfox।
निकेश

हालाँकि, आप iOS उपकरणों के बराबर HighDPI सेट नहीं कर रहे हैं ... उच्च घनत्व और आइकन स्केलिंग के साथ अधिक से अधिक आधुनिक डिवाइस (स्मार्टफ़ोन, टैबलेट, लैपटॉप, डेस्कटॉप) हैं, जिसके परिणामस्वरूप धुंधली छवियां हैं!
फॉल्को

0

वास्तव में पुरानी पोस्ट, लेकिन जब से मैं घंटों के लिए एक ही मुद्दे से जूझ रहा था और बस इसे हल करने के लिए हुआ था, मैं वर्णन करने वाला हूं कि मैंने यह कैसे किया। मुझे जो समस्या आई वह यह थी कि कंपनी का लोगो मैंने डेस्कटॉप मॉनिटर (यहाँ तक कि HD) में भी ठीक प्रदर्शित किया था। लेकिन यह रेटिना डिस्प्ले फोन पर देखने पर धुंधली / धुंधली दिखती थी। क्लाइंट से मुझे जो छवि मिली, वह उस आकार के बराबर थी जो पूछे जाने वाले आकार के बराबर थी। समस्या (देवों के लिए सख्ती से :) रेटिना डिस्प्ले के साथ यह है कि उनके पास मानक स्क्रीन की तुलना में एक इकाई क्षेत्र में चार गुना अधिक पिक्सेल हैं। तो आपको जो चाहिए वह है स्क्रीन पर दो बार आकार की एक छवि। उदाहरण के लिए, यदि आप चाहते हैं कि आपका लोगो 124x48 चौड़ाई और ऊंचाई का हो, तो 248x28 की छवि बनाएं। यह क्या करता है, यह छवि रिज़ॉल्यूशन को दोगुना करता है और पिक्सेल की संख्या को चौगुना करता है। फिर अपनी नई छवि को अपनी नई चौड़ाई में आधे पर प्रदर्शित करने के लिए बाध्य करने के लिए HTML का उपयोग करें<img src=”your_image.jpg” width=”124” />। ऐसा करने से किसी भी चित्र पिक्सेल या धुंधलापन को हल करना चाहिए। चियर्स


0

मुझे भी बिल्कुल यही समस्या है! सुपर निराशा होती है, लेकिन मैंने अंततः पाया कि उदाहरण के लिए, 300px (चौड़ाई) आर्टबोर्ड द्वारा 120px (ऊंचाई) का उपयोग करके, इलस्ट्रेटर में तो पीएनजी 8 के रूप में 96 ppi के रिज़ॉल्यूशन के साथ स्क्रीन के लिए निर्यात करना Microsoft आउटलुक हस्ताक्षर के लिए अच्छा काम करता है!


1
कि कुल में अनगिनत में से एक ईमेल क्लाइंट है। क्या आपने कई अन्य ईमेल क्लाइंट में इस विधि का परीक्षण किया है?
ज़च सॉसर

1
Ppi कुछ भी क्यों करेगा?
पूजा
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.