Имэйлийн маркетинг ба автоматжуулалт

Таны HTML имэйл дэх торлог бүрхэвчийн дэлгэцийн өндөр нарийвчлалтай зургийг хэрхэн ашиглах вэ

Retina display гэдэг нь маркетингийн нэр томъёо юм Apple-ийн Хүний нүд ердийн харах зайд тус тусдаа пикселийг ялгах чадваргүй хангалттай өндөр пикселийн нягтралтай өндөр нарийвчлалтай дэлгэцийг тайлбарлах. Нүдний торлог бүрхэвч нь ихэвчлэн нэг инч тутамд 300 пикселийн нягтралтай байдаг.PPI) эсвэл түүнээс дээш, энэ нь 72 ppi пикселийн нягтралтай стандарт дэлгэцээс хамаагүй өндөр байна.

Retina дэлгэц нь одоо дэлгэц, зөөврийн компьютер, хөдөлгөөнт төхөөрөмж, таблетуудад нэлээд түгээмэл хэрэглэгддэг. Одоо олон үйлдвэрлэгчид Apple-ийн Retina дэлгэцтэй таарч эсвэл илүү пикселийн нягтралтай өндөр нарийвчлалтай дэлгэцийг санал болгож байна.

Торлог бүрхэвчийн дэлгэцийн өндөр нарийвчлалтай зургийг харуулах CSS

Та Retina дэлгэцийн өндөр нарийвчлалтай зургийг ачаалахдаа дараах CSS кодыг ашиглаж болно. Энэ код нь төхөөрөмжийн пикселийн нягтралыг илрүүлж, дүрсийг ачаална @ 2х 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> шошго. The viewBox шинж чанар нь SVG зургийн хэмжээсийг тодорхойлдог бол xmlns шинж чанар нь SVG-д зориулсан XML нэрийн орон зайг тодорхойлдог.

The max-width шинж чанар дээр тавигдсан div Энэ тохиолдолд SVG дүрс нь хамгийн ихдээ 300px өргөнтэй байх боломжтой зайд автоматаар томорч байгааг баталгаажуулах элемент. Энэ нь SVG зургийг бүх төхөөрөмж болон имэйл клиент дээр зөв харуулах хамгийн сайн туршлага юм.

Тайлбар: SVG дэмжлэг нь имэйл клиентээс хамаарч өөр өөр байж болно, тиймээс SVG дүрсийг зөв харуулахын тулд олон үйлчлүүлэгчид имэйлээ шалгах нь чухал юм.

Retina дэлгэцийн HTML имэйлийг кодлох өөр нэг арга бол ашиглах явдал юм 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 пиксел ба түүнээс дээш нарийвчлалтай төхөөрөмжүүдийн хувьд. The 600w болон 1200w Тодорхойлогч нь зургийн хэмжээг пикселээр зааж өгдөг бөгөөд энэ нь хөтчид төхөөрөмжийн нягтралд үндэслэн аль зургийг татаж авахыг тодорхойлоход тусалдаг.

Бүх имэйл клиентүүд дэмждэггүй srcset шинж чанар. дэмжлэг үзүүлэх түвшин srcset Имэйл клиентээс хамааран өөр өөр байж болох тул зургуудыг зөв харуулахын тулд олон үйлчлүүлэгч дээр имэйлээ шалгах нь чухал юм.

Торлог бүрхэвчийн дэлгэцийн хувьд оновчтой болгосон цахим шуудангийн зурагт зориулсан HTML

Торлог бүрхэвчийн дэлгэцэнд оновчтой нарийвчлалтайгаар зургийг зөв харуулах хариу үйлдэл үзүүлэх HTML имэйлийг кодлох боломжтой. Үүнд:

  1. Имэйлд харуулахыг хүссэн бодит зургаас хоёр дахин том өндөр нарийвчлалтай зураг үүсгээрэй. Жишээлбэл, хэрэв та 300 × 200 хэмжээтэй зураг харуулахыг хүсвэл 600 × 400 зураг үүсгэ.
  2. -ээр өндөр нарийвчлалтай зургийг хадгална уу @ 2х дагавар. Жишээлбэл, хэрэв таны анхны зураг бол 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)]> HTML имэйлийг гаргахдаа Microsoft Word ашигладаг Microsoft Outlook-ын тодорхой хувилбаруудад зориулагдсан нөхцөлт тайлбар юм. Microsoft Word-ын HTML дүрслэх систем нь бусад имэйл клиентүүд болон вэб хөтчүүдээс эрс ялгаатай байж болох тул энэ нь ихэвчлэн тусгай зохицуулалт шаарддаг. The

(gte mso 9) нөхцөл нь Microsoft Office хувилбар нь Microsoft Office 9-тай тохирч байгаа 2000-ээс их эсвэл тэнцүү эсэхийг шалгадаг. |(IE) нөхцөл нь үйлчлүүлэгч нь Microsoft Outlook-ын ихэвчлэн ашигладаг Internet Explorer мөн эсэхийг шалгадаг.

Торлог бүрхэвчээр дүрсэлсэн 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 юм OpenINSIGHTS болон үүсгэн байгуулагч Martech Zone. Дуглас олон арван амжилттай MarTech стартапуудад тусалж, Martech-ийн худалдан авалт, хөрөнгө оруулалтад 5 тэрбум гаруй долларын зохих шалгалт хийхэд тусалсан бөгөөд компаниудад борлуулалт, маркетингийн стратегиа хэрэгжүүлэх, автоматжуулахад нь тусалсаар байна. Дуглас бол олон улсад хүлээн зөвшөөрөгдсөн дижитал хувиргалт, MarTech мэргэжилтэн, илтгэгч юм. Дуглас бол Даммигийн гарын авлага, бизнесийн манлайллын номыг хэвлүүлсэн зохиолч юм.

холбоотой зүйл

Дээшээ буцах товч
Хаах

Adblock илэрсэн

Martech Zone Бид зар сурталчилгааны орлого, түншлэлийн холбоос, ивээн тэтгэгчээр дамжуулан сайтаа мөнгөжүүлдэг учраас энэ агуулгыг танд ямар ч үнэгүйгээр өгөх боломжтой. Та манай сайтыг үзэж байхдаа зар хориглогчоо устгавал бид талархах болно.