Margaidheachd post-d & fèin-ghluasad

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:

  1. 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.
  2. 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.
  3. 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.

Douglas Karr

Douglas Karr tha CMO de OSNAIDHEAN BHO IFRINN agus am fear a stèidhich an Martech Zone. Tha Douglas air dusanan de luchd-tòiseachaidh soirbheachail MarTech a chuideachadh, air cuideachadh le dìcheall iomchaidh de chòrr air $ 5 billean ann an togail agus tasgaidhean Martech, agus a’ leantainn air adhart a ’cuideachadh chompanaidhean ann a bhith a’ buileachadh agus ag fèin-ghluasad an ro-innleachdan reic is margaidheachd. Tha Douglas na chruth-atharrachadh didseatach a tha aithnichte gu h-eadar-nàiseanta agus eòlaiche agus neach-labhairt MarTech. Tha Dùbhghlas cuideachd na ùghdar foillsichte air iùl Dummie agus leabhar stiùireadh gnìomhachais.

artaigealan co-cheangailte

Putan air ais dhan mhullach
Dùin

Adblock air a lorg

Martech Zone comasach air an t-susbaint seo a thoirt dhut gun chosgais sam bith oir bidh sinn a’ dèanamh airgead air an làrach againn tro theachd-a-steach sanasachd, ceanglaichean ceangailte, agus urrasachd. Bhithinn toilichte nan toireadh tu air falbh an neach-bacadh sanasachd agad fhad ‘s a tha thu a’ coimhead air an làrach againn.