Cara Menggunakan Gambar Resolusi Tinggi untuk Tampilan Retina di Email HTML Anda
Tampilan retina adalah istilah pemasaran yang digunakan oleh Apple untuk menggambarkan tampilan beresolusi tinggi yang memiliki kerapatan piksel cukup tinggi sehingga mata manusia tidak dapat membedakan setiap piksel pada jarak pandang biasa. Tampilan retina biasanya memiliki kerapatan piksel 300 piksel per inci (ppi) atau lebih tinggi, yang jauh lebih tinggi daripada layar standar dengan kerapatan piksel 72 ppi.
Layar retina sekarang cukup umum untuk layar, laptop, perangkat seluler, dan tablet. Banyak pabrikan kini menawarkan layar beresolusi tinggi dengan kerapatan piksel yang cocok atau melebihi layar Retina Apple.
CSS Untuk Menampilkan Gambar Beresolusi Lebih Tinggi Untuk Layar Retina
Anda dapat menggunakan kode CSS berikut untuk memuat gambar beresolusi tinggi untuk tampilan Retina. Kode ini mendeteksi kerapatan piksel perangkat dan memuat gambar dengan @ 2x akhiran untuk tampilan Retina, sambil memuat gambar resolusi standar untuk tampilan lainnya.
@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 adalah dengan menggunakan grafik vektor atau SVG gambar, yang dapat diskalakan ke resolusi apa pun tanpa kehilangan kualitas. Berikut contohnya:
<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, kode SVG disematkan langsung di email HTML menggunakan <svg>
menandai. Itu viewBox
atribut mendefinisikan dimensi gambar SVG, sedangkan xmlns
atribut menentukan namespace XML untuk SVG.
Grafik max-width
properti diatur pada div
elemen untuk memastikan bahwa gambar SVG diskalakan secara otomatis agar sesuai dengan ruang yang tersedia, hingga lebar maksimum 300 piksel dalam kasus ini. Ini adalah praktik terbaik untuk memastikan gambar SVG ditampilkan dengan benar di semua perangkat dan klien email.
Catatan: Dukungan SVG dapat bervariasi tergantung pada klien email, jadi penting untuk menguji email Anda pada banyak klien untuk memastikan bahwa gambar SVG ditampilkan dengan benar.
Cara lain pengkodean email HTML untuk tampilan Retina adalah dengan memanfaatkan srcset
. Menggunakan atribut srcset memungkinkan Anda memberikan gambar beresolusi tinggi untuk layar Retina sekaligus memastikan ukuran gambar sesuai untuk perangkat beresolusi 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, the srcset
atribut menyediakan dua sumber gambar: image.jpg
untuk perangkat dengan resolusi 600 piksel atau kurang, dan image@2x.jpg
untuk perangkat dengan resolusi 1200 piksel atau lebih. Itu 600w
dan 1200w
deskriptor menentukan ukuran gambar dalam piksel, yang membantu browser menentukan gambar mana yang akan diunduh berdasarkan resolusi perangkat.
Tidak semua klien email mendukung srcset
atribut. Tingkat dukungan untuk srcset
dapat sangat bervariasi tergantung pada klien email, jadi penting untuk menguji email Anda pada banyak klien untuk memastikan bahwa gambar ditampilkan dengan benar.
HTML Untuk Gambar Dalam Email Dioptimalkan Untuk Tampilan Retina
dimungkinkan untuk membuat kode email HTML responsif yang akan menampilkan gambar dengan benar pada resolusi yang dioptimalkan untuk tampilan retina. Begini caranya:
- Buat gambar beresolusi tinggi dengan ukuran dua kali lipat dari gambar sebenarnya yang ingin Anda tampilkan di email. Misalnya, jika ingin menampilkan gambar berukuran 300x200, buatlah gambar berukuran 600x400.
- Simpan gambar beresolusi tinggi dengan @ 2x akhiran. Misalnya, jika gambar asli Anda adalah image.png, simpan versi resolusi tinggi sebagai gambar@2x.png.
- Dalam kode email HTML Anda, gunakan kode berikut untuk menampilkan gambar:
<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)]>
adalah komentar bersyarat yang digunakan untuk menargetkan versi Microsoft Outlook tertentu, yang menggunakan Microsoft Word untuk merender email HTML. Mesin rendering HTML Microsoft Word bisa sangat berbeda dari klien email dan browser web lainnya, sehingga seringkali memerlukan penanganan khusus. Itu
(gte mso 9)
kondisi memeriksa apakah versi Microsoft Office lebih besar dari atau sama dengan 9, yang sesuai dengan Microsoft Office 2000. The |(IE)
kondisi memeriksa apakah klien adalah Internet Explorer, yang sering digunakan oleh Microsoft Outlook. Email HTML Dengan Tampilan Retina Gambar yang Dioptimalkan
Berikut adalah contoh kode email HTML responsif yang menampilkan gambar dengan resolusi yang dioptimalkan untuk tampilan 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>
Kiat Gambar Tampilan Retina
Berikut ini beberapa kiat tambahan untuk mengoptimalkan Email HTML Anda untuk gambar yang dioptimalkan untuk tampilan Retina:
- Pastikan untuk selalu memasukkan tag gambar Anda menggunakan
alt
teks untuk menyediakan konteks untuk gambar. - Optimalkan gambar untuk web untuk mengurangi ukuran file tanpa mengorbankan kualitas gambar. Ini bisa termasuk menggunakan kompresi gambar alat, mengurangi jumlah warna yang digunakan pada gambar, dan mengubah ukuran gambar ke dimensi optimalnya sebelum mengunggahnya ke email.
- Hindari gambar latar besar yang dapat memperlambat waktu muat email.
- GIF animasi bisa lebih besar dalam ukuran file daripada gambar statis karena beberapa bingkai diperlukan untuk membuat animasi, pastikan untuk menyimpannya di bawah 1 Mb.