E-poçt Marketinqi və Avtomatlaşdırma

HTML E-poçtunuzda Retina Ekranları üçün Yüksək Çözünürlüklü Şəkillərdən Necə İstifadə Edilir

Retina displey istifadə etdiyi marketinq terminidir alma insan gözünün tipik baxış məsafəsində ayrı-ayrı pikselləri ayırd edə bilməyəcəyi qədər yüksək piksel sıxlığına malik yüksək ayırdetmə displeyini təsvir etmək. Retinanın ekranı adətən düym başına 300 piksel piksel sıxlığına malikdir (ppi) və ya daha yüksəkdir, bu, piksel sıxlığı 72 ppi olan standart displeydən xeyli yüksəkdir.

Retina displeylər indi displeylər, noutbuklar, mobil qurğular və planşetlər üçün olduqca geniş yayılmışdır. İndi bir çox istehsalçılar Apple-ın Retina displeylərinə uyğun gələn və ya ondan artıq piksel sıxlığı olan yüksək ayırdetmə displeyləri təklif edirlər.

Retina Displey üçün Yüksək Rezolyusiyada Şəkil Göstərmək üçün CSS

Retina displey üçün yüksək ayırdetmə təsvirini yükləmək üçün aşağıdakı CSS kodundan istifadə edə bilərsiniz. Bu kod cihazın piksel sıxlığını müəyyən edir və şəkli yükləyir @ 2x Retina displeylər üçün şəkilçi, digər displeylər üçün standart təsvir ölçüsünü yükləyərkən.

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

Başqa bir yanaşma vektor qrafiklərindən istifadə etmək və ya SVG keyfiyyətini itirmədən istənilən rezolyusiyaya çata bilən şəkillər. Budur bir nümunə:

<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>

Bu nümunədə, SVG kodu istifadə edərək birbaşa HTML e-poçtuna daxil edilmişdir <svg> etiket. The viewBox atribut SVG şəklinin ölçülərini müəyyən edir, eyni zamanda xmlns atribut SVG üçün XML ad sahəsini təyin edir.

The max-width əmlak üzərində qurulur div elementi SVG təsvirinin bu halda maksimum 300px eninə qədər mövcud boş yerə uyğunlaşması üçün avtomatik miqyaslanmasını təmin etmək üçün. Bu, SVG şəkillərinin bütün cihazlarda və e-poçt müştərilərində düzgün göstərilməsini təmin etmək üçün ən yaxşı təcrübədir.

Qeyd: SVG dəstəyi e-poçt müştərisindən asılı olaraq dəyişə bilər, buna görə də SVG şəklinin düzgün göstərilməsini təmin etmək üçün e-poçtunuzu birdən çox müştəri üzərində sınamaq vacibdir.

Retina displeyləri üçün HTML e-poçtlarını kodlaşdırmağın başqa bir yolu istifadə etməkdir srcset. srcset atributunun istifadəsi sizə Retina displeyləri üçün yüksək ayırdetmə təsvirləri təqdim etməyə imkan verir, eyni zamanda şəkillərin aşağı ayırdetmə qabiliyyətinə malik cihazlar üçün düzgün ölçüdə olmasını təmin edir.

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

Bu nümunədə srcset atribut iki şəkil mənbəyi təmin edir: image.jpg 600 piksel və ya daha az təsvir ölçüsünə malik cihazlar üçün və image@2x.jpg 1200 piksel və ya daha çox qətnaməyə malik cihazlar üçün. The 600w1200w deskriptorlar təsvirlərin ölçüsünü piksellərlə müəyyən edir ki, bu da brauzerə cihazın təsvir ölçüsünə əsasən hansı şəklin yüklənəcəyini müəyyən etməyə kömək edir.

Bütün e-poçt müştəriləri dəstəkləmir srcset atribut. üçün dəstək səviyyəsi srcset e-poçt müştərisindən asılı olaraq geniş şəkildə dəyişə bilər, buna görə də şəkillərin düzgün göstərilməsini təmin etmək üçün e-poçtlarınızı bir neçə müştəridə sınamaq vacibdir.

E-poçtdakı Şəkillər üçün HTML Retina Ekranları üçün Optimallaşdırılmışdır

retina displeyləri üçün optimallaşdırılmış qətnamə ilə şəkli düzgün göstərəcək cavab verən HTML e-poçtunu kodlaşdırmaq mümkündür. Budur:

  1. E-poçtda göstərmək istədiyiniz faktiki təsvirin ölçüsündən iki qat böyük olan yüksək keyfiyyətli şəkil yaradın. Məsələn, 300×200 şəkil göstərmək istəyirsinizsə, 600×400 şəkil yaradın.
  2. ilə yüksək qətnamə şəklini saxlayın @ 2x şəkilçi. Məsələn, orijinal şəklinizdirsə image.png, yüksək qətnamə versiyasını olaraq qeyd edin image@2x.png.
  3. HTML e-poçt kodunuzda şəkli göstərmək üçün aşağıdakı kodu istifadə edin:
<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)]> HTML e-poçtlarını göstərmək üçün Microsoft Word istifadə edən Microsoft Outlook-un xüsusi versiyalarını hədəfləmək üçün istifadə edilən şərti şərhdir. Microsoft Word-ün HTML göstərmə mühərriki digər e-poçt müştəriləri və veb brauzerlərindən tamamilə fərqli ola bilər, buna görə də çox vaxt xüsusi işləmə tələb olunur. The

(gte mso 9) şərt Microsoft Office versiyasının Microsoft Office 9-ə uyğun gələn 2000-dan böyük və ya ona bərabər olub olmadığını yoxlayır. |(IE) şərt müştərinin Microsoft Outlook tərəfindən tez-tez istifadə olunan Internet Explorer olub olmadığını yoxlayır.

Retina Ekranı Optimize Edilmiş Şəkillərlə HTML E-poçt

Budur, retina displeyləri üçün optimallaşdırılmış qətnamə ilə təsviri göstərən cavab verən HTML e-poçt koduna bir nümunə:

<!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>

Retina Ekran Görüntüsü haqqında göstərişlər

Retina displeyləri üçün optimallaşdırılmış şəkillər üçün HTML E-poçtlarınızı optimallaşdırmaq üçün bəzi əlavə məsləhətlər:

  • Həmişə şəkil etiketlərində istifadə olunduğundan əmin olun alt şəkil üçün kontekst təmin etmək üçün mətn.
  • Şəkil keyfiyyətinə zərər vermədən fayl ölçüsünü azaltmaq üçün şəkilləri internet üçün optimallaşdırın. Bura istifadə daxil ola bilər şəkil sıxılma alətlər, təsvirdə istifadə olunan rənglərin sayını azaltmaq və e-poçta yükləməzdən əvvəl şəkli optimal ölçülərə qədər dəyişdirmək.
  • E-poçt yükləmə vaxtını yavaşlatan böyük fon şəkillərindən çəkinin.
  • Animasiya yaratmaq üçün lazım olan çoxsaylı çərçivələrə görə animasiyalı GIF-lər fayl ölçüsünə görə statik şəkillərdən daha böyük ola bilər, onları 1-dən aşağı saxladığınızdan əmin olun. Mb.

Douglas Karr

Douglas Karr CMO-dur OpenINSIGHTS və təsisçisi Martech Zone. Duqlas onlarla uğurlu MarTech startapına kömək edib, Martech-in satınalmalarında və investisiyalarında 5 milyard dollardan çox dəyərində lazımi araşdırmaya kömək edib və şirkətlərə satış və marketinq strategiyalarının həyata keçirilməsində və avtomatlaşdırılmasında kömək etməyə davam edir. Duqlas beynəlxalq səviyyədə tanınan rəqəmsal transformasiya və MarTech eksperti və məruzəçisidir. Douglas həm də Dummie's guide və biznes liderliyi kitabının nəşr edilmiş müəllifidir.

əlaqəli məqalələr

Başa dön düyməsini basın
yaxın

Adblock Aşkarlandı

Martech Zone bu məzmunu heç bir ödəniş etmədən sizə təqdim edə bilir, çünki biz reklam gəlirləri, filial bağlantıları və sponsorluqlar vasitəsilə saytımızdan pul qazanırıq. Saytımıza baxarkən reklam blokerinizi silsəniz çox şad olarıq.