Nagy felbontású képek használata Retina-kijelzőkhöz HTML-e-mailben
A Retina display egy marketing kifejezés, amelyet a Apple olyan nagy felbontású kijelző leírására, amelynek a pixelsűrűsége elég nagy ahhoz, hogy az emberi szem ne tudja megkülönböztetni az egyes képpontokat tipikus látótávolságon. A retina kijelző képpontsűrűsége általában 300 pixel hüvelykenként (ppi) vagy magasabb, ami lényegesen magasabb, mint egy 72 ppi pixelsűrűségű szabványos kijelző.
A Retina-kijelzők ma már meglehetősen általánosak a kijelzők, laptopok, mobileszközök és táblagépek esetében. Sok gyártó ma már kínál olyan nagy felbontású kijelzőket, amelyek pixelsűrűsége megegyezik vagy meghaladja az Apple Retina-kijelzőiét.
CSS nagyobb felbontású kép megjelenítéséhez retina kijelzőhöz
A következő CSS-kóddal nagy felbontású képet tölthet be Retina kijelzőhöz. Ez a kód érzékeli az eszköz pixelsűrűségét, és betölti a képet a @2x utótag a Retina kijelzőkhöz, miközben betölti a normál felbontású képet más kijelzőkre.
@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');
}
Egy másik megközelítés a vektorgrafika ill SVG képeket, amelyek bármilyen felbontásra méretezhetők a minőség romlása nélkül. Íme egy példa:
<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>
Ebben a példában az SVG kód közvetlenül a HTML e-mailbe van beágyazva a következővel <svg>
címke. Az viewBox
attribútum határozza meg az SVG kép méreteit, míg a xmlns
attribútum az SVG XML névterét adja meg.
A max-width
tulajdonság van beállítva a div
elemet annak biztosítására, hogy az SVG-kép automatikusan a rendelkezésre álló helyhez illeszkedjen, ebben az esetben legfeljebb 300 képpont szélességig. Ez egy bevált módszer annak biztosítására, hogy az SVG-képek megfelelően jelenjenek meg minden eszközön és levelezőprogramban.
Jegyzet: Az SVG-támogatás az e-mail klienstől függően változhat, ezért fontos, hogy e-mailjeit több kliensen is tesztelje, hogy megbizonyosodjon arról, hogy az SVG-kép megfelelően jelenik meg.
A HTML e-mailek Retina kijelzőkhöz való kódolásának másik módja a felhasználás srcset
. Az srcset attribútum használatával nagy felbontású képeket biztosíthat a Retina kijelzőkhöz, miközben biztosítja, hogy a képek megfelelő méretűek legyenek az alacsonyabb felbontású eszközökhöz.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Ebben a példában a srcset
Az attribútum két képforrást biztosít: image.jpg
600 pixel vagy annál kisebb felbontású eszközökhöz, és image@2x.jpg
1200 pixel vagy nagyobb felbontású eszközökhöz. A 600w
és a 1200w
a leírók pixelben határozzák meg a képek méretét, ami segít a böngészőnek eldönteni, hogy az eszköz felbontása alapján melyik képet töltse le.
Nem minden e-mail kliens támogatja a srcset
tulajdonság. A támogatás mértéke srcset
nagyon eltérő lehet az e-mail klienstől függően, ezért fontos, hogy az e-maileket több kliensen is tesztelje, hogy megbizonyosodjon arról, hogy a képek megfelelően jelennek meg.
HTML e-mailben lévő képekhez Retina kijelzőkre optimalizálva
lehetőség van egy reszponzív HTML e-mail kódolására, amely megfelelően megjeleníti a képet a retina kijelzőkre optimalizált felbontásban. Itt van, hogyan:
- Hozzon létre egy nagy felbontású képet, amely kétszer akkora, mint az e-mailben megjeleníteni kívánt tényleges kép. Ha például egy 300×200-as képet szeretne megjeleníteni, hozzon létre egy 600×400-as képet.
- Mentse el a nagy felbontású képet a @2x utótag. Például, ha az eredeti kép image.png, mentse el a nagyfelbontású verziót másként kép@2x.png.
- HTML e-mail kódjában használja a következő kódot a kép megjelenítéséhez:
<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)]>
egy feltételes megjegyzés, amelyet a Microsoft Outlook bizonyos verzióinak megcélzására használnak, amely Microsoft Word használatával jeleníti meg a HTML e-maileket. A Microsoft Word HTML-megjelenítő motorja meglehetősen eltérhet a többi e-mail klienstől és webböngészőtől, ezért gyakran különleges kezelést igényel. A
(gte mso 9)
A feltétel ellenőrzi, hogy a Microsoft Office verziója nagyobb vagy egyenlő-e, mint 9, ami megfelel a Microsoft Office 2000-nek. |(IE)
állapot ellenőrzi, hogy az ügyfél az Internet Explorer-e, amelyet gyakran használ a Microsoft Outlook. HTML e-mail Retina megjelenítésre optimalizált képekkel
Íme egy példa egy reszponzív HTML e-mail kódra, amely a képet retina-megjelenítésre optimalizált felbontásban jeleníti meg:
<!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 Image Tippek
Íme néhány további tipp a HTML-e-mailek optimalizálásához a Retina-kijelzőkre optimalizált képekhez:
- Ügyeljen arra, hogy a képcímkék mindig tartalmazzák a használatát
alt
szöveget, amely kontextust biztosít a képhez. - Optimalizálja a képeket az internetre, hogy csökkentse a fájlméretet a képminőség romlása nélkül. Ez magában foglalhatja a használatát képtömörítés eszközöket, csökkenti a képen használt színek számát, és átméretezi a képet az optimális méretre, mielőtt feltölti az e-mailbe.
- Kerülje a nagyméretű háttérképeket, amelyek lelassíthatják az e-mailek betöltési idejét.
- Az animált GIF-ek fájlmérete nagyobb lehet, mint a statikus képek, mivel az animáció létrehozásához több képkocka szükséges. Ügyeljen arra, hogy jóval 1 alatt legyen. Mb.