Slik bruker du høyoppløselige bilder for Retina-skjermer i HTML-e-posten din
Retina display er et markedsføringsbegrep som brukes av eple å beskrive en skjerm med høy oppløsning som har en pikseltetthet som er høy nok til at det menneskelige øyet ikke er i stand til å skille individuelle piksler på en typisk visningsavstand. En retina-skjerm har vanligvis en pikseltetthet på 300 piksler per tomme (ppi) eller høyere, noe som er betydelig høyere enn en standardskjerm med en pikseltetthet på 72 ppi.
Retina-skjermer er nå ganske mainstream for skjermer, bærbare datamaskiner, mobile enheter og nettbrett. Mange produsenter tilbyr nå skjermer med høy oppløsning med pikseltettheter som matcher eller overgår Apples Retina-skjermer.
CSS for å vise et bilde med høyere oppløsning for en netthinneskjerm
Du kan bruke følgende CSS-kode for å laste et høyoppløselig bilde for en Retina-skjerm. Denne koden oppdager enhetens pikseltetthet og laster bildet med @ 2x suffiks for Retina-skjermer, mens du laster inn standardoppløsningsbildet for andre skjermer.
@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');
}
En annen tilnærming er å bruke vektorgrafikk eller SVG bilder, som kan skaleres til hvilken som helst oppløsning uten å miste kvalitet. Her er et eksempel:
<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>
I dette eksemplet er SVG-koden innebygd direkte i HTML-e-posten ved å bruke <svg>
stikkord. De viewBox
attributt definerer dimensjonene til SVG-bildet, mens xmlns
attributt angir XML-navneområdet for SVG.
De max-width
eiendom er satt på div
element for å sikre at SVG-bildet skaleres automatisk for å passe den tilgjengelige plassen, opp til en maksimal bredde på 300px i dette tilfellet. Dette er en beste praksis for å sikre at SVG-bilder vises riktig på alle enheter og e-postklienter.
OBS: SVG-støtte kan variere avhengig av e-postklienten, så det er viktig å teste e-posten din på flere klienter for å sikre at SVG-bildet vises riktig.
En annen måte å kode HTML-e-poster for Retina-skjermer på er å bruke srcset
. Ved å bruke srcset-attributtet kan du gi høyoppløselige bilder for Retina-skjermer samtidig som du sikrer at bildene har riktig størrelse for enheter med lavere oppløsning.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
I dette eksemplet er srcset
attributt gir to bildekilder: image.jpg
for enheter med en oppløsning på 600 piksler eller mindre, og image@2x.jpg
for enheter med en oppløsning på 1200 piksler eller mer. De 600w
og 1200w
Deskriptorer spesifiserer størrelsen på bildene i piksler, noe som hjelper nettleseren å bestemme hvilket bilde som skal lastes ned basert på enhetens oppløsning.
Ikke alle e-postklienter støtter srcset
Egenskap. Nivået på støtte for srcset
kan variere mye avhengig av e-postklienten, så det er viktig å teste e-postene dine på flere klienter for å sikre at bildene vises riktig.
HTML for bilder i e-post optimalisert for netthinneskjermer
det er mulig å kode en responsiv HTML-e-post som vil vise et bilde på riktig måte med en oppløsning optimalisert for netthinneskjermer. Dette er hvordan:
- Lag et høyoppløselig bilde som er dobbelt så stort som det faktiske bildet du vil vise i e-posten. For eksempel, hvis du vil vise et 300×200 bilde, lag et 600×400 bilde.
- Lagre det høyoppløselige bildet med @ 2x suffiks. For eksempel hvis originalbildet ditt er image.png, lagre den høyoppløselige versjonen som bilde@2x.png.
- I HTML-e-postkoden din bruker du følgende kode for å vise bildet:
<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)]>
er en betinget kommentar som brukes til å målrette mot spesifikke versjoner av Microsoft Outlook, som bruker Microsoft Word til å gjengi HTML-e-poster. Microsoft Words HTML-gjengivelsesmotor kan være ganske forskjellig fra andre e-postklienter og nettlesere, så det krever ofte spesiell håndtering. De
(gte mso 9)
tilstand sjekker om Microsoft Office-versjonen er større enn eller lik 9, som tilsvarer Microsoft Office 2000. |(IE)
tilstand sjekker om klienten er Internet Explorer, som ofte brukes av Microsoft Outlook. HTML-e-post med Retina Display-optimaliserte bilder
Her er et eksempel på en responsiv HTML-e-postkode som viser et bilde med en oppløsning optimalisert for netthinneskjermer:
<!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 Bilde Tips
Her er noen flere tips om hvordan du optimaliserer HTML-e-postene dine for bilder som er optimalisert for Retina-skjermer:
- Sørg for å alltid ha bildekodene dine med å bruke
alt
tekst for å gi bildet kontekst. - Optimaliser bilder for nettet for å redusere filstørrelsen uten at det går på bekostning av bildekvaliteten. Dette kan inkludere bruk bildekomprimering verktøy, redusere antall farger som brukes i bildet, og endre størrelsen på bildet til dets optimale dimensjoner før du laster det opp til e-posten.
- Unngå store bakgrunnsbilder som kan redusere innlastingstiden for e-post.
- Animerte GIF-er kan være større i filstørrelse enn statiske bilder på grunn av de mange rammene som trengs for å lage animasjonen, sørg for å holde dem godt under 1 Mb.