Kuinka käyttää korkearesoluutioisia kuvia verkkokalvon näytöille HTML-sähköpostissasi
Retina-näyttö on markkinointitermi, jota käyttää omena kuvaamaan korkearesoluutioista näyttöä, jonka pikselitiheys on tarpeeksi korkea, jotta ihmissilmä ei pysty erottamaan yksittäisiä pikseleitä tyypillisellä katseluetäisyydellä. Verkkokalvonäytön pikselitiheys on tyypillisesti 300 pikseliä tuumalla (ppi) tai suurempi, mikä on huomattavasti korkeampi kuin tavallinen näyttö, jonka pikselitiheys on 72 ppi.
Retina-näytöt ovat nyt melko yleisiä näytöissä, kannettavissa tietokoneissa, mobiililaitteissa ja tableteissa. Monet valmistajat tarjoavat nyt korkearesoluutioisia näyttöjä, joiden pikselitiheys vastaa tai ylittää Applen Retina-näyttöjen pikselitiheyden.
CSS näyttää korkearesoluutioisen kuvan Retina-näytölle
Voit käyttää seuraavaa CSS-koodia korkearesoluutioisen kuvan lataamiseen Retina-näyttöä varten. Tämä koodi tunnistaa laitteen pikselitiheyden ja lataa kuvan @2x pääte Retina-näytöille, kun samalla ladataan vakioresoluutioinen kuva muille näytöille.
@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');
}
Toinen lähestymistapa on käyttää vektorigrafiikkaa tai SVG kuvia, jotka voidaan skaalata mihin tahansa resoluutioon laadun heikkenemättä. Tässä on esimerkki:
<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>
Tässä esimerkissä SVG-koodi upotetaan suoraan HTML-sähköpostiin käyttämällä <svg>
tag. The viewBox
attribuutti määrittää SVG-kuvan mitat, kun taas xmlns
attribuutti määrittää SVG:n XML-nimiavaruuden.
- max-width
omaisuus on asetettu div
elementti varmistaaksesi, että SVG-kuva skaalautuu automaattisesti käytettävissä olevaan tilaan sopivaksi, tässä tapauksessa enintään 300 pikseliä. Tämä on paras käytäntö sen varmistamiseksi, että SVG-kuvat näkyvät oikein kaikissa laitteissa ja sähköpostiohjelmissa.
Huomautus: SVG-tuki voi vaihdella sähköpostiohjelmasta riippuen, joten on tärkeää testata sähköpostisi useilla asiakaskoneilla varmistaaksesi, että SVG-kuva näkyy oikein.
Toinen tapa koodata HTML-sähköpostiviestejä Retina-näytöille on käyttää srcset
. Käyttämällä srcset-attribuuttia voit tarjota korkearesoluutioisia kuvia Retina-näytöille ja varmistaa samalla, että kuvat ovat oikean kokoisia alhaisemman resoluution laitteille.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Tässä esimerkissä srcset
attribuutti tarjoaa kaksi kuvalähdettä: image.jpg
laitteille, joiden resoluutio on 600 pikseliä tai vähemmän, ja image@2x.jpg
laitteille, joiden resoluutio on 1200 pikseliä tai enemmän. The 600w
ja 1200w
kuvaajat määrittävät kuvien koon pikseleinä, mikä auttaa selainta määrittämään, mikä kuva ladataan laitteen resoluution perusteella.
Kaikki sähköpostiohjelmat eivät tue srcset
attribuutti. Tuen taso srcset
voi vaihdella suuresti sähköpostiohjelmasta riippuen, joten on tärkeää testata sähköpostisi useilla asiakasohjelmilla varmistaaksesi, että kuvat näkyvät oikein.
HTML sähköpostissa oleville kuville optimoitu verkkokalvon näytöille
on mahdollista koodata reagoiva HTML-sähköposti, joka näyttää kuvan oikein verkkokalvon näytöille optimoidulla resoluutiolla. Näin:
- Luo korkearesoluutioinen kuva, joka on kaksinkertainen sähköpostissa näkyvään todelliseen kuvaan verrattuna. Jos esimerkiksi haluat näyttää 300×200 kuvan, luo 600×400 kuva.
- Tallenna korkearesoluutioinen kuva -painikkeella @2x pääte. Esimerkiksi, jos alkuperäinen kuvasi on image.png, tallenna korkearesoluutioinen versio nimellä kuva@2x.png.
- Käytä HTML-sähköpostikoodissasi seuraavaa koodia näyttääksesi kuvan:
<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)]>
on ehdollinen kommentti, jota käytetään kohdistamaan tiettyihin Microsoft Outlookin versioihin, jotka käyttävät Microsoft Wordia HTML-sähköpostien hahmontamiseen. Microsoft Wordin HTML-renderöintikone voi olla hyvin erilainen kuin muiden sähköpostiohjelmien ja verkkoselaimien, joten se vaatii usein erityiskäsittelyä. The
(gte mso 9)
ehto tarkistaa, onko Microsoft Office -versio suurempi tai yhtä suuri kuin 9, mikä vastaa Microsoft Office 2000:ta. |(IE)
kunto tarkistaa, onko asiakas Internet Explorer, jota Microsoft Outlook usein käyttää. HTML-sähköposti Retina-näytön optimoiduilla kuvilla
Tässä on esimerkki responsiivisesta HTML-sähköpostikoodista, joka näyttää kuvan verkkokalvon näytöille optimoidulla resoluutiolla:
<!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-näytön kuvavinkkejä
Tässä on joitain lisävinkkejä HTML-sähköpostien optimointiin Retina-näytöille optimoiduille kuville:
- Varmista, että kuvatunnisteet sisältävät aina käytön
alt
tekstiä, joka tarjoaa kuvan kontekstin. - Optimoi kuvat verkkoa varten pienentääksesi tiedostokokoa kuvanlaadusta tinkimättä. Tämä voi sisältää käytön kuvan pakkaus työkaluja, vähentää kuvassa käytettyjen värien määrää ja muuttaa kuvan kokoa sen optimaalisiin mittoihin ennen sen lähettämistä sähköpostiin.
- Vältä suuria taustakuvia, jotka voivat hidastaa sähköpostin latausaikoja.
- Animoidut GIF-tiedostot voivat olla tiedostokooltaan suurempia kuin staattiset kuvat, koska animaation luomiseen tarvitaan useita kehyksiä. Muista pitää ne selvästi alle 1 Mb.