معالجة الصور في عملاء البريد الإلكتروني

تحجب العديد من العملاء الصور افتراضيًا إلى أن ينقر المستخدم على "إظهار الصور". يعرض Outlook وGmail (بالنسبة إلى المرسلين غير المعروفين) ومعظم العملاء على الأجهزة المحمولة عند استخدام اتصال محدود البيانات عنصرًا نائبًا بدلًا منها. صمّم على افتراض أن الصور قد لا تظهر.

لا تضع النصوص المهمة (العناوين وتسميات CTA والأسعار) داخل الصور أبدًا. استخدم نص HTML منسقًا باستخدام CSS مضمّن، حتى تصل الرسالة حتى عند حجب الصور، ويتمكن قارئو الشاشة من قراءتها، ويجري ضبط عكس الألوان في الوضع الداكن بالشكل المناسب.

يحتاج كل <img> إلى سمة alt وصفية. عند حجب الصور، يظهر النص البديل داخل مربع العنصر النائب — ويملأ النص البديل المكتوب جيدًا الفراغ البصري بالرسالة التي كان من المفترض أن تنقلها الصورة.

من دون أبعاد صريحة، ينهار العنصر النائب ويتغير التخطيط عند تحميل الصورة. اضبط السمتين معًا (وكذلك النمط المضمّن المقابل) حتى تحجز الخلية مساحة، سواء وصلت الصورة أم لم تصل.

يُدرج Outlook فجوة صغيرة أسفل الصور المضمّنة. طبّق style="display:block" على كل <img> لإزالة هذه الفجوة وضمان إيقاع رأسي متسق عبر جميع العملاء.

تضيف العملاء الأقدم حدًا أزرق حول <a><img></a>. اضبط border="0" في سمة الصورة وstyle="border:0" بشكل مضمّن، حتى تُعرض الصور المغلّفة داخل العبارات التي تحث على اتخاذ إجراء بشكل نظيف.

لا تعرف عملاء البريد الإلكتروني مفهوم "هذه الصفحة". يجب أن يكون src لكل صورة عنوان URL مطلقًا يبدأ بـ https:// ويشير إلى CDN متاح للعامة. تفشل المسارات المحلية والمسارات النسبية وعناوين http:// (المحتوى المختلط) في التحميل دون إظهار خطأ.

استخدم مضيفًا سريعًا للصور وموزعًا جغرافيًا. يجلب بعض العملاء الصور عبر وكلاء (مثل Gmail) يضيفون طبقة التخزين المؤقت الخاصة بهم؛ وتتجنب شبكات CDN التابعة للطرف الأول التحميل المباشر من مصدر بطيء، وتضمن تحميل الصور باستمرار عبر المناطق المختلفة.

بالنسبة إلى خلفيات العناصر الرئيسية، اقرن background-image في CSS مع bgcolor يطابق اللون السائد. إذا حُجبت الصورة، ستعرض الخلية لونًا مناسبًا، وسيظل النص الموضوع فوق bgcolor مقروءًا، مما يتجنب كارثة ظهور نص أبيض فوق كتلة بيضاء.

اعرض الصور بدقة 2x ثم صغّرها باستخدام سمة width حتى تبدو حادة على الشاشات عالية الكثافة: فمصدر بحجم 600x600 يُعرض بالعرض width="300" والارتفاع height="300" يبدو واضحًا على شاشات Retina. العيب هو استهلاك النطاق الترددي، لذا حافظ على صغر حجم الملفات باستخدام ضغط مكافئ لضغط WebP.

تعمل صور GIF المتحركة في معظم العملاء باستثناء Outlook (الذي يعرض الإطار الأول فقط). صمّم الإطار الأول بحيث يكون مفهومًا كصورة ثابتة — يجب أن يكون العنوان أو CTA أو القيمة الأساسية مقروءًا حتى من دون بقية الحركة.

لماذا يجب ألا تُضمّن النصوص المهمة (العناوين وتسميات CTA والأسعار) داخل الصور في رسالة HTML إلكترونية؟

تعامل مع الصور على أنها تحسين، لا الرسالة نفسها. استخدم عناوين https مطلقة، واضبط width/height/display:block/border:0، واكتب نصًا بديلًا ذا معنى، واستضف الصور على CDN سريع، واقرن الخلفيات ببدائل bgcolor، وصمّم بدقة 2x لشاشات Retina، وتذكّر أن Outlook يجمّد صور GIF عند الإطار الأول.