Kako koristiti slike visoke rezolucije za Retina displeje u vašoj HTML e-pošti
Retina displej je marketinški termin koji koristi jabuka da opišem ekran visoke rezolucije koji ima dovoljno veliku gustinu piksela da ljudsko oko nije u stanju da razlikuje pojedinačne piksele na tipičnoj udaljenosti gledanja. Retina ekran obično ima gustinu piksela od 300 piksela po inču (ppi) ili više, što je znatno više od standardnog ekrana sa gustinom piksela od 72 ppi.
Retina displeji su sada prilično popularni za ekrane, laptopove, mobilne uređaje i tablete. Mnogi proizvođači sada nude displeje visoke rezolucije sa gustinom piksela koja odgovara ili prevazilazi one Apple Retina displeja.
CSS za prikaz slike veće rezolucije za Retina ekran
Možete koristiti sljedeći CSS kod za učitavanje slike visoke rezolucije za Retina ekran. Ovaj kod detektuje gustinu piksela uređaja i učitava sliku @2x sufiks za Retina ekrane, dok učitava sliku standardne rezolucije za druge ekrane.
@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');
}
Drugi pristup je korištenje vektorske grafike ili SVG slike, koje se mogu skalirati na bilo koju rezoluciju bez gubitka kvaliteta. Evo primjera:
<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>
U ovom primjeru, SVG kod je ugrađen direktno u HTML e-poruku pomoću <svg>
tag. The viewBox
atribut definira dimenzije SVG slike, dok je xmlns
atribut specificira XML imenski prostor za SVG.
The max-width
nekretnina je postavljena na div
element kako bi se osiguralo da se SVG slika automatski mijenja kako bi se uklopila u raspoloživi prostor, do maksimalne širine od 300 piksela u ovom slučaju. Ovo je najbolja praksa za osiguranje da se SVG slike pravilno prikazuju na svim uređajima i klijentima e-pošte.
Bilješka: SVG podrška može varirati ovisno o klijentu e-pošte, pa je važno da testirate svoju e-poštu na više klijenata kako biste bili sigurni da se SVG slika prikazuje ispravno.
Drugi način kodiranja HTML e-pošte za Retina ekrane je korištenje srcset
. Korišćenje atributa srcset omogućava vam da obezbedite slike visoke rezolucije za Retina ekrane, istovremeno osiguravajući da su slike odgovarajuće veličine za uređaje niže rezolucije.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
U ovom primjeru, srcset
atribut pruža dva izvora slike: image.jpg
za uređaje sa rezolucijom od 600 piksela ili manje, i image@2x.jpg
za uređaje sa rezolucijom od 1200 piksela ili više. The 600w
i 1200w
deskriptori određuju veličinu slika u pikselima, što pomaže pretraživaču da odredi koju sliku da preuzme na osnovu rezolucije uređaja.
Ne podržavaju svi klijenti e-pošte srcset
atribut. Nivo podrške za srcset
može uvelike varirati ovisno o klijentu e-pošte, tako da je važno testirati svoje e-poruke na više klijenata kako biste bili sigurni da su slike pravilno prikazane.
HTML za slike u e-pošti optimiziran za Retina displeje
moguće je kodirati responzivnu HTML e-poštu koja će pravilno prikazati sliku u rezoluciji optimizovanoj za retina displeje. Evo kako:
- Napravite sliku visoke rezolucije koja je dvostruko veća od stvarne slike koju želite da prikažete u e-poruci. Na primjer, ako želite da prikažete sliku veličine 300×200, kreirajte sliku od 600×400.
- Sačuvajte sliku visoke rezolucije pomoću @2x sufiks. Na primjer, ako je vaša originalna slika image.png, sačuvajte verziju visoke rezolucije kao image@2x.png.
- U svom HTML kodu e-pošte koristite sljedeći kod za prikaz slike:
<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)]>
je uslovni komentar koji se koristi za ciljanje određenih verzija programa Microsoft Outlook, koji koristi Microsoft Word za prikazivanje HTML e-poruka. Microsoft Wordov HTML mehanizam za prikazivanje može se prilično razlikovati od drugih klijenata e-pošte i web pretraživača, tako da često zahtijeva posebno rukovanje. The
(gte mso 9)
uvjet provjerava da li je verzija Microsoft Officea veća ili jednaka 9, što odgovara Microsoft Office 2000. |(IE)
uvjet provjerava da li je klijent Internet Explorer, koji često koristi Microsoft Outlook. HTML e-pošta sa optimizovanim slikama Retina Display
Evo primjera responzivnog HTML koda e-pošte koji prikazuje sliku u rezoluciji optimiziranoj za ekrane mrežnice:
<!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 Savjeti za sliku
Evo nekoliko dodatnih savjeta o optimizaciji vaših HTML e-poruka za slike optimizirane za Retina displeje:
- Budite sigurni da vaše oznake slika uvijek uključuju korištenje
alt
tekst za pružanje konteksta za sliku. - Optimizirajte slike za web kako biste smanjili veličinu datoteke bez ugrožavanja kvaliteta slike. Ovo može uključivati korištenje kompresija slike alate, smanjujući broj boja koje se koriste na slici i mijenjajući veličinu slike na njene optimalne dimenzije prije nego što je otpremite na e-poštu.
- Izbjegavajte velike pozadinske slike koje mogu usporiti vrijeme učitavanja e-pošte.
- Animirani GIF-ovi mogu biti veće veličine datoteke od statičnih slika zbog više okvira potrebnih za kreiranje animacije, pazite da ih držite ispod 1 Mb.