ວິທີການນໍາໃຊ້ຮູບພາບທີ່ມີຄວາມລະອຽດສູງສໍາລັບການສະແດງ Retina ໃນອີເມວ HTML ຂອງທ່ານ
ຈໍສະແດງຜົນ Retina ແມ່ນຄໍາສັບການຕະຫຼາດທີ່ໃຊ້ໂດຍ ຈາກຫນາກແອບເປີ ເພື່ອອະທິບາຍຈໍສະແດງຜົນທີ່ມີຄວາມລະອຽດສູງທີ່ມີຄວາມຫນາແຫນ້ນຂອງ pixels ລວງສູງພໍທີ່ຕາຂອງມະນຸດບໍ່ສາມາດຈໍາແນກແຕ່ລະ pixels ໃນໄລຍະການເບິ່ງປົກກະຕິ. ຈໍສະແດງຜົນ retina ປົກກະຕິແລ້ວມີຄວາມຫນາແຫນ້ນຂອງ pixels ລວງຂອງ 300 pixels ຕໍ່ນິ້ວ (ppi) ຫຼືສູງກວ່າ, ເຊິ່ງສູງກວ່າຈໍສະແດງຜົນມາດຕະຖານທີ່ມີຄວາມຫນາແຫນ້ນຂອງ pixels ລວງຂອງ 72 ppi.
ຈໍສະແດງຜົນ Retina ໃນປັດຈຸບັນແມ່ນຂ້ອນຂ້າງເປັນທີ່ນິຍົມສໍາລັບຈໍສະແດງຜົນ, ແລັບທັອບ, ອຸປະກອນມືຖື, ແລະແທັບເລັດ. ຜູ້ຜະລິດຈໍານວນຫຼາຍໃນປັດຈຸບັນສະເຫນີການສະແດງຄວາມລະອຽດສູງທີ່ມີຄວາມຫນາແຫນ້ນຂອງ pixels ລວງທີ່ກົງກັນຫຼືເກີນຈໍສະແດງຜົນ Retina ຂອງ Apple.
CSS ເພື່ອສະແດງຮູບພາບທີ່ມີຄວາມລະອຽດສູງກວ່າສໍາລັບຈໍສະແດງຜົນ Retina
ທ່ານສາມາດນໍາໃຊ້ລະຫັດ CSS ຕໍ່ໄປນີ້ເພື່ອໂຫລດຮູບພາບທີ່ມີຄວາມລະອຽດສູງສໍາລັບຈໍສະແດງຜົນ Retina. ລະຫັດນີ້ກວດພົບຄວາມຫນາແຫນ້ນຂອງ pixels ລວງຂອງອຸປະກອນແລະໂຫຼດຮູບພາບດ້ວຍ @ 2 ເທົ່າ suffix ສໍາລັບຈໍສະແດງຜົນ 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');
}
ວິທີການອື່ນແມ່ນການນໍາໃຊ້ຮູບພາບ vector ຫຼື 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
attribute ກໍານົດຂະຫນາດຂອງຮູບພາບ SVG, ໃນຂະນະທີ່ xmlns
attribute ລະບຸ namespace 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;">
ໃນຕົວຢ່າງນີ້, the srcset
attribute ໃຫ້ສອງແຫຼ່ງຮູບພາບ: image.jpg
ສໍາລັບອຸປະກອນທີ່ມີຄວາມລະອຽດ 600 pixels ຫຼືຫນ້ອຍກວ່າ, ແລະ image@2x.jpg
ສໍາລັບອຸປະກອນທີ່ມີຄວາມລະອຽດ 1200 pixels ຫຼືຫຼາຍກວ່ານັ້ນ. ໄດ້ 600w
ແລະ 1200w
ຕົວອະທິບາຍກໍານົດຂະຫນາດຂອງຮູບພາບໃນ pixels, ເຊິ່ງຊ່ວຍໃຫ້ຕົວທ່ອງເວັບກໍານົດວ່າຮູບພາບໃດທີ່ຈະດາວໂຫລດໂດຍອີງໃສ່ຄວາມລະອຽດຂອງອຸປະກອນ.
ບໍ່ແມ່ນລູກຄ້າອີເມວທັງຫມົດສະຫນັບສະຫນູນ srcset
ຄຸນລັກສະນະ. ລະດັບການສະຫນັບສະຫນູນສໍາລັບ srcset
ສາມາດແຕກຕ່າງກັນໄປຕາມລູກຄ້າອີເມວ, ສະນັ້ນມັນເປັນສິ່ງສໍາຄັນທີ່ຈະທົດສອບອີເມວຂອງທ່ານໃນລູກຄ້າຫຼາຍໆຄົນເພື່ອຮັບປະກັນວ່າຮູບພາບຖືກສະແດງຢ່າງຖືກຕ້ອງ.
HTML ສໍາລັບຮູບພາບໃນອີເມລ໌ທີ່ດີທີ່ສຸດສໍາລັບການສະແດງ Retina
ມັນເປັນໄປໄດ້ທີ່ຈະລະຫັດອີເມວ HTML ທີ່ຕອບສະຫນອງທີ່ຈະສະແດງຮູບພາບຢ່າງຖືກຕ້ອງໃນຄວາມລະອຽດທີ່ເຫມາະສົມສໍາລັບການສະແດງ retina. ນີ້ແມ່ນວິທີ:
- ສ້າງຮູບພາບທີ່ມີຄວາມລະອຽດສູງທີ່ມີຂະຫນາດສອງເທົ່າຂອງຮູບພາບຕົວຈິງທີ່ທ່ານຕ້ອງການສະແດງຢູ່ໃນອີເມວ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການສະແດງຮູບພາບ 300 × 200, ສ້າງຮູບພາບ 600 × 400.
- ບັນທຶກຮູບພາບທີ່ມີຄວາມລະອຽດສູງ @ 2 ເທົ່າ ຕໍ່ທ້າຍ. ຕົວຢ່າງ, ຖ້າຮູບພາບຕົ້ນສະບັບຂອງເຈົ້າແມ່ນ imagepng, ບັນທຶກສະບັບຄວາມລະອຽດສູງເປັນ ຮູບພາບ@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 Display Optimized
ນີ້ແມ່ນຕົວຢ່າງຂອງລະຫັດອີເມລ໌ HTML ທີ່ຕອບສະໜອງທີ່ສະແດງຮູບພາບໃນຄວາມລະອຽດທີ່ເໝາະສົມກັບຈໍສະແດງຜົນ retina:
<!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 Display
ນີ້ແມ່ນຄໍາແນະນໍາເພີ່ມເຕີມບາງຢ່າງກ່ຽວກັບການເພີ່ມປະສິດທິພາບອີເມວ HTML ຂອງທ່ານສໍາລັບຮູບພາບທີ່ເຫມາະສົມສໍາລັບການສະແດງ Retina:
- ໃຫ້ແນ່ໃຈວ່າສະເຫມີມີ tags ຮູບພາບຂອງທ່ານລວມທັງການນໍາໃຊ້
alt
ຂໍ້ຄວາມເພື່ອໃຫ້ບໍລິບົດສໍາລັບຮູບພາບ. - ເພີ່ມປະສິດທິພາບຮູບພາບສໍາລັບເວັບເພື່ອຫຼຸດຜ່ອນຂະຫນາດໄຟລ໌ໂດຍບໍ່ມີການທໍາລາຍຄຸນນະພາບຮູບພາບ. ນີ້ສາມາດປະກອບມີການນໍາໃຊ້ ການບີບອັດຮູບພາບ ເຄື່ອງມື, ການຫຼຸດຜ່ອນຈໍານວນຂອງສີທີ່ໃຊ້ໃນຮູບພາບ, ແລະປັບຂະຫນາດຮູບພາບໃຫ້ຂະຫນາດທີ່ເຫມາະສົມກ່ອນທີ່ຈະອັບໂຫລດມັນກັບອີເມລ໌.
- ຫຼີກເວັ້ນການຮູບພາບພື້ນຫລັງຂະຫນາດໃຫຍ່ທີ່ສາມາດຊ້າລົງເວລາໂຫຼດອີເມວ.
- GIFs ແບບເຄື່ອນໄຫວສາມາດມີຂະໜາດໄຟລ໌ໃຫຍ່ກວ່າຮູບຄົງທີ່ເນື່ອງຈາກກອບຫຼາຍຮູບທີ່ຕ້ອງການເພື່ອສ້າງພາບເຄື່ອນໄຫວ, ໃຫ້ແນ່ໃຈວ່າຈະຮັກສາພວກມັນໃຫ້ດີພາຍໃຕ້ 1. Mb.