שיווק ואוטומציה בדוא"ל

כיצד להשתמש בתמונות ברזולוציה גבוהה עבור תצוגות רשתית בדוא"ל HTML שלך

תצוגת רשתית היא מונח שיווקי בו משתמשים תפוח עץ לתאר תצוגה ברזולוציה גבוהה שיש לה צפיפות פיקסלים גבוהה מספיק כדי שהעין האנושית אינה מסוגלת להבחין בפיקסלים בודדים במרחק צפייה טיפוסי. למסך רשתית יש בדרך כלל צפיפות פיקסלים של 300 פיקסלים לאינץ' (ppi) או גבוה יותר, שהוא גבוה משמעותית מתצוגה רגילה עם צפיפות פיקסלים של 72 ppi.

צגי Retina הם כעת די מיינסטרים עבור צגים, מחשבים ניידים, מכשירים ניידים וטאבלטים. יצרנים רבים מציעים כעת צגים ברזולוציה גבוהה עם צפיפות פיקסלים התואמים או עולים על אלה של צגי הרטינה של אפל.

CSS להצגת תמונה ברזולוציה גבוהה יותר עבור תצוגת רשתית

אתה יכול להשתמש בקוד ה-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 עבור תצוגות רשתית היא להשתמש srcset. שימוש בתכונה srcset מאפשר לך לספק תמונות ברזולוציה גבוהה עבור תצוגות רשתית תוך הקפדה על גודל התמונות כראוי עבור התקנים ברזולוציה נמוכה יותר.

<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 עבור תמונות המותאמות לתצוגות רשתית:

  • הקפד שתמיד תגי התמונה שלך יכללו שימוש alt טקסט כדי לספק הקשר לתמונה.
  • בצע אופטימיזציה של תמונות עבור האינטרנט כדי להקטין את גודל הקובץ מבלי לפגוע באיכות התמונה. זה יכול לכלול שימוש דחיסת תמונה כלים, צמצום מספר הצבעים המשמשים בתמונה ושינוי גודל התמונה למימדים האופטימליים שלה לפני העלאתה למייל.
  • הימנע מתמונות רקע גדולות שעלולות להאט את זמני טעינת האימייל.
  • קובצי GIF מונפשים יכולים להיות גדולים יותר בגודל הקובץ מאשר תמונות סטטיות בגלל מספר המסגרות הדרושות ליצירת האנימציה, הקפד לשמור אותם הרבה מתחת ל-1 Mb.

Douglas Karr

Douglas Karr הוא CMO של פתח INSIGHTS ומייסד ה Martech Zone. דאגלס סייע לעשרות סטארט-אפים מצליחים של MarTech, סייע בבדיקת נאותות של למעלה מ-5 מיליארד דולר ברכישות והשקעות של Martech, וממשיך לסייע לחברות ביישום ואוטומציה של אסטרטגיות המכירות והשיווק שלהן. דאגלס הוא מומחה ודובר בטרנספורמציה דיגיטלית ומוכר בינלאומי ב-MarTech. דאגלס הוא גם מחבר שפורסם של מדריך Dummy וספר מנהיגות עסקית.

מאמרים נוספים

לחצן חזרה למעלה
סְגוֹר

זוהה חסימת מודעות

Martech Zone הוא מסוגל לספק לך תוכן זה ללא עלות מכיוון שאנו מייצרים רווח מהאתר שלנו באמצעות הכנסות ממודעות, קישורי שותפים וחסויות. נשמח אם תסיר את חוסם המודעות שלך בזמן שאתה צופה באתר שלנו.