التسويق عبر البريد الإلكتروني والأتمتة

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

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

أصبحت شاشات Retina الآن سائدة تمامًا لشاشات العرض وأجهزة الكمبيوتر المحمولة والأجهزة المحمولة والأجهزة اللوحية. تقدم العديد من الشركات المصنعة الآن شاشات عالية الدقة بكثافة بكسل تتطابق أو تتجاوز تلك الموجودة في شاشات Retina من Apple.

CSS لعرض صورة عالية الدقة لشاشة Retina

يمكنك استخدام كود CSS التالي لتحميل صورة عالية الدقة لشاشة Retina. يكتشف هذا الرمز كثافة البكسل بالجهاز ويحمل الصورة بامتداد 2x لاحقة لشاشات Retina ، أثناء تحميل الصورة ذات الدقة القياسية لشاشات العرض الأخرى.

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) {
/* Load high-resolution image */
background-image: url('image@2x.png');
}

نهج آخر هو استخدام رسوميات متجهة أو SVG الصور ، والتي يمكن تغيير حجمها إلى أي دقة دون فقدان الجودة. هذا مثال:

<div style="max-width: 300px;">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>
</div>

في هذا المثال ، يتم تضمين رمز SVG مباشرةً في البريد الإلكتروني بتنسيق HTML باستخدام الامتداد <svg> بطاقة شعار. ال viewBox تحدد السمة أبعاد صورة SVG ، بينما تحدد السمة xmlns تحدد السمة مساحة اسم XML لـ SVG.

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

ملحوظة: يمكن أن يختلف دعم SVG اعتمادًا على عميل البريد الإلكتروني، لذلك من المهم اختبار بريدك الإلكتروني على عدة عملاء للتأكد من عرض صورة SVG بشكل صحيح.

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

<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">

في هذا المثال ، srcset توفر السمة مصدرين للصورة: image.jpg للأجهزة ذات الدقة 600 بكسل أو أقل ، و image@2x.jpg للأجهزة ذات الدقة 1200 بكسل أو أكثر. ال 600w و 1200w تحدد الواصفات حجم الصور بالبكسل ، مما يساعد المستعرض على تحديد الصورة المراد تنزيلها بناءً على دقة الجهاز.

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

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

من الممكن ترميز بريد إلكتروني بتنسيق HTML سريع الاستجابة والذي سيعرض بشكل صحيح صورة بدقة محسّنة لعرض شبكية العين. إليك الطريقة:

  1. قم بإنشاء صورة عالية الدقة تضاعف حجم الصورة الفعلية التي تريد عرضها في البريد الإلكتروني. على سبيل المثال ، إذا كنت تريد عرض صورة مقاس 300 × 200 ، فقم بإنشاء صورة مقاس 600 × 400.
  2. احفظ الصورة عالية الدقة بامتداد 2x لاحقة. على سبيل المثال ، إذا كانت صورتك الأصلية image.png، احفظ الإصدار عالي الدقة كملف image@2x.png.
  3. في رمز البريد الإلكتروني بتنسيق HTML الخاص بك ، استخدم الكود التالي لعرض الصورة:
<img src="image.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<!--[if (gte mso 9)|(IE)]>
  <img src="image@2x.png" alt="Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
<![endif]-->

<!--[if (gte mso 9)|(IE)]> هو تعليق شرطي يستخدم لاستهداف إصدارات معينة من Microsoft Outlook ، والذي يستخدم Microsoft Word لتقديم رسائل بريد إلكتروني بتنسيق HTML. يمكن أن يكون محرك عرض HTML الخاص بـ Microsoft Word مختلفًا تمامًا عن عملاء البريد الإلكتروني ومتصفحات الويب الأخرى ، لذلك غالبًا ما يتطلب معالجة خاصة. ال

(gte mso 9) يتحقق الشرط مما إذا كان إصدار Microsoft Office أكبر من أو يساوي 9 ، والذي يتوافق مع Microsoft Office 2000 |(IE) يتحقق الشرط مما إذا كان العميل هو Internet Explorer ، والذي يستخدمه Microsoft Outlook غالبًا.

بريد إلكتروني بتنسيق HTML مع صور محسّنة لعرض شبكية العين

في ما يلي مثال على رمز بريد إلكتروني بتنسيق HTML سريع الاستجابة يعرض صورة بدقة محسّنة لشاشات عرض شبكية العين:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Retina-Optimized Email</title>
  <style>
    /* Mobile-specific styles */
    @media only screen and (max-width: 480px) {
      /* Add mobile-specific styles here */
    }
    
    /* High-density display styles */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      img {
        display: block;
        width: 300px !important;
        height: 200px !important;
        max-width: 100%;
        height: auto;
      }
    }
  </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f7f7f7;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td align="center" style="padding: 40px 0 30px 0;">
        <img src="image.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <!--[if (gte mso 9)|(IE)]>
          <img src="image@2x.png" alt="My Image" width="300" height="200" style="display:block; border:none; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;">
        <![endif]-->
      </td>
    </tr>
  </table>
</body>
</html>

تلميحات حول صورة شاشة عرض شبكية العين

فيما يلي بعض النصائح الإضافية حول تحسين رسائل البريد الإلكتروني بتنسيق HTML للصور المحسّنة لشاشات Retina:

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

Douglas Karr

Douglas Karr هو CMO من أوبن إنسايتس ومؤسس Martech Zone. ساعد دوغلاس العشرات من الشركات الناشئة الناجحة في MarTech، وساعد في العناية الواجبة بأكثر من 5 مليارات دولار في عمليات الاستحواذ والاستثمارات في Martech، ويستمر في مساعدة الشركات في تنفيذ وأتمتة استراتيجيات المبيعات والتسويق الخاصة بها. دوغلاس هو أحد خبراء التحول الرقمي المعترف بهم عالميًا وخبير ومتحدث في MarTech. دوغلاس هو أيضًا مؤلف منشور لدليل Dummie وكتاب عن قيادة الأعمال.

مقالات ذات صلة

العودة إلى الزر العلوي
اغلاق

كشف Adblock

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