Elektron pochta marketingi va avtomatlashtirish

Sizning HTML elektron pochtangizda Retina displeylari uchun yuqori aniqlikdagi rasmlardan qanday foydalanish kerak

Retina displey - bu marketing atamasi olma inson ko'zi odatdagi ko'rish masofasida alohida piksellarni ajrata olmaydigan darajada yuqori piksel zichligiga ega bo'lgan yuqori aniqlikdagi displeyni tasvirlash uchun. Retina displey odatda bir dyuym uchun 300 piksel piksel zichligiga ega (ppi) yoki undan yuqori, bu piksel zichligi 72 ppi bo'lgan standart displeydan sezilarli darajada yuqori.

Retina displeylari endi displeylar, noutbuklar, mobil qurilmalar va planshetlar uchun juda mashhur. Ko'pgina ishlab chiqaruvchilar hozirda Apple'ning Retina displeylariga mos keladigan yoki undan yuqori piksel zichligiga ega yuqori aniqlikdagi displeylarni taklif qilmoqdalar.

Retina displey uchun yuqori aniqlikdagi tasvirni ko'rsatish uchun CSS

Retina displey uchun yuqori aniqlikdagi tasvirni yuklash uchun quyidagi CSS kodidan foydalanishingiz mumkin. Ushbu kod qurilmaning piksel zichligini aniqlaydi va tasvirni yuklaydi @ 2x Retina displeylari uchun qo'shimcha, boshqa displeylar uchun standart o'lchamdagi tasvirni yuklashda.

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

Yana bir yondashuv vektor grafiklardan foydalanish yoki SVG sifatini yo'qotmasdan har qanday piksellar sonini o'lchash mumkin bo'lgan tasvirlar. Mana bir misol:

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

Ushbu misolda, SVG kodi to'g'ridan-to'g'ri HTML elektron pochtasiga o'rnatilgan <svg> teg The viewBox atribut SVG tasvirining o'lchamlarini belgilaydi, shu bilan birga xmlns atribut SVG uchun XML nom maydonini belgilaydi.

The max-width mulk ustiga o'rnatiladi div element SVG tasviri avtomatik ravishda mavjud bo'sh joyga mos kelishini ta'minlash uchun, bu holda maksimal kengligi 300px gacha. Bu SVG tasvirlarining barcha qurilmalar va elektron pochta mijozlarida toʻgʻri koʻrsatilishini taʼminlashning eng yaxshi amaliyotidir.

Eslatma: SVG yordami elektron pochta mijoziga qarab farq qilishi mumkin, shuning uchun SVG tasviri toʻgʻri koʻrsatilishini taʼminlash uchun elektron pochtangizni bir nechta mijozlarda sinab koʻrish muhim.

Retina displeylari uchun HTML elektron pochta xabarlarini kodlashning yana bir usuli foydalanishdir srcset. srcset atributidan foydalanish sizga Retina displeylari uchun yuqori aniqlikdagi tasvirlarni taqdim etish imkonini beradi, shu bilan birga tasvirlar pastroq piksellar soniga ega qurilmalar uchun to'g'ri o'lchamda bo'lishini ta'minlaydi.

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

Ushbu misolda, srcset atribut ikkita rasm manbasini beradi: image.jpg o'lchamlari 600 piksel yoki undan kam bo'lgan qurilmalar uchun va image@2x.jpg 1200 piksel yoki undan ortiq piksellar soniga ega qurilmalar uchun. The 600w va 1200w deskriptorlar piksellardagi tasvirlar hajmini belgilaydi, bu esa brauzerga qurilmaning ruxsati asosida qaysi tasvirni yuklab olishni aniqlashga yordam beradi.

Barcha elektron pochta mijozlari qo'llab-quvvatlamaydi srcset xususiyat. Qo'llab-quvvatlash darajasi srcset e-pochta mijoziga qarab keng farq qilishi mumkin, shuning uchun tasvirlar to'g'ri ko'rsatilishini ta'minlash uchun elektron pochta xabarlaringizni bir nechta mijozlarda sinab ko'rish muhimdir.

Retina displeylari uchun optimallashtirilgan elektron pochtadagi rasmlar uchun HTML

retina displeylari uchun optimallashtirilgan ruxsatda tasvirni to'g'ri ko'rsatadigan sezgir HTML elektron pochtani kodlash mumkin. Mana shunday:

  1. Elektron pochtada ko'rsatmoqchi bo'lgan haqiqiy tasvirdan ikki baravar katta bo'lgan yuqori aniqlikdagi tasvirni yarating. Misol uchun, agar siz 300 × 200 tasvirni namoyish qilmoqchi bo'lsangiz, 600 × 400 tasvirni yarating.
  2. bilan yuqori aniqlikdagi tasvirni saqlang @ 2x qo'shimchasi. Misol uchun, agar sizning asl rasmingiz bo'lsa image.png, yuqori aniqlikdagi versiyani sifatida saqlang image@2x.png.
  3. Tasvirni ko'rsatish uchun HTML elektron pochta kodida quyidagi koddan foydalaning:
<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)]> shartli izoh boʻlib, u HTML elektron pochta xabarlarini koʻrsatish uchun Microsoft Word dasturidan foydalanadigan Microsoft Outlook-ning muayyan versiyalariga moʻljallangan. Microsoft Word-ning HTML renderlash mexanizmi boshqa elektron pochta mijozlari va veb-brauzerlardan ancha farq qilishi mumkin, shuning uchun u ko'pincha maxsus ishlov berishni talab qiladi. The

(gte mso 9) shart Microsoft Office versiyasi Microsoft Office 9 ga mos keladigan 2000 dan katta yoki teng ekanligini tekshiradi. |(IE) holat mijozning Microsoft Outlook tomonidan tez-tez ishlatiladigan Internet Explorer ekanligini tekshiradi.

Retina displeyli optimallashtirilgan tasvirlar bilan HTML elektron pochta

Retina displeylari uchun optimallashtirilgan ruxsatda tasvirni aks ettiruvchi sezgir HTML elektron pochta kodiga misol:

<!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 displey tasviri bo'yicha maslahatlar

Retina displeylari uchun optimallashtirilgan tasvirlar uchun HTML elektron pochtangizni optimallashtirish bo'yicha ba'zi qo'shimcha maslahatlar:

  • Har doim rasm teglaringizda foydalanishni o'z ichiga olganligiga ishonch hosil qiling alt tasvir uchun kontekstni ta'minlash uchun matn.
  • Tasvir sifatini buzmasdan fayl hajmini kamaytirish uchun tasvirlarni veb uchun optimallashtiring. Bu foydalanishni o'z ichiga olishi mumkin tasvirni siqish asboblar, tasvirda ishlatiladigan ranglar sonini kamaytirish va elektron pochtaga yuklashdan oldin tasvirni optimal o'lchamlariga o'zgartirish.
  • Elektron pochtani yuklash vaqtini sekinlashtiradigan katta fon tasvirlaridan saqlaning.
  • Animatsiya yaratish uchun zarur bo'lgan bir nechta ramkalar tufayli animatsiyali GIF-lar statik tasvirlarga qaraganda fayl hajmi bo'yicha kattaroq bo'lishi mumkin, ularni 1 dan kam saqlashni unutmang Mb.

Douglas Karr

Douglas Karr ning CMO hisoblanadi OpenINSIGHTS va asoschisi Martech Zone. Duglas o'nlab muvaffaqiyatli MarTech startaplariga yordam berdi, Martechni sotib olish va investitsiyalarida 5 milliard dollardan ortiq mablag'ni sinchkovlik bilan tekshirishda yordam berdi va kompaniyalarga savdo va marketing strategiyalarini amalga oshirish va avtomatlashtirishda yordam berishda davom etmoqda. Duglas xalqaro miqyosda tan olingan raqamli transformatsiya va MarTech mutaxassisi va ma'ruzachisi. Duglas, shuningdek, Dummie's qo'llanmasi va biznes rahbariyati kitobining nashr etilgan muallifi.

Haqida Maqolalar

Yuqoriga qaytish tugmasi
yaqin

Adblock aniqlandi

Martech Zone Sizga ushbu kontentni hech qanday to'lovsiz taqdim eta oladi, chunki biz saytimizni reklama daromadlari, sheriklik havolalari va homiylik orqali monetizatsiya qilamiz. Saytimizni ko'rayotganingizda reklama blokeringizni olib tashlasangiz, biz juda minnatdormiz.