Mar a chleachdas tu ìomhaighean àrd-rèiteachaidh airson taisbeanaidhean Retina nad phost-d HTML
Is e teirm margaidheachd a th’ ann an taisbeanadh retina a bhios a’ cleachdadh Apple gus cunntas a thoirt air taisbeanadh àrd-rèiteachaidh aig a bheil dùmhlachd picteil àrd gu leòr nach urrainn dha sùil an duine eadar-dhealachadh a dhèanamh air piogsail fa leth aig astar seallaidh àbhaisteach. Mar as trice tha dùmhlachd picteil aig taisbeanadh reitine de 300 piogsail gach òirleach (ppi) no nas àirde, a tha gu math nas àirde na taisbeanadh àbhaisteach le dùmhlachd picteil de 72 ppi.
Tha taisbeanaidhean retina a-nis gu math àbhaisteach airson taisbeanaidhean, coimpiutairean-uchd, innealan gluasadach, agus clàran. Tha mòran de luchd-saothrachaidh a-nis a’ tabhann thaisbeanaidhean àrd-rèiteachaidh le dùmhlachd picteil a tha a rèir no nas àirde na thaisbeanaidhean Apple's Retina.
CSS gus ìomhaigh le rùn nas àirde a thaisbeanadh airson taisbeanadh retina
Faodaidh tu an còd CSS a leanas a chleachdadh gus ìomhaigh àrd-rèiteachaidh a luchdachadh airson taisbeanadh Retina. Bidh an còd seo a’ lorg dùmhlachd picteil an inneil agus a’ luchdachadh an ìomhaigh leis an @2x iar-leasachan airson taisbeanaidhean Retina, fhad ‘s a tha thu a’ luchdachadh an ìomhaigh rùn àbhaisteach airson taisbeanaidhean eile.
@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');
}
Is e dòigh eile a bhith a’ cleachdadh grafaigean vector no SVG ìomhaighean, as urrainn sgèile gu rùn sam bith gun a bhith a’ call càileachd. Seo eisimpleir:
<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>
San eisimpleir seo, tha an còd SVG freumhaichte gu dìreach ann am post-d HTML a’ cleachdadh an <svg>
tag. Tha an viewBox
tha feart a’ mìneachadh tomhasan ìomhaigh SVG, fhad ‘s a tha an xmlns
tha feart a’ sònrachadh àite-ainm XML airson SVG.
Tha max-width
tha seilbh air a shuidheachadh air an div
eileamaid gus dèanamh cinnteach gu bheil an ìomhaigh SVG a ’sgèileadh gu fèin-ghluasadach gus freagairt air an àite a tha ri fhaighinn, suas ri leud as àirde de 300px sa chùis seo. Is e seo an cleachdadh as fheàrr airson dèanamh cinnteach gu bheil ìomhaighean SVG air an taisbeanadh gu ceart air a h-uile inneal agus teachdaiche post-d.
Note: Faodaidh taic SVG atharrachadh a rèir an neach-dèiligidh post-d, mar sin tha e cudromach do phost-d a dhearbhadh air ioma-chleachdaiche gus dèanamh cinnteach gu bheil an ìomhaigh SVG air a thaisbeanadh gu ceart.
Is e dòigh eile air puist-d HTML a chòdachadh airson taisbeanaidhean Retina a chleachdadh srcset
. Le bhith a’ cleachdadh feart srcset leigidh sin leat ìomhaighean àrd-rèiteachaidh a thoirt seachad airson taisbeanaidhean Retina fhad ‘s a nì thu cinnteach gu bheil na h-ìomhaighean den mheud cheart airson innealan le rùn nas ìsle.
<img src="image@2x.jpg" srcset="image.jpg 600w, image@2x.jpg 1200w" alt="My Image" style="width:100%;max-width:600px;">
Anns an eisimpleir seo, tha an srcset
tha feart a’ toirt seachad dà thùs ìomhaigh: image.jpg
airson innealan le rùn de 600 piogsail no nas lugha, agus image@2x.jpg
airson innealan le rùn de 1200 piogsail no barrachd. Tha an 600w
agus 1200w
Bidh tuairisgeulan a’ sònrachadh meud nan ìomhaighean ann am piogsail, a chuidicheas am brobhsair gus faighinn a-mach dè an ìomhaigh a thèid a luchdachadh sìos stèidhichte air rùn an inneil.
Chan eil a h-uile cleachdaiche post-dealain a 'toirt taic don srcset
feart. An ìre de thaic airson srcset
Faodaidh iad atharrachadh gu farsaing a rèir an neach-dèiligidh post-d, agus mar sin tha e cudromach na puist-d agad a dhearbhadh air grunn teachdaichean gus dèanamh cinnteach gu bheil na h-ìomhaighean air an taisbeanadh gu ceart.
HTML airson ìomhaighean ann am post-d air a mheudachadh airson taisbeanaidhean Retina
tha e comasach post-d HTML freagairteach a chòdachadh a sheallas ìomhaigh gu ceart aig rùn a tha air a bharrrachadh airson taisbeanaidhean retina. Seo mar a tha:
- Cruthaich ìomhaigh àrd-rèiteachaidh a tha dà uiread na meud na h-ìomhaigh fhìor a tha thu airson a thaisbeanadh sa phost-d. Mar eisimpleir, ma tha thu airson ìomhaigh 300 × 200 a thaisbeanadh, cruthaich ìomhaigh 600 × 400.
- Sàbhail an ìomhaigh àrd-rùn leis an fhaidhle @2x iar-leasachan. Mar eisimpleir, ma tha an dealbh tùsail agad image.png, sàbhail an dreach àrd-rèiteachaidh mar dealbh@2x.png.
- Anns a’ chòd post-d HTML agad, cleachd an còd a leanas gus an ìomhaigh a thaisbeanadh:
<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)]>
na bheachd cumhach a thathas a’ cleachdadh gus cuimseachadh air dreachan sònraichte de Microsoft Outlook, a bhios a’ cleachdadh Microsoft Word gus puist-d HTML a thoirt seachad. Faodaidh einnsean tairgse HTML Microsoft Word a bhith gu math eadar-dhealaichte bho luchd-dèiligidh post-d eile agus brobhsairean lìn, agus mar sin bidh feum air làimhseachadh sònraichte gu tric. Tha an
(gte mso 9)
staid a’ dearbhadh a bheil an tionndadh Microsoft Office nas motha na no co-ionann ri 9, a tha a rèir Microsoft Office 2000. |(IE)
sgrùdadh staid ma tha an neach-dèiligidh Internet Explorer, a bhios gu tric air a chleachdadh le Microsoft Outlook. Post-d HTML Le Retina a’ taisbeanadh ìomhaighean Optimized
Seo eisimpleir de chòd puist-d HTML freagairteach a sheallas ìomhaigh aig rùn a tha air a bharrrachadh airson taisbeanaidhean reitine:
<!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>
Molaidhean Ìomhaigh Taisbeanaidh Retina
Seo cuid de mholaidhean a bharrachd mu bhith ag àrdachadh na puist-d HTML agad airson ìomhaighean air an ùrachadh airson taisbeanaidhean Retina:
- Dèan cinnteach gum bi na tagaichean ìomhaigh agad an-còmhnaidh a’ toirt a-steach cleachdadh
alt
teacsa gus co-theacsa a thoirt don ìomhaigh. - Meudaich ìomhaighean airson an lìon gus meud faidhle a lughdachadh gun a bhith a’ toirt buaidh air càileachd ìomhaigh. Faodaidh seo gabhail a-steach cleachdadh teannachadh ìomhaigh innealan, a’ lughdachadh na h-àireimh de dhathan a thathas a’ cleachdadh san ìomhaigh, agus ag atharrachadh an ìomhaigh gu na tomhasan as fheàrr mus luchdaich thu suas e chun phost-d.
- Seachain dealbhan mòra cùl-fhiosrachaidh a dh’ fhaodadh amannan luchdachadh post-d a lughdachadh.
- Faodaidh GIFan beòthail a bhith nas motha ann am meud faidhle na ìomhaighean statach air sgàth na h-iomadh frèam a dh’ fheumar gus am beòthalachd a chruthachadh, dèan cinnteach gun cùm thu iad gu math fo 1 Mb.