Email מאַרקעטינג און אַוטאָמאַטיאָן

ווי צו נוצן הויך-האַכלאָטע בילדער פֿאַר רעטינאַ דיספּלייז אין דיין HTML E- בריוו

רעטינאַ אַרויסווייַזן איז אַ פֿאַרקויף טערמין געניצט דורך עפּל צו באַשרייַבן אַ הויך-האַכלאָטע אַרויסווייַזן וואָס האט אַ פּיקסעל געדיכטקייַט הויך גענוג אַז די מענטשלעך אויג איז ניט ביכולת צו ויסטיילן יחיד בילדצעלן אין אַ טיפּיש וויוינג ווייַטקייט. א רעטינאַ אַרויסווייַזן טיפּיקלי האט אַ פּיקסעל געדיכטקייַט פון 300 בילדצעלן פּער אינטש (ppi) אָדער העכער, וואָס איז באטייטיק העכער ווי אַ נאָרמאַל אַרויסווייַזן מיט אַ פּיקסעל געדיכטקייַט פון 72 פּפּי.

רעטינאַ דיספּלייז זענען איצט גאַנץ מיינסטרים פֿאַר דיספּלייז, לאַפּטאָפּס, רירעוודיק דעוויסעס און טאַבלאַץ. פילע מאַניאַפאַקטשערערז איצט פאָרשלאָגן הויך-האַכלאָטע דיספּלייז מיט פּיקסעל דענסאַטיז וואָס גלייַכן אָדער יקסיד די פון עפּל ס רעטינאַ דיספּלייז.

CSS צו ווייַזן אַ בילד מיט העכער האַכלאָטע פֿאַר אַ רעטינאַ ווייַז

איר קענען נוצן די פאלגענדע CSS קאָד צו לאָדן אַ הויך-האַכלאָטע בילד פֿאַר אַ רעטינאַ אַרויסווייַזן. דער קאָד דיטעקץ די פּיקסעל געדיכטקייַט פון די מיטל און לאָודז די בילד מיט די @ 2 קס סאַפיקס פֿאַר רעטינאַ דיספּלייז, בשעת לאָודינג די נאָרמאַל האַכלאָטע בילד פֿאַר אנדערע דיספּלייז.

@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');
}

אן אנדער צוגאַנג איז צו נוצן וועקטאָר גראַפיקס אָדער סווג בילדער, וואָס קענען וואָג צו קיין האַכלאָטע אָן לוזינג קוואַליטעט. דאָ ס אַ בייַשפּיל:

<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 E- בריוו מיט די <svg> tag. די viewBox אַטריביוט דיפיינז די דימענשאַנז פון די SVG בילד, בשעת די xmlns אַטריביוט ספּעציפיצירן די קסמל נאַמעספּאַסע פֿאַר SVG.

די max-width פאַרמאָג איז באַשטימט אויף די div עלעמענט צו ענשור אַז די SVG בילד וואָג אויטאָמאַטיש צו פּאַסיק די בנימצא פּלאַץ, אַרויף צו אַ מאַקסימום ברייט פון 300 פּקס אין דעם פאַל. דאָס איז דער בעסטער פיר צו ענשור אַז SVG בילדער זענען געוויזן רעכט אויף אַלע דעוויסעס און E- בריוו קלייאַנץ.

נאטיץ: SVG שטיצן קענען בייַטן דיפּענדינג אויף די E- בריוו קליענט, אַזוי עס איז וויכטיק צו פּרובירן דיין E- בריוו אויף קייפל קלייאַנץ צו ענשור אַז די 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 דיסקריפּטאָרס ספּעציפיצירן די גרייס פון די בילדער אין בילדצעלן, וואָס העלפּס דעם בלעטערער באַשליסן וואָס בילד צו אָפּלאָדירן באזירט אויף די האַכלאָטע פון ​​די מיטל.

ניט אַלע E- בריוו קלייאַנץ שטיצן די srcset אַטריביוט. דער מדרגה פון שטיצן פֿאַר srcset קענען בייַטן וויידלי דיפּענדינג אויף די E- בריוו קליענט, אַזוי עס איז וויכטיק צו פּרובירן דיין ימיילז אויף קייפל קלייאַנץ צו ענשור אַז די בילדער זענען געוויזן רעכט.

HTML פֿאַר בילדער אין E- בריוו אָפּטימיזעד פֿאַר רעטינאַ דיספּלייז

עס איז מעגלעך צו קאָד אַ אָפּרופיק HTML E- בריוו וואָס וועט רעכט אַרויסווייַזן אַ בילד אין אַ האַכלאָטע אָפּטימיזעד פֿאַר רעטינאַ דיספּלייז. ווי אזוי:

  1. שאַפֿן אַ הויך-האַכלאָטע בילד וואָס איז טאָפּל די גרייס פון די פאַקטיש בילד איר ווילן צו ווייַזן אין די E- בריוו. פֿאַר בייַשפּיל, אויב איר ווילן צו ווייַזן אַ 300 × 200 בילד, מאַכן אַ 600 × 400 בילד.
  2. היט די הויך-האַכלאָטע בילד מיט די @ 2 קס סופיקס. פֿאַר בייַשפּיל, אויב דיין אָריגינעל בילד איז ימאַגע.פּנג, היט די הויך-האַכלאָטע ווערסיע ווי image@2x.png.
  3. אין דיין HTML E- בריוו קאָד, נוצן די פאלגענדע קאָד צו ווייַזן די בילד:
<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 Word צו מאַכן HTML ימיילז. Microsoft Word ס HTML רענדערינג מאָטאָר קענען זיין גאַנץ אַנדערש פון אנדערע E- בריוו קלייאַנץ און וועב בראַוזערז, אַזוי עס אָפט ריקווייערז ספּעציעל האַנדלינג. די

(gte mso 9) צושטאַנד טשעקס אויב די Microsoft Office ווערסיע איז גרעסער ווי אָדער גלייַך צו 9, וואָס קאָראַספּאַנדז צו Microsoft Office 2000. |(IE) צושטאַנד טשעקס אויב דער קליענט איז Internet Explorer, וואָס איז אָפט געניצט דורך מיקראָסאָפט אַוטלוק.

HTML E- בריוו מיט אָפּטימיזעד רעטינאַ ווייַז בילדער

דאָ איז אַ ביישפּיל פון אַ אָפּרופיק HTML E- בריוו קאָד וואָס דיספּלייז אַ בילד מיט אַ האַכלאָטע אָפּטימיזעד פֿאַר רעטינאַ דיספּלייז:

<!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 טעקסט צו צושטעלן קאָנטעקסט פֿאַר די בילד.
  • אָפּטימיזירן בילדער פֿאַר די וועב צו רעדוצירן טעקע גרייס אָן קאַמפּראַמייזינג בילד קוואַליטעט. דאָס קען אַרייַננעמען ניצן בילד קאַמפּרעשאַן מכשירים, רידוסינג די נומער פון פארבן געניצט אין די בילד, און רעסיזע די בילד צו זיין אָפּטימאַל דימענשאַנז איידער ופּלאָאַדינג עס צו די E- בריוו.
  • ויסמיידן גרויס הינטערגרונט בילדער וואָס קענען פּאַמעלעך די מאַסע צייט פון E- בריוו.
  • אַנימאַטעד GIFs קענען זיין גרעסערע אין טעקע גרייס ווי סטאַטיק בילדער רעכט צו די קייפל ראָמען דארף צו שאַפֿן די אַנאַמיישאַן, זיין זיכער צו האַלטן זיי געזונט אונטער 1 Mb.

Douglas Karr

Douglas Karr איז קמאָ פון OpenINSIGHTS און דער גרינדער פון די Martech Zone. דאָוגלאַס האט געהאָלפֿן דאַזאַנז פון געראָטן MarTech סטאַרטאַפּס, אַסיסטאַד אין די רעכט פלייַס פון איבער $ 5 ביל אין Martech אַקוואַזישאַנז און ינוועסטמאַנץ, און האלט צו אַרוישעלפן קאָמפּאַניעס אין ימפּלאַמענינג און אָטאַמייטינג זייער פארקויפונג און פֿאַרקויף סטראַטעגיעס. דאָוגלאַס איז אַן ינטערנאַשאַנאַלי דערקענט דיגיטאַל טראַנספאָרמאַציע און MarTech עקספּערט און רעדנער. דאָוגלאַס איז אויך אַ פארעפנטלעכט מחבר פון אַ דאַמי ס פירער און אַ געשעפט פירערשאַפט בוך.

Related ארטיקלען

צוריק צו שפּיץ קנעפּל
נאָענט

אַדבלאָקק דיטעקטאַד

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