Kif Tuża Stampi b'Riżoluzzjoni Għolja għal Displays tar-Retina Fl-Email HTML Tiegħek
Retina display huwa terminu ta 'kummerċjalizzazzjoni użat minn Apple biex jiddeskrivi display b'riżoluzzjoni għolja li għandu densità ta 'pixels għolja biżżejjed li l-għajn tal-bniedem ma tkunx kapaċi tiddistingwi pixels individwali f'distanza tipika tal-vista. Display retina tipikament ikollu densità ta' pixels ta' 300 pixel kull pulzier (ppi) jew ogħla, li hija ogħla b'mod sinifikanti minn wirja standard b'densità ta 'pixels ta' 72 ppi.
Il-wirjiet tar-retina issa huma pjuttost mainstream għal wirjiet, laptops, tagħmir mobbli, u pilloli. Ħafna manifatturi issa joffru displejs b'riżoluzzjoni għolja b'densitajiet ta 'pixel li jaqblu jew jaqbżu dawk tad-displejs tar-Retina ta' Apple.
CSS Biex Uri Immaġni b'Riżoluzzjoni Ogħla Għal Wiri Retina
Tista 'tuża l-kodiċi CSS li ġej biex tagħbija immaġni b'riżoluzzjoni għolja għal display Retina. Dan il-kodiċi jiskopri d-densità tal-pixels tal-apparat u jgħabbi l-immaġni bl- @ 2x suffiss għall-wirjiet tar-Retina, filwaqt li tgħabbi l-immaġni b'riżoluzzjoni standard għal wirjiet oħra.
@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');
}
Approċċ ieħor huwa li tuża grafika vettorjali jew SVG immaġini, li jistgħu skala għal kwalunkwe riżoluzzjoni mingħajr ma jitilfu l-kwalità. Hawn eżempju:
<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>
F'dan l-eżempju, il-kodiċi SVG huwa inkorporat direttament fl-email HTML bl-użu tal- <svg>
tikketta. Il viewBox
attribut jiddefinixxi d-dimensjonijiet tal-immaġni SVG, filwaqt li l- xmlns
attribut jispeċifika l-ispazju tal-isem XML għal SVG.
il max-width
proprjetà hija stabbilita fuq il- div
element biex jiġi żgurat li l-immaġni SVG tiskala awtomatikament biex taqbel mal-ispazju disponibbli, sa wisa 'massimu ta' 300px f'dan il-każ. Din hija l-aħjar prattika biex jiġi żgurat li l-immaġini SVG jintwerew sew fuq it-tagħmir u l-klijenti tal-email kollha.
Nota: L-appoġġ SVG jista 'jvarja skont il-klijent tal-email, għalhekk huwa importanti li tittestja l-email tiegħek fuq klijenti multipli biex tiżgura li l-immaġni SVG tintwera kif suppost.
Mod ieħor ta 'kodifikazzjoni ta' emails HTML għal displays Retina huwa li tuża srcset
. L-użu tal-attribut srcset jippermettilek li tipprovdi immaġini b'riżoluzzjoni għolja għal wirjiet tar-Retina filwaqt li tiżgura li l-immaġini jkunu ta' daqs xieraq għal apparati b'riżoluzzjoni aktar baxxa.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
F'dan l - eżempju, il - srcset
attribut jipprovdi żewġ sorsi ta 'immaġni: image.jpg
għal apparati b'riżoluzzjoni ta' 600 pixel jew inqas, u image@2x.jpg
għal apparati b'riżoluzzjoni ta' 1200 pixel jew aktar. Il- 600w
u, 1200w
deskritturi jispeċifikaw id-daqs tal-immaġini f'pixels, li jgħin lill-browser jiddetermina liema immaġini tniżżel abbażi tar-riżoluzzjoni tal-apparat.
Mhux il-klijenti kollha tal-email jappoġġjaw il- srcset
attribut. Il-livell ta' appoġġ għal srcset
jistgħu jvarjaw ħafna skont il-klijent tal-email, għalhekk huwa importanti li tittestja l-emails tiegħek fuq klijenti multipli biex tiżgura li l-immaġini jintwerew kif suppost.
HTML Għal Stampi Fl-Email Ottimizzat Għall-Displays tar-Retina
huwa possibbli li tiġi kkodifikata email HTML li tirreaġixxi li turi sew immaġini b'riżoluzzjoni ottimizzata għal wirjiet tar-retina. Ara kif:
- Oħloq immaġni b'riżoluzzjoni għolja li tkun id-doppju tad-daqs tal-immaġni attwali li trid turi fl-email. Per eżempju, jekk trid turi immaġni 300×200, oħloq immaġni 600×400.
- Issejvja l-immaġni b'riżoluzzjoni għolja bl- @ 2x suffiss. Per eżempju, jekk l-immaġni oriġinali tiegħek hija image.png, Issejvja l-verżjoni b'riżoluzzjoni għolja bħala image@2x.png.
- Fil-kodiċi tal-email HTML tiegħek, uża l-kodiċi li ġej biex turi l-immaġni:
<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)]>
huwa kumment kondizzjonali li jintuża biex jimmira verżjonijiet speċifiċi ta' Microsoft Outlook, li juża Microsoft Word biex jirrendi emails HTML. Il-magna li tirrendi HTML ta' Microsoft Word tista' tkun pjuttost differenti minn klijenti oħra tal-email u browsers tal-web, għalhekk ħafna drabi teħtieġ immaniġġjar speċjali. Il-
(gte mso 9)
il-kundizzjoni tiċċekkja jekk il-verżjoni tal-Microsoft Office hijiex akbar minn jew ugwali għal 9, li tikkorrispondi għal Microsoft Office 2000. |(IE)
il-kondizzjoni tiċċekkja jekk il-klijent huwiex Internet Explorer, li ħafna drabi jintuża minn Microsoft Outlook. Email HTML Bil-Display tar-Retina Stampi Ottimizzati
Hawn eżempju ta' kodiċi ta' email HTML li jirrispondu li juri immaġini b'riżoluzzjoni ottimizzata għal wirjiet tar-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>
Għajnuniet dwar l-Immaġni tal-Wiri tar-Retina
Hawn huma xi suġġerimenti addizzjonali dwar l-ottimizzazzjoni tal-Emails HTML tiegħek għal immaġini ottimizzati għall-wirjiet tar-Retina:
- Kun żgur li dejjem ikollok it-tikketti tal-immaġni tiegħek jinkludu l-użu
alt
test biex jipprovdi kuntest għall-immaġni. - Ottimizza l-immaġini għall-web biex tnaqqas id-daqs tal-fajl mingħajr ma tikkomprometti l-kwalità tal-immaġni. Dan jista 'jinkludi l-użu kompressjoni tal-immaġni għodod, tnaqqas in-numru ta 'kuluri użati fl-immaġini, u tibdel id-daqs tal-immaġni għad-dimensjonijiet ottimali tagħha qabel ittella' fuq l-email.
- Evita immaġini kbar fl-isfond li jistgħu jnaqqsu l-ħinijiet tat-tagħbija tal-email.
- GIFs animati jistgħu jkunu akbar fid-daqs tal-fajl minn immaġini statiċi minħabba l-frejms multipli meħtieġa biex toħloq l-animazzjoni, kun żgur li żżommhom sew taħt 1 Mb.