فهم صور شبكية العين في البريد الإلكتروني بتنسيق HTML

بصرف النظر عن هجمة أحجام الشاشات ، تقدم ثورة الأجهزة المحمولة تحديًا آخر مثيرًا للاهتمام لمصممي البريد الإلكتروني: شاشات العرض عالية الدقة في البوصة. تتمتع هذه الشاشات ، التي يشار إليها غالبًا باسم شاشات Retina (وهو مصطلح صاغه جهاز Apple للتسويق) ، بالقدرة على تحسين أي حملة بريد إلكتروني - أو منح المشتركين لديك تجربة بريد إلكتروني أقل من ممتاز.

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

القليل من التاريخ

في عام 2010 ، أصدرت شركة Apple جهاز iPhone 4. من بين تحسينات الأجهزة الأخرى ، أظهر iPhone 4 ما أطلقت عليه Apple اسم شاشة Retina. كانت شاشة Retina من Apple واحدة من أولى شاشات العرض عالية النقاط في البوصة ، أو النقاط العالية في البوصة ، والتي تم إنتاجها بكميات كبيرة للمستهلكين.

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

على الرغم من أن Apple كانت أول من قدم شاشة Retina للجمهور العادي ، إلا أنه لم يمض وقت طويل قبل أن تنطلق الشركات المصنعة للأجهزة الأخرى. بينما بدأت معظم الشركات بأجهزة أصغر مثل الهواتف ، يمكن الآن العثور على شاشات شبكية العين على الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة وحتى أجهزة الكمبيوتر المكتبية مثل جهاز Retina 5k iMac الضخم مقاس 27 بوصة من Apple.

الحاجة إلى صور شبكية العين

تعلم المزيد عن الأجهزة و DPI هو أمر جيد وجيد ، ولكن قد تجد نفسك تسأل:

ما علاقة هذا بحق الجحيم بالتسويق عبر البريد الإلكتروني يا جايسون؟

سؤال جيد!

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

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

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

لحسن حظ المشتركين ، تبنت المزيد من العلامات التجارية الصور المحسّنة لشبكية العين على مدار السنوات القليلة الماضية ، كما يتضح في استطلاعات الرأي السنوية حول حالة البريد الإلكتروني.

استخدام صور شبكية العين في البريد الإلكتروني

كيف يمكنك بالضبط تحسين الصور لشاشات شبكية العين؟ اتضح أن الإجابة بسيطة للغاية.

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

لنلقي نظرة على مثال.

في رسائل البريد الإلكتروني الخاصة بنا ، نقوم بتضمين شعار Litmus في الجزء العلوي. باستخدام HTML ، يتم تحديد حجمه بحيث يتم عرضه بدقة 130 × 48 بكسل. إذا أنشأنا وحفظنا صورة الشعار بهذا الحجم ، فسيشاهد المشتركون فوضى ضبابية على شاشات شبكية العين:

للحفاظ على وضوح الشعار ، نقوم ببساطة بإنشاء صورة بحجم أكبر. في هذه الحالة ، يبلغ حجم ملف الصورة 276 بكسل × 102 بكسل ، ولكن أي شيء يكون على الأقل ضعف حجم العرض المقصود يعمل. بعد ذلك ، في HTML الخاص بنا ، نستخدم حجم العرض الأصلي المقصود في سمات العرض والارتفاع لتصغير الصورة الأكبر:

 <img alt="Litmus" src="[email protected]" width="130" height="48" border="0">

على شاشات DPI العالية ، نحصل على صور شبكية جميلة ونقية.

استخدام صور شبكية العين في Outlook

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

في المثال أدناه ، نستخدم سمة العرض (بدون سمة ارتفاع) و max-width للحصول على صور شبكية تعمل عبر جميع عملاء البريد الإلكتروني.

 <img alt="Litmus" src="[email protected]" width="600" border="0">

ستلاحظ تضمين نمط عرض تم ضبطه على 100٪. هذه خدعة مفيدة لجعل الصور تستجيب عبر أحجام الشاشات المختلفة. في الشاشات الأكبر حجمًا ، ستبدأ قاعدة العرض الأقصى لتقييد حجم الصورة ، بينما في الشاشات الأصغر ستملأ 100٪ من عرض الشاشة - أو الحاوية -.

هل يمكن أن تكون صور الخلفية شبكية العين؟

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

الشيء الرئيسي الذي يجب ملاحظته هو أنه لن يعمل في كل مكان (ولكن ما الذي يفعله حقًا في البريد الإلكتروني؟). بالنسبة لصور خلفية شبكية العين ، يجب عليك استخدام خاصية background CSS بدلاً من سمة HTML الخلفية في شيء مثل خلية الجدول.

 <td>

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

بعض الاعتبارات

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

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

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

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

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

تسمح لك معظم برامج تحرير الصور بضبط الجودة التي يتم بها حفظ الصور. في Photoshop ، على سبيل المثال ، يمكنك ضبط جودة JPEG باستخدام شريط تمرير بسيط:

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

الطريقة الثانية لمراقبة أحجام الملفات هي استخدام برنامج مخصص لضغط صورك بشكل أكبر بعد حفظها. توجد تطبيقات - العديد منها مجانية - لكل نظام تشغيل تتيح لك معالجة الصور وضغطها بعد إنشائها.

تتضمن بعض العناصر المفضلة لدينا ImageOptim و JPEGmini و TinyPNG و Compressor.io و Kraken و Pied Piper. في معظم الحالات ، تقوم ببساطة بسحب وإسقاط صورك - أو تحميلها - إلى البرنامج ويقومون بضغطها. بعد ذلك ، يمكنك تحميل تلك الصور المحسّنة إلى المرساب الإلكتروني أو الخادم الخاص بك لتضمينها في حملات شبكية العين الجاهزة.

إنه عالم شبكية العين

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

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

اختبر حجم ملف الصورة + وقت التحميل باستخدام Litmus Checklist ، يمكنك اختبار صورك من حيث حجم الملف ووقت التحميل والروابط المعطلة. بالإضافة إلى ذلك ، شاهد على الفور كيف تبدو حملاتك في أكثر من 50 عميل بريد إلكتروني. ابدأ قائمة تحقق →