როგორ გამოვიყენოთ მაღალი რეზოლუციის სურათები ბადურის ჩვენებისთვის თქვენს 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 ელფოსტის კოდირება, რომელიც სათანადოდ აჩვენებს სურათს ბადურის ჩვენებისთვის ოპტიმიზირებული რეზოლუციით. Აი როგორ:
- შექმენით მაღალი გარჩევადობის სურათი, რომელიც ორჯერ მეტია იმ რეალურ სურათზე, რომლის ჩვენებაც გსურთ ელფოსტაში. მაგალითად, თუ გსურთ 300×200 გამოსახულების ჩვენება, შექმენით 600×400 გამოსახულება.
- შეინახეთ მაღალი გარჩევადობის სურათი @ 2x სუფიქსი. მაგალითად, თუ თქვენი ორიგინალური სურათია image.png, შეინახეთ მაღალი გარჩევადობის ვერსია როგორც image@2x.png.
- თქვენს 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.