ईमेल मार्केटिंग इमेज: साइज़, वज़न और डार्क मोड ट्रैप

आपकी सब्जेक्ट लाइन ओपन दिलाती है। आपकी प्रोडक्ट इमेज क्लिक दिलाती है — बशर्ते वह ठीक से रेंडर हो। ईमेल मार्केटिंग की दुनिया डिज़ाइन के लिए सबसे मुश्किल माहौल है: दर्जनों ईमेल क्लाइंट्स, हर एक का अपना रेंडरिंग इंजन, अपनी इमेज-ब्लॉकिंग डिफ़ॉल्ट सेटिंग, और अब तो डार्क मोड को लेकर भी अपनी अलग और पक्की राय।

जो प्रोडक्ट फ़ोटो आपके डिज़ाइन टूल में बिल्कुल परफेक्ट दिखती हैं, वे अक्सर बिगड़ी हुई हालत में पहुँचती हैं: लेआउट से बाहर तक स्ट्रेच हुई, कमज़ोर कनेक्शन के लिए बहुत भारी, एक खाली ग्रे बॉक्स से बदली हुई, या — आजकल की क्लासिक समस्या — एक ट्रांसपेरेंट PNG जो चुपचाप डार्क-मोड बैकग्राउंड में घुलकर गायब हो जाती है।

ईमेल मार्केटिंग इमेज को सही तरीके से करने का तरीका यहाँ है: चौड़ाई का मानक, फ़ाइल साइज़ का अनुशासन, ऑल्ट टेक्स्ट जो अपना काम पूरी तरह करे, और डार्क मोड ट्रैप का असली समाधान।

ईमेल प्रोडक्ट इमेज कितनी चौड़ी होनी चाहिए?

मार्केटिंग ईमेल के लिए स्टैंडर्ड कंटेंट चौड़ाई 600 पिक्सेल है, हालांकि कुछ आधुनिक टेम्पलेट 640 तक जाते हैं। यह आंकड़ा प्रीव्यू पैन और उन पुराने डेस्कटॉप क्लाइंट्स की वजह से टिका हुआ है जिन्हें कभी रिस्पॉन्सिव डिज़ाइन का मेमो नहीं मिला। इसी के हिसाब से डिज़ाइन करें।

• फ़ुल-विड्थ प्रोडक्ट शॉट्स — 1200px पर एक्सपोर्ट करें, 600 पर डिस्प्ले करें। 2x एक्सपोर्ट लेआउट बदले बिना हाई-डेंसिटी स्क्रीन पर किनारों को शार्प बनाए रखता है।
• मल्टी-कॉलम ग्रिड — 600px कंटेंट एरिया को बाँट लें, फिर हर इमेज को उसकी डिस्प्ले चौड़ाई से दोगुने आकार में एक्सपोर्ट करें।
• साफ़ तौर पर width अट्रिब्यूट सेट करें — कुछ डेस्कटॉप क्लाइंट्स CSS साइज़िंग को नज़रअंदाज़ करके इमेज को उसके असली आकार में रेंडर कर देते हैं, और यही वजह है कि एक भूला हुआ 2400px एक्सपोर्ट पूरे लेआउट को बिगाड़ सकता है।

यहाँ ज़्यादा चौड़ा होना बेहतर नहीं है। एक 600px इमेज जो हर जगह ठीक से रेंडर होती है, वह एक 1400px की शानदार तस्वीर से बेहतर है जो कहीं भी रेंडर नहीं होती।

इमेज फ़ाइल साइज़ को हल्का रखें

हर KB एक टैक्स है जो आपका सब्सक्राइबर मोबाइल डेटा कनेक्शन पर चुकाता है, और धीरे लोड होने वाली हीरो इमेज दिखने से पहले ही स्क्रॉल करके आगे बढ़ा दी जाती है।

• हर इमेज को 200 KB से कम रखने की कोशिश करें, और फ़ोल्ड के ऊपर दिखने वाली किसी भी चीज़ के साथ और भी कंजूसी बरतें। फ़्लैट बैकग्राउंड पर साफ़-सुथरे प्रोडक्ट कटआउट बहुत अच्छे से कंप्रेस होते हैं।
• फ़ोटोग्राफ़ के लिए JPEG, फ़्लैट कलर और कटआउट के लिए PNG। WebP दोनों से बेहतर कंप्रेस होता है — remover.bg इसे एक्सपोर्ट करता है — लेकिन ईमेल क्लाइंट्स में इसका सपोर्ट अभी भी असंगत है, इसलिए कैंपेन के लिए JPEG और PNG मास्टर फ़ाइलें ही रखें।
• Gmail क्लिप के बारे में जान लें। Gmail उन ईमेल को काट देता है जिनका HTML लगभग 102 KB से ज़्यादा होता है। होस्टेड इमेज इस लिमिट में नहीं गिनी जातीं, लेकिन कटी हुई ईमेल कट-ऑफ़ के नीचे की हर चीज़ छिपा देती है — इसलिए कोड को भी हल्का रखें।

ब्लॉक की गई इमेज के लिए ऑल्ट टेक्स्ट लिखें

कॉर्पोरेट Outlook इंस्टॉल और प्राइवेसी को लेकर सजग सब्सक्राइबर अब भी डिफ़ॉल्ट रूप से इमेज ब्लॉक कर देते हैं। ऐसा होने पर ऑल्ट टेक्स्ट ही आपकी पूरी विज़ुअल लेयर बन जाता है।

• प्रोडक्ट और मुद्दे का वर्णन करें — "सेज ग्रीन रंग में टेरा सिरेमिक पौर-ओवर सेट" लिखना "image1.png" से कहीं बेहतर है — फ़र्क़ लगभग उतना ही है जितना एक सेल और एक डिलीट के बीच होता है।
• इसे स्टाइल करें — कई क्लाइंट्स ऑल्ट टेक्स्ट को लाइव टेक्स्ट की तरह रेंडर करते हैं जिसे आप इनलाइन स्टाइल कर सकते हैं: फ़ॉन्ट, साइज़ और रंग सेट करें ताकि ब्लॉक की गई इमेज कुछ सोच-समझकर बनाई गई चीज़ में बदल जाए, न कि किसी गड़बड़ी में।
• ज़रूरी जानकारी को कभी सिर्फ़ पिक्सेल में न बांधें — कीमत, डेडलाइन और CTA असली टेक्स्ट में होने चाहिए। अगर इमेज ब्लॉक हो जाए, तो भी ऑफ़र काम करना चाहिए।

डार्क मोड ट्रैप: डार्क ईमेल क्लाइंट्स में ट्रांसपेरेंट PNG

यहाँ ट्रैप छुपा है। आप एक साफ़-सुथरा प्रोडक्ट कटआउट ट्रांसपेरेंट PNG के रूप में एक्सपोर्ट करते हैं — जो लगभग हर दूसरे चैनल के लिए सही फ़ैसला है, जैसा कि हमारी ट्रांसपेरेंट PNG गाइड समझाती है — और उसे सफ़ेद बैकग्राउंड पर डिज़ाइन की गई ईमेल में डाल देते हैं। फिर क्लाइंट डार्क-मोड यूज़र्स के लिए उस बैकग्राउंड को लगभग काले रंग में बदल देता है। आपके गहरे स्लेटी रंग के हेडफ़ोन एक हल्की सी आउटलाइन बनकर रह जाते हैं। आपका काला लोगो टेक्स्ट गायब हो जाता है। और सफ़ेद बैकग्राउंड मानकर बनाए गए एंटी-एलियास्ड किनारे एक धुंधले हेलो की तरह चमकने लगते हैं।

इससे भी बुरी बात यह है कि क्लाइंट्स इस बात पर भी सहमत नहीं हैं कि डार्क मोड का मतलब क्या है: कुछ आपके रंगों को छेड़ते नहीं, कुछ सिर्फ़ बैकग्राउंड इनवर्ट करते हैं, कुछ लगभग सब कुछ फिर से रंग देते हैं। आप यह तय नहीं कर सकते कि सब्सक्राइबर किस क्लाइंट का इस्तेमाल करेगा, इसलिए ऐसे कटआउट बनाएं जो इन सभी में टिके रहें।

• एक मेल खाता हुआ सॉलिड बैकग्राउंड पहले से जोड़ें — ट्रांसपेरेंसी भेजने के बजाय कटआउट को किसी तय ब्रांड रंग पर फ़्लैटन कर दें। remover.bg एडिटर में इसे किसी सॉलिड कलर पर डालें, ताकि क्लाइंट के पास इनवर्ट करने के लिए कुछ बचे ही नहीं। हमारी प्रोडक्ट फ़ोटो बैकग्राउंड रंग गाइड आपको ऐसा टोन चुनने में मदद करती है जो दोनों मोड में सही दिखे।
• आउटलाइन और पैडिंग जोड़ें — गहरे किनारों वाले प्रोडक्ट के चारों ओर हल्का स्ट्रोक या सॉफ़्ट शैडो उन्हें पढ़ने लायक बनाए रखता है, भले ही कैनवस दोबारा रंगा जाए। भरपूर पैडिंग यह पक्का करती है कि क्लाइंट इमेज के चारों ओर जो भी बदलाव करे, टाइट क्रॉप उससे न टकराए।
• असली क्लाइंट्स में टेस्ट करें — हर कैंपेन से पहले Apple Mail, Gmail और Outlook पर डार्क मोड ऑन करके असली टेस्ट ईमेल भेजें। जो चीज़ एक क्लाइंट सम्मान से बनाए रखता है, दूसरा उसे बेधड़क फिर से रंग देता है।

पूरे कैंपेन में प्रोडक्ट कटआउट को एक जैसा रखें

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

एक ट्रीटमेंट तय करें और उसे हर जगह लागू करें: एक बैकग्राउंड रंग, फ़्रेम में प्रोडक्ट कितनी जगह भरेगा इसके लिए एक स्केल नियम, एक शैडो स्टाइल — remover.bg का एडिटर वास्तविक जैसे शैडो जोड़ता है ताकि कटआउट फ़्रेम में तैरते हुए नहीं बल्कि टिके हुए लगें। बड़े कैटलॉग के लिए, HTTP API हर शॉट पर अपने आप एक जैसी प्रोसेसिंग लागू करता है — वही ऑटोमेशन लॉजिक जो चुपचाप ई-कॉमर्स में AI की तस्वीर बदल रहा है।

निष्कर्ष

ईमेल इमेज सेंड बटन दबाने से पहले लिए गए चार फ़ैसलों पर ही टिकी होती हैं:

1. चौड़ाई — 600px के हिसाब से डिज़ाइन करें, 2x पर एक्सपोर्ट करें।
2. वज़न — हर इमेज 200 KB से कम, अधिकतम सपोर्ट के लिए JPEG या PNG।
3. ऑल्ट टेक्स्ट — विवरणात्मक, स्टाइल किया हुआ, और कभी भी ऑफ़र को छिपाने वाला नहीं।
4. डार्क मोड — बैकग्राउंड पहले से जोड़ें, गहरे किनारों पर आउटलाइन दें, असली क्लाइंट्स में टेस्ट करें।

इन्हें सही तरीके से करें और आपके प्रोडक्ट हर इनबॉक्स में जान-बूझकर बनाए गए लगेंगे — लाइट मोड हो या डार्क मोड, इमेज ब्लॉक हों या न हों। यह बात ज़्यादातर कैंपेन के बारे में नहीं कही जा सकती।