Diegdami svetainę kūrėjai dažniausiai naudoja tą patį vaizdą visiems ekrano dydžiams, o tai nėra gera praktika, nes negalima pasikliauti naršyklės dydžiu. Esant tokiai situacijai, reaguojantys vaizdai pradeda veikti ir užtikrina, kad vaizdas būtų atsisiunčiamas atitinkamam įrenginiui tinkamo dydžio ir kokybės, taip padidinant puslapio įkėlimo greitį.
Kaip padidinti puslapio įkėlimo greitį naudojant reaguojančius vaizdus?
Jei norite padidinti puslapio įkėlimo greitį naudodami reaguojančius vaizdus, apsvarstykite šias metodikas:
1 pavyzdys: padidinkite puslapio įkėlimo greitį naudodami reaguojančius vaizdus, naudodami atributą „srcset“
Patogiausias būdas pritaikyti reaguojančius vaizdus yra naudoti „ srcset “ atributas, sukauptas “ “ žymą. Šis atributas leidžia programuotojui nurodyti įvairius vaizdo dydžius, o naršyklė automatiškai pasirenka tinkamiausią vaizdą pagal vartotojo ekrano dydį. Toliau pateikiama demonstracija:
DOCTYPE html >
< html >
< galva >
< meta simbolių rinkinys = 'utf-8' >
< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >
< titulą > titulą >
galva >
< kūnas >
< img src = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png' viskas = „Reaguojantis vaizdas“
srcset = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png 400w, F:\JOB TECHNINIAI STRAIPSNIAI\imgre.png 800w, F:\JOB TECHNINIAI STRAIPSNIAI\imgre.png 1200w'
/>
kūnas >
html >
Šiame kode:
- „ srcset “ įtrauktas atributas, kuris kiekvieną kartą apima vaizdo kelią ir skirtingus pločius.
- Taip yra, kad vaizdas ' F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png 400w ' reiškia vaizdo kelią, kurio plotis ' 400 “ pikselių.
- Remdamasi šia informacija, naršyklė analizuoja tinkamiausią atsisiųsti vaizdą, atsižvelgdama į vartotojo ekrano dydį, kad mažesniuose ekranuose būtų rodomi mažesni vaizdai ir taip išsaugomas pralaidumas.
Išvestis
2 pavyzdys: padidinkite puslapio įkėlimo greitį naudodami reaguojančius vaizdus, nurodydami skirtingą pikselių tankį
Šiame pavyzdyje vaizdo kelias bus nurodytas kartu su skirtingu pikselių tankiu didelės raiškos ekranams. Tai galima pasiekti naudojant „ srcset “ atributas, parodytas toliau:
DOCTYPE html >< html >
< galva >
< meta simbolių rinkinys = 'utf-8' >
< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >
< titulą > titulą >
galva >
< kūnas >
< img src = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png' viskas = „Atsakomas vaizdas“ srcset = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png 1x, F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png 1,5x, F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png 2x'
/>
kūnas >
html >
Šiame kodo fragmente tris kartus nurodykite vaizdo kelią su skirtingu pikselių tankiu. Jis yra toks, kad naršyklė pasirenka tinkamiausią / tinkamiausią vaizdą, kad užtikrintų aukščiausią kokybę įvairiuose ekranuose.
Pastaba: „ 1x pikselis yra numatytoji reikšmė, todėl vartotojas gali pasirinkti susieti su vaizdo keliu, ar ne.
Išvestis
3 pavyzdys: padidinkite puslapio įkėlimo greitį naudodami reaguojančius vaizdus, naudodami atributą „dydžiai“
Kai kuriais atvejais gali būti taikomi apribojimai, kai tikrasis vaizdo dydis ekrane skiriasi nuo ekrano pločio. Norėdami išspręsti šią problemą, „ dydžiai “ atributas gali būti naudojamas norint įtraukti vaizdo dydį, atsižvelgiant į medijos užklausas arba fiksuotą dydį. Žemiau yra kodo demonstracija:
DOCTYPE html >< html >
< galva >
< meta simbolių rinkinys = 'utf-8' >
< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >
< titulą > titulą >
galva >
< kūnas >
< img src = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png' viskas = „Reaguojantis vaizdas“ srcset = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png 50w, F:\JOB TECHNINIAI STRAIPSNIAI\imgre.png 800w, F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png 1200w'
dydžiai = '(maks. plotis: 800 piks.) 100 vw, 800 piks.'
/>
kūnas >
html >
Šiame kodo bloke „ dydžiai “ atributas integruoja medijos užklausas ir dydžius. Jis yra toks, kad pagal jį naršyklė gali pasirinkti vaizdo dydį, atsižvelgiant į vartotojo ekrano plotį. Taip užtikrinama, kad vaizdas (-iai) neviršytų nustatyto maksimalaus pločio.
Išvestis
Svarbūs aspektai naudojant „dydžių“ atributą
Yra tam tikrų apribojimų naudojant „ dydžiai “ atributas, taip pat išvardytas žemiau:
- Kai naudojate kelias medijos užklausas „ dydžiai “, įsitikinkite, kad pasirinkta pirmoji tikrosios medijos užklausa. Be to, įsitikinkite, kad medijos užklausos yra suskirstytos nuo konkretiausių iki mažiausiai specifinių.
- Atributas „dydžiai“ nepalaiko procentinių dydžių, nes naršyklė nežino, kokio pločio bus kažkas, nurodyta procentais, kol nesužinos pirminio elemento pločio.
4 pavyzdys: padidinkite puslapio įkėlimo greitį naudodami reaguojančius vaizdus naudodami elementą „
„
< html >
< galva >
< meta simbolių rinkinys = 'utf-8' >
< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1' >
< titulą > titulą >
galva >
< kūnas >
< paveikslėlį >
< šaltinis žiniasklaida = '(maks. plotis: 100 piks.)' srcset = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgbanner.png' />
< img src = 'F:\DARBO TECHNINIAI STRAIPSNIAI\imgre.png' viskas = „Atsakomas vaizdas“ />
paveikslėlį >
kūnas >
html >
Pagal šias kodo eilutes:
- Nurodykite '
elementas, kuris kaupia <šaltinis> “ elementus skirtingiems vaizdams ir leiskite naršyklei pasirinkti tinkamą pagal vartotojo ekrano dydį. - Be to, jei nė vienas iš „ <šaltinis> “ elementai tinka ekrano dydžiui, vaizdas nurodytas „
“ žyma yra atsarginė.
- Dėl to nenumatytu atveju pridedamas alternatyvus vaizdas ir taip išlaikomas padidintas puslapio įkėlimo greitis.
Išvestis
Išvada
Puslapio įkėlimo greitis gali būti padidintas naudojant reaguojančius vaizdus naudojant „ srcset “ atributas, nurodantis skirtingą pikselių tankį, naudojant „ dydžiai “ atributas arba per „