Toisí íomhá

Ba chóir do leathanaigh a chur in iúl don bhrabhsálaí cé mhéad spáis a ghlacfaidh gach íomhá sula gcríochnóidh an íomhá luchtú, ionas nach mbogfaidh téacs ná ábhar eile thart de réir mar a thaispeántar pictiúir. Tuairiscíonn Silktide íomhánna infheicthe nach gcuireann aon spás in áirithe roimh ré.

Cuireann íomhá spás in áirithe nuair a dhearbhaíonn sí tréithe width agus height, nó nuair a bhíonn aspect-ratio ag an íomhá nó ag ceann dá coimeádáin:

<!-- Gan spás in áirithe: léimeann an t-ábhar thíos nuair a lódálann sé seo -->
<img src="hero.jpg" alt="Grianghraf foirne">

<!-- Spás in áirithe le toisí intreacha -->
<img src="hero.jpg" alt="Grianghraf foirne" width="1200" height="800">

<!-- Spás in áirithe le cóimheas gnéithe -->
<img src="hero.jpg" alt="Grianghraf foirne" style="aspect-ratio: 3 / 2; width: 100%; height: auto;">

Cén fáth a bhfuil sé seo tábhachtach

Nuair nach mbíonn méid íomhá ar eolas ag an mbrabhsálaí roimh ré, caithfidh sé an comhad a íoslódáil sular féidir leis leagan amach an leathanaigh a chríochnú, agus bogann an t-ábhar faoin íomhá síos de réir mar a lódálann gach pictiúr. Is é seo an t-athrú carnach ar leagan amach (CLS), ceann de Google agus comhartha rangaithe cuardaigh.

Bíonn athrú ar leagan amach an-chráite freisin: caillfidh léitheoirí a n-áit agus iad ag scrollú, agus is cúis le cnaipí a bhogann i nóiméad na tadhalla cliceálacha de thaisme.

Conas é a shocrú

Cuir tréithe width agus height leis a mheaitseálann toisí nádúrtha na híomhá. Úsáideann an brabhsálaí iad chun spás a chur in áirithe leis na comhréireanna cearta, fiú nuair a dhéanann CSS scálú sofhreagrach ar an íomhá.
Mar mhalairt air sin, socraigh aspect-ratio i CSS ar an íomhá nó ar eilimint chumhdaigh. Is féidir le leaganacha amach sofhreagracha a shuíonn an íomhá go hiomlán laistigh de choimeádán (mar a dhéanann go leor comhpháirteanna íomhá) spás a chur in áirithe ar an mbealach seo:

<!-- Cuireann an cumhdach an spás in áirithe; líonann an íomhá é -->
<div style="position: relative; aspect-ratio: 16 / 9;">
  <img src="hero.jpg" alt="Grianghraf foirne" style="position: absolute; inset: 0; width: 100%; height: 100%;">
</div>

Is féidir le formhór na gcreataí nua-aimseartha agus na gcóras bainistíochta inneachair toisí a aschur go huathoibríoch; seiceáil do chomhpháirt íomhá nó do shocruithe meán.

Mar a thástálann Silktide é seo

Ná déan tástáil ach ar leathanaigh atá incháilithe le haghaidh innéacsú cuardaigh.
Aimsigh gach <img> infheicthe ar an leathanach, agus fág ar lár íomhánna folaithe (amhail picteilíní rianaithe) agus eilimintí atá eisiata agat ón seiceáil.
Glac leis an íomhá má tá tréithe width agus height aici araon.
Mura bhfuil, lorg aspect-ratio CSS (seachas auto) ar an íomhá féin, agus ansin ar gach ceann dá sinsir in ord. Is iad na stíleanna na luachanna ríofa ó bhrabhsálaí fíor a rindreálann an leathanach, mar sin cuirtear rialacha a chuirtear i bhfeidhm trí ranganna agus bileoga stíle san áireamh.
Marcáil gach íomhá atá fágtha ina haonar ionas gur féidir í a aibhsiú ar an leathanach.

Tá an seiceáil seo le feiceáil faoi Luas mar chomhairle agus ní athraíonn sí an scór Luais, a thagann ón scór feidhmíochta Lighthouse. Tomhaiseann Lighthouse athrú ar leagan amach ar na leathanaigh a thástálann sé; aimsíonn an tseiceáil seo na híomhánna is cúis leis ar gach leathanach.

Fabhtcheartú

Tá méid socraithe ag m’íomhá i CSS agus tá sí marcáilte fós

Cuireann bileog stíle a thugann leithead agus airde shocraithe d’íomhá cosc uirthi bogadh freisin, ach ní aithníonn Silktide ach tréithe width agus height nó aspect-ratio. Sin é an fáth gur rabhadh é seo seachas earráid. Mura féidir leis an íomhá bogadh, an toradh.