วิธีใช้รูปภาพความละเอียดสูงสำหรับจอภาพเรตินาในอีเมล HTML ของคุณ
จอแสดงผล Retina เป็นคำทางการตลาดที่ใช้โดย Apple เพื่ออธิบายจอแสดงผลความละเอียดสูงที่มีความหนาแน่นของพิกเซลสูงพอที่สายตามนุษย์ไม่สามารถแยกความแตกต่างของพิกเซลแต่ละพิกเซลในระยะการรับชมทั่วไป จอภาพเรตินาโดยทั่วไปมีความหนาแน่นของพิกเซล 300 พิกเซลต่อนิ้ว (ppi) หรือสูงกว่า ซึ่งสูงกว่าจอแสดงผลมาตรฐานที่มีความหนาแน่นของพิกเซล 72 ppi อย่างมาก
ปัจจุบันจอภาพ Retina ค่อนข้างเป็นที่นิยมสำหรับจอภาพ แล็ปท็อป อุปกรณ์พกพา และแท็บเล็ต ปัจจุบันผู้ผลิตหลายรายเสนอจอภาพความละเอียดสูงพร้อมความหนาแน่นของพิกเซลที่เทียบเท่าหรือเกินกว่าจอภาพ Retina ของ Apple
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>
แท็ก NS viewBox
แอตทริบิวต์กำหนดขนาดของภาพ SVG ในขณะที่ xmlns
คุณลักษณะระบุเนมสเปซ XML สำหรับ SVG
พื้นที่ max-width
คุณสมบัติตั้งอยู่บน div
เพื่อให้แน่ใจว่าภาพ SVG จะปรับขนาดโดยอัตโนมัติเพื่อให้พอดีกับพื้นที่ว่าง ซึ่งในกรณีนี้จะมีความกว้างสูงสุด 300px นี่เป็นแนวทางปฏิบัติที่ดีที่สุดเพื่อให้แน่ใจว่าภาพ SVG จะแสดงอย่างถูกต้องบนอุปกรณ์และไคลเอนต์อีเมลทั้งหมด
หมายเหตุ การสนับสนุน SVG อาจแตกต่างกันไปขึ้นอยู่กับไคลเอนต์อีเมลดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องทดสอบอีเมลของคุณกับไคลเอ็นต์หลายๆ ตัวเพื่อให้แน่ใจว่าภาพ SVG แสดงอย่างถูกต้อง
อีกวิธีในการเข้ารหัสอีเมล 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 พิกเซล และ image@2x.jpg
สำหรับอุปกรณ์ที่มีความละเอียดตั้งแต่ 1200 พิกเซลขึ้นไป เดอะ 600w
และ 1200w
ตัวอธิบายระบุขนาดของรูปภาพเป็นพิกเซล ซึ่งช่วยให้เบราว์เซอร์กำหนดรูปภาพที่จะดาวน์โหลดตามความละเอียดของอุปกรณ์
ไคลเอนต์อีเมลบางโปรแกรมไม่รองรับ srcset
คุณลักษณะ. ระดับการสนับสนุนสำหรับ srcset
อาจแตกต่างกันอย่างมากขึ้นอยู่กับไคลเอ็นต์อีเมล ดังนั้นการทดสอบอีเมลของคุณกับไคลเอนต์หลายตัวจึงเป็นสิ่งสำคัญเพื่อให้แน่ใจว่ารูปภาพแสดงอย่างถูกต้อง
HTML สำหรับรูปภาพในอีเมลที่ปรับให้เหมาะกับจอภาพเรตินา
เป็นไปได้ที่จะเขียนโค้ดอีเมล HTML ที่ตอบสนองซึ่งจะแสดงภาพที่ความละเอียดที่ปรับให้เหมาะกับจอภาพเรตินาอย่างเหมาะสม นี่คือวิธี:
- สร้างรูปภาพความละเอียดสูงที่มีขนาดสองเท่าของรูปภาพจริงที่คุณต้องการแสดงในอีเมล ตัวอย่างเช่น หากคุณต้องการแสดงรูปภาพขนาด 300×200 ให้สร้างรูปภาพขนาด 600×400
- บันทึกภาพความละเอียดสูงด้วย @ 2x คำต่อท้าย ตัวอย่างเช่น หากภาพต้นฉบับของคุณคือ image.pngให้บันทึกเวอร์ชันความละเอียดสูงเป็น อิมเมจ@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 พร้อมภาพที่ปรับแต่งการแสดงผล Retina
ต่อไปนี้คือตัวอย่างรหัสอีเมล 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
ต่อไปนี้เป็นเคล็ดลับเพิ่มเติมบางประการเกี่ยวกับการปรับอีเมล HTML ของคุณให้เหมาะสมสำหรับภาพที่ปรับให้เหมาะกับจอภาพ Retina:
- อย่าลืมใช้แท็กรูปภาพของคุณเสมอ
alt
ข้อความเพื่อให้บริบทสำหรับรูปภาพ - ปรับภาพให้เหมาะสมสำหรับเว็บเพื่อลดขนาดไฟล์โดยไม่ลดทอนคุณภาพของภาพ ซึ่งอาจรวมถึงการใช้ การบีบอัดภาพ เครื่องมือต่างๆ ลดจำนวนสีที่ใช้ในรูปภาพ และปรับขนาดรูปภาพให้ได้ขนาดที่เหมาะสมก่อนที่จะอัปโหลดไปยังอีเมล
- หลีกเลี่ยงภาพพื้นหลังขนาดใหญ่ที่อาจทำให้เวลาโหลดอีเมลช้าลง
- GIF แบบเคลื่อนไหวอาจมีขนาดไฟล์ที่ใหญ่กว่าภาพนิ่งได้เนื่องจากต้องใช้เฟรมหลายเฟรมในการสร้างภาพเคลื่อนไหว อย่าลืมเก็บไว้ให้ต่ำกว่า 1 Mb.