Íomhánna agus luas: formáidí, méideanna, lódáil leisciúil

Cén fáth a gcinneann íomhánna an t-am lódála

Scríobhann Google gurb iad íomhánna go minic is mó a chuireann le méid iomlán leathanaigh, rud a fhágann go mbíonn leathanaigh mall agus costasach le lódáil. Braitheann dhá cheann de na Core Web Vitals go díreach ar íomhánna. Tomhaiseann Largest Contentful Paint (LCP) an lódáil: molann Google gur cheart don eilimint is mó a bheith le feiceáil laistigh de na chéad 2.5 soicind tar éis don leathanach tosú ag lódáil. Ar go leor leathanach is íomhá í an eilimint sin, mar shampla grianghraf mór ag an mbarr. Tomhaiseann Cumulative Layout Shift (CLS) cobhsaíocht amhairc agus ba cheart dó fanacht faoi 0.1. Brúnn íomhánna a thagann gan spás curtha in áirithe dóibh an téacs síos agus ardaíonn siad an luach seo.

An fhormáid cheart

• Grianghraif: oibríonn JPEG i ngach áit. Is minic a bhíonn WebP agus AVIF i bhfad níos lú ag cáilíocht chomhchosúil.
• Grafaicí le himill ghéara nó le trédhearcacht: PNG, nó WebP agus AVIF, ar féidir leo a bheith trédhearcach freisin.
• Lógónna agus deilbhíní: SVG, mar fanann sé géar ag gach méid agus is gnách go mbíonn sé an-bheag.
• Tacaíonn Google Search le híomhánna san aitreabúid src sna formáidí BMP, GIF, JPEG, PNG, WebP, SVG agus AVIF.

Má thairgeann tú WebP nó AVIF, is féidir leat JPEG a choinneáil mar chúltaca in eilimint picture. Roghnaíonn an brabhsálaí an chéad fhoinse a thuigeann sé.

An méid cheart

Má tá íomhá 2400 picteilín ar leithead ach go dtaispeántar ag 600 picteilín í, cuirtear an chuid is mó dá bearta amú. Easpórtáil íomhánna ag thart ar an leithead a dtaispeántar iad, agus do scáileáin ghéara ag thart ar dhá oiread an leithid sin. Ansin comhbhrúigh iad. I go leor ríomhchlár íomhánna, is leor socrú cáilíochta thart ar lár an scála do ghrianghraif ar an ngréasán. Seiceáil an toradh ag lánmhéid sula gcuireann tú in áit an bhunleagain é.

srcset agus sizes

Ní oireann comhad amháin do gach scáileán riamh. Le srcset tairgeann tú roinnt comhad den íomhá chéanna agus luann tú leithead gach comhaid. Le sizes insíonn tú don bhrabhsálaí cé chomh leathan is a thaispeánfar an íomhá. Roghnaíonn an brabhsálaí ansin an comhad is lú atá géar go leor.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

Sa sampla seo, líonann an íomhá an scáileán ar scáileáin chúnga agus tá sí 700 picteilín ar leithead ar scáileáin níos leithne. Molann Google cúltaca a choinneáil i gcónaí san aitreabúid src. Scríobh fíorthéacs malartach in áit na dtrí phonc.

width agus height in aghaidh aistrithe leagan amach

Gan width agus height, níl a fhios ag an mbrabhsálaí cé mhéad spáis a theastaíonn ó íomhá go dtí go dtagann an comhad. Léimeann an téacs fúithi síos ansin. Molann treoir web.dev ar aistrithe leagan amach: cuir aitreabúidí width agus height le híomhánna agus le heilimintí físe i gcónaí, le méid picteilíní an chomhaid nó ar a laghad leis an gcóimheas treoíochta ceart. Socraíonn brabhsálaithe nua-aimseartha cóimheas treoíochta réamhshocraithe na híomhá ó na luachanna seo agus cuireann siad an spás in áirithe. Sa CSS, coinníonn width: 100% agus height: auto an íomhá solúbtha. Mura féidir leat na haitreabúidí a shocrú, ainmníonn an treoir an t-airí CSS aspect-ratio mar rogha eile.

Lódáil leisciúil

Le loading="lazy" ní lódálann an brabhsálaí íomhá go dtí go dtagann sí gar don limistéar infheicthe. Sábhálann sé seo sonraí d’íomhánna níos faide síos an leathanach. Deir Google faoi lódáil leisciúil: ná cuir í le hábhar is dócha a bheidh le feiceáil láithreach nuair a osclaíonn úsáideoir leathanach. Tá lódáil leisciúil ionsuite an bhrabhsálaí ar fáil d’íomhánna agus d’iframes.

An íomhá LCP

Is í an íomhá is mó ag an mbarr, go minic íomhá bhratach nó príomhghrianghraf an táirge, an comhad is tábhachtaí ar an leathanach. Deir treoir web.dev ar LCP: ná lódáil d’íomhá LCP go leisciúil riamh. Is leid don bhrabhsálaí é fetchpriority="high" chun í a lódáil go luath. De réir na treorach, ní chabhraíonn tosaíocht ard a thuilleadh ar níos mó ná íomhá nó dhó. Aimsíonn an brabhsálaí go déanach íomhánna a gcuireann leabharlann scripte a seoladh i bhfolach in data-src, nó nach bhfuil iontu ach cúlra CSS. Maidir le híomhá chúlra, ainmníonn an treoir réamhlódáil le link rel="preload" san HTML. Giorraíonn AVIF nó WebP agus comhad níos lú an t-am lódála freisin.

Chun a fheiceáil conas a fheidhmíonn do leathanaigh, tagraíonn Google don tuarascáil Core Web Vitals in Search Console. Do leathanach aonair, taispeánann uirlisí feidhmíochta do bhrabhsálaí cén eilimint is eilimint LCP agus cé na heilimintí a aistríonn an leagan amach. Tomhais roimh athrú agus ina dhiaidh, ionas go mbeidh a fhios agat ar chabhraigh sé.

Seicliosta gearr

• An lódáiltear an íomhá is mó ag an mbarr go gnáth, ní go leisciúil?
• An bhfuil width agus height ag gach img, nó an bhfuil an spás curtha in áirithe le aspect-ratio?
• An bhfuil gach comhad thart ar chomh leathan is a thaispeántar é, agus comhbhrúite?
• An dtagann grianghraif mhóra i roinnt leithead le srcset agus sizes?
• An bhfuil comhaid JPEG nó PNG ann a d’fhéadfadh a bheith ina WebP nó AVIF?

Oibrigh le Do4U

Léann an Seiceáil íomhánna leathanach amháin agus gach íomhá air. I gcás gach comhaid tuairiscíonn sí an fhormáid, méid an chomhaid agus na picteilíní, agus ón HTML width agus height, loading, fetchpriority, srcset agus sizes, foinsí picture agus íomhánna cúlra in aitreabúidí style. Tugann Do4U buille faoi thuairim ón HTML faoin íomhá LCP is dóichí. Ní thomhaiseann sé í, mar is é an brabhsálaí a chinneann an fhíor-eilimint LCP. Faigheann tú tábla de na híomhánna leis na torthaí, an meáchan iomlán agus achoimre ghearr. Ní áirítear íomhánna a chuireann JavaScript isteach ná íomhánna cúlra ó chomhaid CSS seachtracha. Ní úsáidtear AI, agus tá an tseiceáil saor in aisce, le teorainn laethúil.

Aimsíonn Do4U leideanna, seiceálann tusa agus cinneann tusa. Deimhnigh an eilimint LCP le huirlisí feidhmíochta do bhrabhsálaí sula n-athraíonn tú an leathanach.