Dimensiynau delweddau

Dylai tudalennau ddweud wrth y porwr faint o le y bydd pob delwedd yn ei gymryd cyn i'r ddelwedd orffen llwytho, fel nad yw testun a chynnwys arall yn neidio o gwmpas wrth i luniau ymddangos. Mae Silktide yn rhoi gwybod am ddelweddau gweladwy nad ydynt yn cadw lle ymlaen llaw.

Mae delwedd yn cadw lle pan fydd yn datgan y priodoleddau width a height, neu pan fydd gan y ddelwedd neu un o'i chynwysyddion aspect-ratio :

<!-- Dim lle wedi'i gadw: mae'r cynnwys isod yn neidio pan fydd hwn yn llwytho -->
<img src="hero.jpg" alt="Llun o'r tîm">

<!-- Lle wedi'i gadw gyda dimensiynau cynhenid -->
<img src="hero.jpg" alt="Llun o'r tîm" width="1200" height="800">

<!-- Lle wedi'i gadw gyda chymhareb agwedd -->
<img src="hero.jpg" alt="Llun o'r tîm" style="aspect-ratio: 3 / 2; width: 100%; height: auto;">

Pam mae hyn yn bwysig

Pan nad yw'r porwr yn gwybod maint delwedd ymlaen llaw, rhaid iddo lawrlwytho'r ffeil cyn y gall orffen gosod y dudalen, ac mae'r cynnwys o dan y ddelwedd yn symud i lawr wrth i bob llun lwytho. Dyma symudiad cynllun cronnus (CLS), un o Google a signal safle chwilio.

Mae symudiad cynllun hefyd yn wirioneddol annifyr: mae darllenwyr yn colli eu lle wrth sgrolio, ac mae botymau sy'n symud ar adeg tap yn achosi cliciau damweiniol.

Sut i'w drwsio

Ychwanegwch briodoleddau width a height sy'n cyfateb i ddimensiynau naturiol y ddelwedd. Mae'r porwr yn eu defnyddio i gadw lle â'r cyfrannau cywir hyd yn oed pan fydd CSS yn graddio'r ddelwedd yn ymatebol.
Fel arall, gosodwch aspect-ratio yn CSS ar y ddelwedd neu ar elfen lapio. Gall cynlluniau ymatebol sy'n gosod y ddelwedd yn absoliwt y tu mewn i gynhwysydd (fel y mae llawer o gydrannau delwedd yn ei wneud) gadw lle fel hyn:

<!-- Mae'r elfen lapio'n cadw'r lle; mae'r ddelwedd yn ei lenwi -->
<div style="position: relative; aspect-ratio: 16 / 9;">
  <img src="hero.jpg" alt="Llun o'r tîm" style="position: absolute; inset: 0; width: 100%; height: 100%;">
</div>

Gall y rhan fwyaf o fframweithiau modern a systemau rheoli cynnwys allbwn dimensiynau'n awtomatig; gwiriwch eich cydran ddelwedd neu osodiadau cyfryngau.

Sut mae Silktide yn profi hyn

Profwch dudalennau sy'n gymwys i'w mynegeio gan beiriannau chwilio yn unig.
Dewch o hyd i bob <img> gweladwy ar y dudalen, gan hepgor delweddau cudd (fel picseli olrhain) ac elfennau rydych wedi'u heithrio rhag eu gwirio.
Pasiwch y ddelwedd os oes ganddi'r priodoleddau width a height.
Fel arall, chwiliwch am aspect-ratio CSS (heblaw am auto) ar y ddelwedd ei hun, ac yna ar bob un o'i hynafiaid yn eu tro. Y gwerthoedd wedi'u cyfrifo o borwr go iawn sy'n rendro'r dudalen yw'r arddulliau, felly caiff rheolau a gymhwysir drwy ddosbarthiadau a thaflenni arddull eu cyfrif.
Tynnwch sylw at bob delwedd sy'n weddill yn unigol fel y gellir ei hamlygu ar y dudalen.

Mae'r gwiriad hwn yn ymddangos o dan Cyflymder fel cyngor ac nid yw'n newid y sgôr Cyflymder, sy'n dod o sgôr perfformiad Lighthouse. Mae Lighthouse yn mesur symudiad cynllun ar y tudalennau y mae'n eu profi; mae'r gwiriad hwn yn dod o hyd i'r delweddau sy'n ei achosi ar bob tudalen.

Datrys problemau

Mae gan fy nelwedd faint sefydlog yn CSS ac mae'n dal i gael ei nodi

Mae taflen arddull sy'n rhoi lled ac uchder sefydlog i ddelwedd hefyd yn ei hatal rhag symud, ond dim ond priodoleddau width a height neu aspect-ratio y mae Silktide yn eu cydnabod. Dyna pam mai rhybudd yw hwn yn hytrach na gwall. Os na all y ddelwedd symud, y canfyddiad.