Meintiau delweddau penodol

Mae Silktide yn gwirio bod y delweddau ar eich tudalen yn datgan eu maint, fel y gall y porwr gadw'r swm cywir o le ar gyfer pob un cyn eu llwytho i lawr. Mae delweddau heb faint datganedig yn achosi i'r dudalen neidio o gwmpas wrth iddynt gyrraedd.

<!-- Problem: dim maint, nid yw'r porwr yn cadw lle -->
<img src="hero.jpg" alt="Casgliad y gwanwyn">

<!-- Wedi'i drwsio: mae'r porwr yn cadw lle 1200x600 ar unwaith -->
<img src="hero.jpg" alt="Casgliad y gwanwyn" width="1200" height="600">

Pam mae hyn yn bwysig

Hyd nes y bydd ffeil delwedd yn cyrraedd, nid oes gan borwr unrhyw ffordd o wybod pa mor fawr fydd y ddelwedd oni bai bod y dudalen yn dweud hynny. Heb y wybodaeth honno, mae'n rendro'r dudalen heb fwlch, yna'n gwthio popeth i lawr pan fydd pob delwedd yn llwytho — felly mae testun yn neidio yng nghanol brawddeg ac mae ymwelwyr yn tapio'r peth anghywir wrth i dargedau symud ar yr eiliad olaf.

Caiff y neidio hwn ei fesur fel symudiad cynllun, sy'n rhan o Google, sydd hefyd yn cyfrannu at safle chwilio. Delweddau heb faint yw ei hachos unigol mwyaf cyffredin.

Sut i'w drwsio

Ychwanegwch briodoleddau width a height at bob delwedd a fideo, gan eu paru â chyfrannau gwirioneddol y ffeil. Mae'r porwr yn eu defnyddio i gadw lle ar y gymhareb agwedd gywir hyd yn oed pan fydd yn graddio'r ddelwedd yn ymatebol.
Ar gyfer delweddau ymatebol, cadwch y priodoleddau a gadewch i CSS, megis max-width: 100%; height: auto;, wneud y graddio — mae'r lle a gedwir yn graddio gydag ef.
Os na allwch ychwanegu priodoleddau, cadwch le yn CSS yn lle hynny gan ddefnyddio'r briodwedd aspect-ratio ar y ddelwedd neu ei chynhwysydd.
Gwiriwch eich : mae'r rhan fwyaf yn mewnosod dimensiynau'n awtomatig pan gaiff delweddau eu hychwanegu drwy'r golygydd, felly mae meintiau coll yn aml yn deillio o a ysgrifennwyd â llaw, templedi, neu gynnwys wedi'i fewnosod.

Sut mae Silktide yn profi hyn

Llwythwch y dudalen mewn porwr go iawn, gan ddefnyddio'r math o ddyfais, cyflymder cysylltiad, a lleoliad prawf sydd wedi'u ffurfweddu ar gyfer eich profion cyflymder.
Dewch o hyd i bob delwedd a rendrir heb faint penodol — dim priodoleddau width/height defnyddiadwy a dim CSS sy'n gosod ei dimensiynau.
Rhowch wybod am bob delwedd heb faint, ynghyd â'i lleoliad ar y dudalen.

Datrys problemau

Mae'r dudalen yn edrych yn iawn pan fyddaf yn ei llwytho

Gyda delweddau wedi'u storio yn y storfa neu gysylltiad cyflym, gall delweddau gyrraedd mor gyflym fel nad oes dim yn neidio'n weladwy. Mae ymwelwyr ar rwydweithiau arafach yn gweld yr un dudalen yn ymgynnull fesul darn. Nid yw lle a gedwir yn costio dim pan fydd y ddelwedd yn llwytho'n gyflym, ac mae'n atal y naid pan nad yw'n llwytho'n gyflym.

Oni fydd meintiau sefydlog yn torri fy nyluniad ymatebol?

Na. Mae porwyr modern yn trin y priodoleddau width a height fel cymhareb agwedd y ddelwedd, nid fel maint sefydlog, felly gall CSS raddio'r ddelwedd o hyd i ffitio unrhyw sgrin. Mae'r priodoleddau a CSS yn gweithio gyda'i gilydd.