Электрондық пошта маркетингі және автоматтандыру

HTML электрондық поштаңыздағы ретина дисплейлері үшін жоғары ажыратымдылықтағы кескіндерді қалай пайдалануға болады

Retina дисплейі маркетингтік терминді қолданады алма Адам көзі әдеттегі көру қашықтығында жеке пикселдерді ажырата алмайтындай жоғары пиксель тығыздығы бар жоғары ажыратымдылықтағы дисплейді сипаттау үшін. Торлы дисплейдің әдетте дюйміне 300 пиксель тығыздығы болады (ppi) немесе одан жоғары, бұл пиксель тығыздығы 72 ppi стандартты дисплейден айтарлықтай жоғары.

Retina дисплейлері қазір дисплейлер, ноутбуктер, мобильді құрылғылар және планшеттер үшін өте танымал. Көптеген өндірушілер қазір Apple компаниясының Retina дисплейлеріне сәйкес келетін немесе одан асатын пиксель тығыздығы бар жоғары ажыратымдылығы бар дисплейлерді ұсынады.

Retina дисплейіне арналған жоғарырақ ажыратымдылықтағы кескінді көрсету үшін CSS

Retina дисплейі үшін жоғары ажыратымдылықтағы кескінді жүктеу үшін келесі CSS кодын пайдалануға болады. Бұл код құрылғының пиксель тығыздығын анықтайды және кескінді жүктейді @ 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> тег The viewBox атрибут SVG кескінінің өлшемдерін анықтайды, ал xmlns атрибут SVG үшін XML аттар кеңістігін көрсетеді.

The max-width қасиетіне орнатылған div Бұл жағдайда SVG кескінінің максималды ені 300 пиксельге дейін қолжетімді кеңістікке сәйкес келетін автоматты түрде масштабталуын қамтамасыз ету үшін элемент. Бұл 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. көмегімен жоғары ажыратымдылықтағы кескінді сақтаңыз @ 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)]> 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>

Retina дисплей кескіні бойынша кеңестер

Мұнда Retina дисплейлері үшін оңтайландырылған кескіндер үшін HTML электрондық пошталарын оңтайландыру бойынша кейбір қосымша кеңестер берілген:

  • Кескін тегтерінде әрқашан пайдалану болуын қамтамасыз етіңіз alt кескінге контекст беру үшін мәтін.
  • Кескін сапасын бұзбай файл өлшемін азайту үшін кескіндерді веб үшін оңтайландырыңыз. Бұл пайдалануды қамтуы мүмкін кескінді сығымдау құралдар, суретте қолданылатын түстердің санын азайту және кескінді электрондық поштаға жүктеп салмас бұрын оның оңтайлы өлшемдерін өзгерту.
  • Электрондық поштаны жүктеу уақытын баяулататын үлкен фондық кескіндерден аулақ болыңыз.
  • Анимация жасау үшін қажет бірнеше кадрларға байланысты анимациялық GIF файлдарының өлшемі статикалық кескіндерге қарағанда үлкенірек болуы мүмкін, оларды 1-ден төмен ұстауды ұмытпаңыз. Mb.

Douglas Karr

Douglas Karr CMO болып табылады OpenINSIGHTS және негізін қалаушы Martech Zone. Дуглас ондаған табысты MarTech стартаптарына көмектесті, Martech сатып алулары мен инвестицияларына 5 миллиард доллардан астам қаражатты мұқият тексеруге көмектесті және компанияларға сату және маркетинг стратегияларын енгізу және автоматтандыруға көмектесуді жалғастыруда. Дуглас – халықаралық деңгейде танылған цифрлық трансформация және MarTech сарапшысы және спикері. Дуглас сонымен қатар Dummie's guide және бизнес көшбасшылығы кітабының жарияланған авторы.

Қатысты Мақалалар

Басына оралу
жақын

Adblock анықталды

Martech Zone Сізге бұл мазмұнды ақысыз ұсына алады, өйткені біз сайтымызды жарнамадан түсетін табыс, серіктестік сілтемелері және демеушілік арқылы монетизациялаймыз. Сайтымызды көрген кезде жарнама блокаторын алып тастасаңыз, біз ризамыз.