כיצד להשתמש בתמונות ברזולוציה גבוהה עבור תצוגות רשתית בדוא"ל HTML שלך
תצוגת רשתית היא מונח שיווקי בו משתמשים תפוח עץ לתאר תצוגה ברזולוציה גבוהה שיש לה צפיפות פיקסלים גבוהה מספיק כדי שהעין האנושית אינה מסוגלת להבחין בפיקסלים בודדים במרחק צפייה טיפוסי. למסך רשתית יש בדרך כלל צפיפות פיקסלים של 300 פיקסלים לאינץ' (ppi) או גבוה יותר, שהוא גבוה משמעותית מתצוגה רגילה עם צפיפות פיקסלים של 72 ppi.
צגי Retina הם כעת די מיינסטרים עבור צגים, מחשבים ניידים, מכשירים ניידים וטאבלטים. יצרנים רבים מציעים כעת צגים ברזולוציה גבוהה עם צפיפות פיקסלים התואמים או עולים על אלה של צגי הרטינה של אפל.
CSS להצגת תמונה ברזולוציה גבוהה יותר עבור תצוגת רשתית
אתה יכול להשתמש בקוד ה-CSS הבא כדי לטעון תמונה ברזולוציה גבוהה עבור תצוגת Retina. קוד זה מזהה את צפיפות הפיקסלים של המכשיר וטוען את התמונה עם @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 מוצגת כראוי.
דרך נוספת לקידוד דוא"ל HTML עבור תצוגות רשתית היא להשתמש srcset
. שימוש בתכונה srcset מאפשר לך לספק תמונות ברזולוציה גבוהה עבור תצוגות רשתית תוך הקפדה על גודל התמונות כראוי עבור התקנים ברזולוציה נמוכה יותר.
<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 פיקסלים או יותר. ה 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. מנוע עיבוד ה-HTML של Microsoft Word יכול להיות שונה למדי מלקוחות דוא"ל ומדפדפני אינטרנט אחרים, ולכן הוא דורש לעתים קרובות טיפול מיוחד. ה
(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 עבור תמונות המותאמות לתצוגות רשתית:
- הקפד שתמיד תגי התמונה שלך יכללו שימוש
alt
טקסט כדי לספק הקשר לתמונה. - בצע אופטימיזציה של תמונות עבור האינטרנט כדי להקטין את גודל הקובץ מבלי לפגוע באיכות התמונה. זה יכול לכלול שימוש דחיסת תמונה כלים, צמצום מספר הצבעים המשמשים בתמונה ושינוי גודל התמונה למימדים האופטימליים שלה לפני העלאתה למייל.
- הימנע מתמונות רקע גדולות שעלולות להאט את זמני טעינת האימייל.
- קובצי GIF מונפשים יכולים להיות גדולים יותר בגודל הקובץ מאשר תמונות סטטיות בגלל מספר המסגרות הדרושות ליצירת האנימציה, הקפד לשמור אותם הרבה מתחת ל-1 Mb.