102 من كود البريد الإلكتروني: العمل مع الصور

إن رؤية الشفرة تتسرب أمامك يمكن أن تشعر بالخوف الشديد ، وأحيانًا الإحباط. أعدك ، من مسوق إلى مسوق ، أن الأمر أسهل بكثير مما يبدو. بالإضافة إلى ذلك ، تعد القدرة على التنقل عبر البريد الإلكتروني بتنسيق HTML مهارة قيّمة للغاية. في سلسلة أساسيات رمز البريد الإلكتروني ، سنعلمك أساسيات HTML للبريد الإلكتروني التي تحتاج إلى معرفتها لتكون أكثر راحة مع رمز البريد الإلكتروني.

في منشورنا الأخير ، تناولنا كيف يمكنك التنقل في رمز البريد الإلكتروني الخاص بك للحصول على أحدث المعلومات حول كيفية تحديث الروابط أو إجراء تغييرات سريعة في النسخ. لكن ماذا عن الصور؟

الصور هي العمود الفقري للعديد من رسائل البريد الإلكتروني عالية الأداء. ولكن ، مع التعقيد المتزايد باستمرار وأنواع الملفات المختلفة ، والأحجام ، وإمكانية الوصول ، ووقت التحميل الذي يجب مراعاته ، يمكن أن يربك حتى المسوق الأكثر مهارة.

في هذه المقالة ، سنتطرق إلى بعض الطرق الأكثر شيوعًا لإضافة الصور إلى بريدك الإلكتروني ونتعرف على الأساسيات للتأكد من أن المشتركين لديك يتمتعون بتجربة رائعة. إذا كنت تبحث عن الغوص العميق في الصور ، فراجع هذه الأدلة:

• الدليل النهائي لصور الخلفية في البريد الإلكتروني
• دليل إلى صور GIF المتحركة في البريد الإلكتروني
• استخدام الصور في بريد إلكتروني بتنسيق HTML

يمكنك متابعة الموضوعات التي تم تناولها في هذا الدليل بسهولة ، لذا انطلق وافتح بريدًا إلكترونيًا في Litmus Builder وسنبدأ!

جهز صورتك

قبل أن تتمكن من إضافة صورتك إلى بريدك الإلكتروني ، تأكد من إعدادها لتحقيق النجاح. أولاً ، تأكد من أن الصورة التي تستخدمها هي نوع وحجم جيد لملف البريد الإلكتروني . ستؤدي أحجام الملفات الكبيرة إلى إبطاء وقت التحميل ، مما يقلل من إجمالي التحويلات والمشاركة ، لذا تأكد من استخدام صورة خفيفة الوزن يتم تحميلها بسرعة.

أدخل صورتك

ابحث عن المكان الذي تريد إضافة الصورة إليه في التعليمات البرمجية الخاصة بك — إذا كنت تستخدم Litmus Builder ، فقلّب على Grid View للنقر حيث تريد أن تظهر الصورة ثم انقر فوق عرض الرمز. عندما تعثر على المكان المثالي ، استخدم علامة <img> لإضافة صورتك ، ولكن استبدل عنوان URL هنا برابط مباشر لصورتك.

إذا لم تكن متأكدًا من الرابط المباشر ، فابحث عن نهاية اسم الملف ، فيجب أن ينتهي بنوع ملف صورة مثل ".png" أو ".jpg" أو ".gif". لن تعمل روابط المجلدات أو HTML هنا ، يجب أن تشير مباشرة إلى الصورة التي تضيفها إلى بريدك الإلكتروني.

 <img src="img-url.jpg" />

هذا كل شيء! بمجرد إضافة علامتك ، ستظهر صورتك في جزء المعاينة إذا كنت في Litmus Builder.

فضولي أين يمكنك استضافة صورك؟ تحتوي معظم برامج ESP على نظام استضافة ملفات حيث يمكنك تحميل صورك واستخدام عناوين URL العامة لمصدر الصورة في بريدك الإلكتروني ، لذا تأكد من التحقق من برنامج ESP الخاص بك أولاً. إذا كان برنامج ESP الخاص بك لا يوفر استضافة ملفات الصور ، ففكر في استخدام Amazon's AWS أو خادم FTP لموقع الويب الخاص بك لاستضافة الصور.

ابحث عن الأبعاد الصحيحة

من الأفضل استخدام صورة يبلغ حجمها ضعف المساحة التي تريد إدراجها فيها بحيث تبدو رائعة على جميع الشاشات ولا يوجد بها بكسل أو تشويش. اضبط عرض صورك وارتفاعها عن طريق إضافة مُعدِّل إلى علامة <img> التي أنشأتها في الخطوة السابقة. سيبدو شيئا من هذا القبيل:

 <img src="img-url.jpg" width="400" height="100" />

اضبط قيم العرض والارتفاع بناءً على ما يناسب بريدك الإلكتروني. يمكنك اللعب بهذه القيم ومعرفة كيف تبدو من خلال إجراء تغييرات ، ثم النقر فوق جزء المعاينة في Builder لرؤيتها يتم تحديثها.

أضف نص ALT

يصف نص ALT صورة بحيث يمكن لمن لديهم صور معطلة في عميل البريد الإلكتروني أو يعتمدون على قارئ الشاشة قراءة بريدك الإلكتروني بسهولة. على سبيل المثال ، إذا كانت لدينا صورة لعرض ترويجي يقدم خصمًا بنسبة 20٪ ، فإن إضافة بعض نص ALT الذي يصف العرض يجعل القارئ على دراية بالعرض حتى إذا لم يتمكن من رؤية الصور لأي سبب من الأسباب.

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

أفضل نص بديل هو نص وصفي وموجز وله نفس نية صورتك. إذا قمت بتشغيل بريدك الإلكتروني من خلال Litmus Checklist قبل الإرسال ، فسنضع علامة على نص ALT المفقود حتى تتمكن من الدخول إليه وتحديثه بسهولة. الآن ليس عليك مراجعة مطور البرامج!

تبادل الصور

غيرت رأيك بشأن تلك الصورة الواحدة؟ لديك خياران:

1. تمامًا مثل إنشاء صورة جديدة ، يمكنك استبدال عنوان URL الذي يشير إلى صورتك بآخر جديد. سيحافظ هذا على جميع أبعادك ، أو نص ALT ، أو أي شيء آخر قد يساعد في تصميم صورتك وتحديث محتوى الصورة نفسه.

خذ علامة الصورة الحالية وابحث عن مسار الملف:

 <img src=”img-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

استبدل المسار بمسار صورتك الجديد:

 <img src=”updatedimg-url.jpg” width=”400” height=”100” alt=”20% off all seeds” />

2. اعتمادًا على مكان استضافة صورتك ، يمكنك أيضًا تحميل صورة جديدة بنفس الاسم بالضبط إلى نفس الموقع. بهذه الطريقة ، لن تحتاج إلى لمس الرمز على الإطلاق لتحديث صورة بريدك الإلكتروني.

بريد إلكتروني مثالي بالصور

الآن بعد أن أصبحت لديك القدرة على تحديث الصور وتعديلها ، استخدم هذه القوة بحكمة! يمكن أن يحدث خطأ في الصور في البريد الإلكتروني بسرعة. يمكن أن تؤدي الملفات الثقيلة التي تستغرق وقتًا في التحميل ، أو استخدام الصور لبريدك الإلكتروني بالكامل ، أو إمكانية الوصول السابقة للتصميم إلى إنشاء تجارب مشترك فوضويّة.

إليك بعض أفضل الممارسات السريعة التي يجب وضعها في الاعتبار أثناء إنشاء مكتبة الصور الخاصة بك:

• حافظ على الملفات خفيفة ولطيفة ، أقل من 1 ميغابايت هو الأفضل والأصغر كان ذلك أفضل (يتحقق Litmus Checklist من وقت التحميل ، لذلك لا تقلق إذا كنت لا تعرف حجم كل صورة على حدة.)
• أضف نصًا بديلاً لجعل بريدك الإلكتروني مقروءًا ويمكن الوصول إليه حتى إذا لم تكن الصور مرئية.
• لا ترسل رسائل البريد الإلكتروني للصور فقط والتأكد من البريد الإلكتروني لديه نص الحية. قد يكون من المغري تصميم بريد إلكتروني كامل باستخدام صورة ، ولكن هذا قد يضر بالمشاركة والتحويلات مع أوقات التحميل الطويلة والتجارب السيئة لأولئك الذين تم تعطيل الصور.

هل تحتاج إلى مساعدة في سؤال كود مبتدئ محدد؟ أخبرنا بما تود رؤيته بعد ذلك في هذه السلسلة. لا يوجد سؤال أساسي للغاية!

_________________________________

تعرف على المزيد حول الصور في البريد الإلكتروني:

• لماذا لا يجب إرسال رسائل بريد إلكتروني تحتوي على صور فقط
• دليل إلى صور GIF المتحركة في البريد الإلكتروني  
• فهم صور شبكية العين في البريد الإلكتروني بتنسيق HTML
• PNG أم GIF أم JPEG؟ ما هو أفضل تنسيق صورة للبريد الإلكتروني؟  
• صور GIF المتحركة في البريد الإلكتروني: 10 نصائح للحفاظ على أحجام الملفات صغيرة  
• الدليل النهائي لصور الخلفية في البريد الإلكتروني
• ملفات PNG المتحركة في البريد الإلكتروني: هل هي بديل لملفات GIF؟