Πώς να χρησιμοποιήσετε εικόνες υψηλής ανάλυσης για οθόνες αμφιβληστροειδούς στο HTML email σας
Retina display είναι ένας όρος μάρκετινγκ που χρησιμοποιείται από Apple για να περιγράψει μια οθόνη υψηλής ανάλυσης που έχει πυκνότητα pixel αρκετά υψηλή ώστε το ανθρώπινο μάτι να μην μπορεί να διακρίνει μεμονωμένα pixel σε μια τυπική απόσταση θέασης. Μια οθόνη αμφιβληστροειδούς έχει συνήθως πυκνότητα pixel 300 pixel ανά ίντσα (ppi) ή υψηλότερη, η οποία είναι σημαντικά υψηλότερη από μια τυπική οθόνη με πυκνότητα pixel 72 ppi.
Οι οθόνες Retina είναι πλέον αρκετά mainstream για οθόνες, φορητούς υπολογιστές, φορητές συσκευές και tablet. Πολλοί κατασκευαστές προσφέρουν πλέον οθόνες υψηλής ανάλυσης με πυκνότητες pixel που ταιριάζουν ή υπερβαίνουν αυτές των οθονών Retina της Apple.
CSS για εμφάνιση εικόνας υψηλότερης ανάλυσης για οθόνη αμφιβληστροειδούς
Μπορείτε να χρησιμοποιήσετε τον ακόλουθο κώδικα CSS για να φορτώσετε μια εικόνα υψηλής ανάλυσης για μια οθόνη Retina. Αυτός ο κωδικός ανιχνεύει την πυκνότητα pixel της συσκευής και φορτώνει την εικόνα με το @ 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 ενσωματώνεται απευθείας στο email HTML χρησιμοποιώντας το <svg>
ετικέτα. ο viewBox
Το χαρακτηριστικό ορίζει τις διαστάσεις της εικόνας SVG, ενώ το xmlns
Το χαρακτηριστικό καθορίζει τον χώρο ονομάτων XML για το SVG.
Η max-width
ακίνητο βρίσκεται στο div
στοιχείο για να διασφαλιστεί ότι η εικόνα SVG κλιμακώνεται αυτόματα για να χωρέσει στον διαθέσιμο χώρο, έως ένα μέγιστο πλάτος 300 εικονοστοιχείων σε αυτήν την περίπτωση. Αυτή είναι μια βέλτιστη πρακτική για τη διασφάλιση ότι οι εικόνες SVG εμφανίζονται σωστά σε όλες τις συσκευές και τα προγράμματα-πελάτες email.
Σημείωση: Η υποστήριξη SVG μπορεί να διαφέρει ανάλογα με το πρόγραμμα-πελάτη email, επομένως είναι σημαντικό να δοκιμάσετε το email σας σε πολλούς πελάτες για να βεβαιωθείτε ότι η εικόνα SVG εμφανίζεται σωστά.
Ένας άλλος τρόπος κωδικοποίησης email HTML για οθόνες Retina είναι να χρησιμοποιηθεί 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 pixel ή μικρότερη και image@2x.jpg
για συσκευές με ανάλυση 1200 pixel ή μεγαλύτερη. ο 600w
και 1200w
Οι περιγραφείς καθορίζουν το μέγεθος των εικόνων σε pixel, κάτι που βοηθά το πρόγραμμα περιήγησης να καθορίσει ποια εικόνα θα κατεβάσει με βάση την ανάλυση της συσκευής.
Δεν υποστηρίζουν όλα τα προγράμματα-πελάτες email το srcset
Χαρακτηριστικό. Το επίπεδο υποστήριξης για srcset
μπορεί να διαφέρει πολύ ανάλογα με το πρόγραμμα-πελάτη email, επομένως είναι σημαντικό να δοκιμάζετε τα email σας σε πολλούς πελάτες για να βεβαιωθείτε ότι οι εικόνες εμφανίζονται σωστά.
HTML για εικόνες σε email Βελτιστοποιημένο για οθόνες Retina
είναι δυνατό να κωδικοποιήσετε ένα αποκριτικό email HTML που θα εμφανίζει σωστά μια εικόνα σε ανάλυση βελτιστοποιημένη για οθόνες αμφιβληστροειδούς. Δείτε πώς:
- Δημιουργήστε μια εικόνα υψηλής ανάλυσης που έχει διπλάσιο μέγεθος από την πραγματική εικόνα που θέλετε να εμφανίζεται στο email. Για παράδειγμα, εάν θέλετε να εμφανίσετε μια εικόνα 300×200, δημιουργήστε μια εικόνα 600×400.
- Αποθηκεύστε την εικόνα υψηλής ανάλυσης με το @ 2χ κατάληξη. Για παράδειγμα, εάν η αρχική σας εικόνα είναι 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. Η μηχανή απόδοσης HTML του Microsoft Word μπορεί να είναι αρκετά διαφορετική από άλλα προγράμματα-πελάτες ηλεκτρονικού ταχυδρομείου και προγράμματα περιήγησης ιστού, επομένως συχνά απαιτεί ειδικό χειρισμό. ο
(gte mso 9)
η συνθήκη ελέγχει εάν η έκδοση του Microsoft Office είναι μεγαλύτερη ή ίση με 9, που αντιστοιχεί στο Microsoft Office 2000. |(IE)
η συνθήκη ελέγχει εάν ο υπολογιστής-πελάτης είναι ο Internet Explorer, ο οποίος χρησιμοποιείται συχνά από το Microsoft Outlook. Email HTML με βελτιστοποιημένες εικόνες εμφάνισης Retina
Ακολουθεί ένα παράδειγμα αποκριτικού κώδικα email 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
κείμενο για την παροχή πλαισίου για την εικόνα. - Βελτιστοποιήστε τις εικόνες για τον Ιστό για να μειώσετε το μέγεθος του αρχείου χωρίς συμβιβασμούς στην ποιότητα της εικόνας. Αυτό μπορεί να περιλαμβάνει τη χρήση συμπίεση εικόνας εργαλεία, μειώνοντας τον αριθμό των χρωμάτων που χρησιμοποιούνται στην εικόνα και αλλάξτε το μέγεθος της εικόνας στις βέλτιστες διαστάσεις της πριν τη μεταφορτώσετε στο email.
- Αποφύγετε μεγάλες εικόνες φόντου που μπορεί να επιβραδύνουν τους χρόνους φόρτωσης email.
- Τα κινούμενα GIF μπορεί να είναι μεγαλύτερα σε μέγεθος αρχείου από τις στατικές εικόνες λόγω των πολλαπλών καρέ που απαιτούνται για τη δημιουργία της κινούμενης εικόνας, φροντίστε να τα διατηρήσετε πολύ κάτω από 1 Mb.