Cara Menggunakan Imej Resolusi Tinggi untuk Paparan Retina Dalam E-mel HTML Anda
Paparan retina ialah istilah pemasaran yang digunakan oleh Apple untuk menerangkan paparan resolusi tinggi yang mempunyai ketumpatan piksel yang cukup tinggi sehingga mata manusia tidak dapat membezakan piksel individu pada jarak tontonan biasa. Paparan retina biasanya mempunyai ketumpatan piksel 300 piksel per inci (ppi) atau lebih tinggi, yang jauh lebih tinggi daripada paparan standard dengan ketumpatan piksel 72 ppi.
Paparan retina kini agak arus perdana untuk paparan, komputer riba, peranti mudah alih dan tablet. Banyak pengeluar kini menawarkan paparan resolusi tinggi dengan ketumpatan piksel yang sepadan atau melebihi paparan Retina Apple.
CSS Untuk Memaparkan Imej Resolusi Lebih Tinggi Untuk Paparan Retina
Anda boleh menggunakan kod CSS berikut untuk memuatkan imej resolusi tinggi untuk paparan Retina. Kod ini mengesan ketumpatan piksel peranti dan memuatkan imej dengan @ 2x akhiran untuk paparan Retina, sambil memuatkan imej resolusi standard untuk paparan lain.
@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');
}
Pendekatan lain ialah menggunakan grafik vektor atau SVG imej, yang boleh berskala kepada sebarang resolusi tanpa kehilangan kualiti. Berikut ialah contoh:
<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>
Dalam contoh ini, kod SVG dibenamkan terus dalam e-mel HTML menggunakan <svg>
teg. The viewBox
atribut mentakrifkan dimensi imej SVG, manakala xmlns
atribut menentukan ruang nama XML untuk SVG.
. max-width
harta ditetapkan pada div
elemen untuk memastikan imej SVG berskala secara automatik agar sesuai dengan ruang yang tersedia, sehingga lebar maksimum 300px dalam kes ini. Ini adalah amalan terbaik untuk memastikan imej SVG dipaparkan dengan betul pada semua peranti dan klien e-mel.
Catatan: Sokongan SVG boleh berbeza-beza bergantung pada klien e-mel, jadi adalah penting untuk menguji e-mel anda pada berbilang pelanggan untuk memastikan imej SVG dipaparkan dengan betul.
Satu lagi cara pengekodan e-mel HTML untuk paparan Retina ialah menggunakan srcset
. Menggunakan atribut srcset membolehkan anda menyediakan imej resolusi tinggi untuk paparan Retina sambil memastikan bahawa imej bersaiz betul untuk peranti resolusi rendah.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Dalam contoh ini, srcset
atribut menyediakan dua sumber imej: image.jpg
untuk peranti dengan resolusi 600 piksel atau kurang, dan image@2x.jpg
untuk peranti dengan resolusi 1200 piksel atau lebih. The 600w
and 1200w
deskriptor menentukan saiz imej dalam piksel, yang membantu penyemak imbas menentukan imej yang hendak dimuat turun berdasarkan peleraian peranti.
Tidak semua pelanggan e-mel menyokong srcset
atribut. Tahap sokongan untuk srcset
boleh berbeza-beza bergantung pada klien e-mel, jadi adalah penting untuk menguji e-mel anda pada berbilang pelanggan untuk memastikan imej dipaparkan dengan betul.
HTML Untuk Imej Dalam E-mel Dioptimumkan Untuk Paparan Retina
adalah mungkin untuk mengodkan e-mel HTML responsif yang akan memaparkan imej dengan betul pada resolusi yang dioptimumkan untuk paparan retina. Ini caranya:
- Cipta imej resolusi tinggi yang bersaiz dua kali ganda daripada imej sebenar yang anda mahu paparkan dalam e-mel. Contohnya, jika anda ingin memaparkan imej 300×200, buat imej 600×400.
- Simpan imej resolusi tinggi dengan @ 2x akhiran. Contohnya, jika imej asal anda ialah image.png, simpan versi resolusi tinggi sebagai image@2x.png.
- Dalam kod e-mel HTML anda, gunakan kod berikut untuk memaparkan imej:
<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)]>
ialah ulasan bersyarat yang digunakan untuk menyasarkan versi Microsoft Outlook tertentu, yang menggunakan Microsoft Word untuk memaparkan e-mel HTML. Enjin pemaparan HTML Microsoft Word mungkin agak berbeza daripada klien e-mel dan pelayar web lain, jadi ia selalunya memerlukan pengendalian khas. The
(gte mso 9)
syarat menyemak sama ada versi Microsoft Office lebih besar daripada atau sama dengan 9, yang sepadan dengan Microsoft Office 2000. |(IE)
keadaan menyemak sama ada klien adalah Internet Explorer, yang sering digunakan oleh Microsoft Outlook. E-mel HTML Dengan Imej Dioptimumkan Paparan Retina
Berikut ialah contoh kod e-mel HTML responsif yang memaparkan imej pada resolusi yang dioptimumkan untuk paparan 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>
Petua Imej Paparan Retina
Berikut ialah beberapa petua tambahan untuk mengoptimumkan E-mel HTML anda untuk imej yang dioptimumkan untuk paparan Retina:
- Pastikan anda sentiasa mempunyai teg imej anda termasuk penggunaan
alt
teks untuk menyediakan konteks untuk imej. - Optimumkan imej untuk web untuk mengurangkan saiz fail tanpa menjejaskan kualiti imej. Ini boleh termasuk menggunakan pemampatan imej alat, mengurangkan bilangan warna yang digunakan dalam imej, dan mengubah saiz imej kepada dimensi optimumnya sebelum memuat naiknya ke e-mel.
- Elakkan imej latar belakang yang besar yang boleh melambatkan masa pemuatan e-mel.
- GIF animasi boleh menjadi lebih besar dalam saiz fail daripada imej statik kerana berbilang bingkai yang diperlukan untuk mencipta animasi, pastikan anda menyimpannya dengan baik di bawah 1 Mb.