ელექტრონული ფოსტის მარკეტინგი და ავტომატიზაცია

როგორ გამოვიყენოთ მაღალი რეზოლუციის სურათები ბადურის ჩვენებისთვის თქვენს HTML ელფოსტაში

ბადურის ჩვენება არის მარკეტინგული ტერმინი, რომელსაც იყენებს Apple მაღალი გარჩევადობის დისპლეის აღსაწერად, რომელსაც აქვს საკმარისად მაღალი პიქსელის სიმკვრივე, რომ ადამიანის თვალს არ შეუძლია ცალკეული პიქსელების გარჩევა ტიპიური სანახავი მანძილზე. ბადურის ეკრანს, როგორც წესი, აქვს პიქსელის სიმკვრივე 300 პიქსელი ინჩზე (ppi) ან უფრო მაღალი, რაც მნიშვნელოვნად აღემატება სტანდარტულ ეკრანს, რომლის პიქსელის სიმკვრივეა 72 ppi.

ბადურის დისპლეები ახლა საკმაოდ ძირითადია ეკრანებისთვის, ლეპტოპებისთვის, მობილური მოწყობილობებისთვის და ტაბლეტებისთვის. ახლა ბევრი მწარმოებელი გვთავაზობს მაღალი გარჩევადობის დისპლეებს პიქსელის სიმკვრივით, რომელიც ემთხვევა ან აღემატება Apple-ის Retina დისპლეებს.

CSS ბადურის ეკრანისთვის უფრო მაღალი რეზოლუციის გამოსახულების ჩვენებისთვის

შეგიძლიათ გამოიყენოთ შემდეგი 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> წარწერა viewBox ატრიბუტი განსაზღვრავს SVG გამოსახულების ზომებს, ხოლო xmlns ატრიბუტი განსაზღვრავს XML სახელთა სივრცეს SVG-სთვის.

ის 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)]> არის პირობითი კომენტარი, რომელიც გამოიყენება Microsoft Outlook-ის კონკრეტული ვერსიების დასამიზნებლად, რომელიც იყენებს Microsoft Word-ს HTML ელფოსტის გადასაცემად. Microsoft Word-ის HTML რენდერის ძრავა შეიძლება საკმაოდ განსხვავდებოდეს ელ.ფოსტის სხვა კლიენტებისგან და ვებ ბრაუზერებისგან, ამიტომ ის ხშირად მოითხოვს სპეციალურ დამუშავებას. The

(gte mso 9) მდგომარეობა ამოწმებს, არის თუ არა Microsoft Office-ის ვერსია 9-ზე მეტი ან ტოლი, რაც შეესაბამება Microsoft Office 2000-ს. |(IE) მდგომარეობა ამოწმებს არის თუ არა კლიენტი Internet Explorer, რომელსაც ხშირად იყენებს Microsoft Outlook.

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 ელფოსტის ოპტიმიზაციის შესახებ Retina დისპლეებისთვის ოპტიმიზებული სურათებისთვის:

  • დარწმუნდით, რომ თქვენი სურათის ტეგები ყოველთვის შეიცავს გამოყენებას alt ტექსტი გამოსახულების კონტექსტისთვის.
  • სურათების ოპტიმიზაცია ვებისთვის ფაილის ზომის შესამცირებლად გამოსახულების ხარისხის კომპრომისის გარეშე. ეს შეიძლება მოიცავდეს გამოყენებას გამოსახულების შეკუმშვა ინსტრუმენტები, სურათზე გამოყენებული ფერების რაოდენობის შემცირება და სურათის ზომის შეცვლა მის ოპტიმალურ ზომებამდე ელფოსტაზე ატვირთვამდე.
  • მოერიდეთ ფონის დიდ სურათებს, რომლებსაც შეუძლიათ შეანელონ ელ.ფოსტის დატვირთვის დრო.
  • ანიმაციური GIF-ები შეიძლება იყოს უფრო დიდი ფაილის ზომით, ვიდრე სტატიკური გამოსახულებები ანიმაციის შესაქმნელად საჭირო მრავალი ჩარჩოს გამო, დარწმუნდით, რომ შეინახეთ ისინი 1-ზე ნაკლები. Mb.

Douglas Karr

Douglas Karr არის CMO of OpenINSIGHTS და დამფუძნებელი Martech Zone. დუგლასი დაეხმარა ათეულობით წარმატებულ MarTech სტარტაპს, დაეხმარა 5 მილიარდ დოლარზე მეტის შეძენისა და ინვესტიციების გამომუშავებაში და აგრძელებს კომპანიებს მათი გაყიდვებისა და მარკეტინგული სტრატეგიების განხორციელებაში და ავტომატიზაციაში. დუგლასი არის საერთაშორისოდ აღიარებული ციფრული ტრანსფორმაციის და MarTech ექსპერტი და სპიკერი. დუგლასი ასევე არის Dummie's-ის სახელმძღვანელოს და ბიზნეს ლიდერობის წიგნის გამოქვეყნებული ავტორი.

დაკავშირებული სტატიები

დაბრუნება ღილაკზე
დახურვა

Adblock აღმოჩენილია

Martech Zone შეუძლია მოგაწოდოთ ეს კონტენტი უფასოდ, რადგან ჩვენ ვაკეთებთ ჩვენი საიტის მონეტიზაციას რეკლამის შემოსავლების, შვილობილი ბმულების და სპონსორების მეშვეობით. ჩვენ მადლობელი ვიქნებით, თუ ჩვენს საიტს ნახულობთ თქვენს რეკლამის ბლოკერს.