Izvietojot vietni, izstrādātāji parasti izmanto vienu un to pašu attēlu visiem ekrāna izmēriem, kas nav laba prakse, jo nevar paļauties uz pārlūkprogrammas izmēru maiņu. Šādā situācijā reaģējošie attēli stājas spēkā, nodrošinot, ka attēls tiek lejupielādēts atbilstošajā ierīcē atbilstošā izmērā un kvalitātē, tādējādi palielinot lapas ielādes ātrumu.
Kā palielināt lapas ielādes ātrumu, izmantojot atsaucīgus attēlus?
Lai palielinātu lapas ielādes ātrumu, izmantojot adaptīvus attēlus, izmantojiet tālāk norādītās metodes.
1. piemērs: uzlabojiet lapas ielādes ātrumu, izmantojot atsaucīgus attēlus, izmantojot atribūtu “srcset”
Ērtākā pieeja reaģējošu attēlu lietošanai var būt “ srcset ” atribūts, kas uzkrāts ” tagu. Šis atribūts ļauj programmētājam norādīt dažādus attēlu izmērus, un pārlūkprogramma automātiski izvēlas lietotāja ekrāna izmēram vispiemērotāko attēlu. Tālāk ir parādīta demonstrācija:
DOCTYPE html >
< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< virsraksts > virsraksts >
galvu >
< ķermenis >
< img src = 'F:\DARBA TEHNISKIE RAKSTI\imgre.png' viss = 'Atsaucīgs attēls'
srcset = 'F:\DARBA TEHNISKIE RAKSTI\imgre.png 400w, F:\DARBA TEHNISKIE RAKSTI\imgre.png 800w, F:\DARBA TEHNISKIE RAKSTI\imgre.png 1200w'
/>
ķermenis >
html >
Šajā kodā:
- ' srcset ” ir iekļauts atribūts, kas katru reizi ietver attēla ceļu un dažādus platumus.
- Tas ir tāds, ka attēls ' F:\DARBA TEHNISKIE RAKSTI\imgre.png 400w ' apzīmē attēla ceļu, kura platums ir ' 400 ” pikseļi.
- Pamatojoties uz šo informāciju, pārlūkprogramma analizē lejupielādēšanai piemērotāko attēlu, pamatojoties uz lietotāja ekrāna izmēru, lai mazākos ekrānos tiktu rādīti mazāki attēli, tādējādi saglabājot joslas platumu.
Izvade
2. piemērs: uzlabojiet lapas ielādes ātrumu, izmantojot atsaucīgus attēlus, norādot dažādus pikseļu blīvumus
Šajā piemērā attēla ceļš tiks norādīts kopā ar dažādu pikseļu blīvumu augstas izšķirtspējas displejiem. To var panākt, izmantojot ' srcset ” atribūts, kas parādīts zemāk:
DOCTYPE html >< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< virsraksts > virsraksts >
galvu >
< ķermenis >
< img src = 'F:\DARBA TEHNISKIE RAKSTI\imgre.png' viss = 'Atsaucīgs attēls' srcset = 'F:\DARBA TEHNISKIE RAKSTI\imgre.png 1x, F:\DARBA TEHNISKIE RAKSTI\imgre.png 1,5x, F:\DARBA TEHNISKIE RAKSTI\imgre.png 2x'
/>
ķermenis >
html >
Šajā koda fragmentā trīs reizes norādiet attēla ceļu ar mainīgu pikseļu blīvumu. Tas ir tāds, ka pārlūkprogramma izvēlas piemērotāko/piemērotāko attēlu, lai nodrošinātu visaugstāko kvalitāti dažādos ekrānos.
Piezīme: ' 1x ” pikselis ir noklusējuma vērtība, tāpēc lietotājs var izvēlēties, vai to saistīt ar attēla ceļu vai nē.
Izvade
3. piemērs: uzlabojiet lapas ielādes ātrumu, izmantojot atsaucīgus attēlus, izmantojot atribūtu “izmēri”
Dažās situācijās var būt ierobežojumi, ja faktiskais attēla izmērs ekrānā atšķiras no ekrāna platuma. Lai risinātu šo problēmu, “ izmēriem ” var izmantot, lai iekļautu attēla izmēru saistībā ar multivides vaicājumiem vai fiksētu izmēru. Zemāk ir koda demonstrācija:
DOCTYPE html >< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< virsraksts > virsraksts >
galvu >
< ķermenis >
< img src = 'F:\DARBA TEHNISKIE RAKSTI\imgre.png' viss = 'Atsaucīgs attēls' srcset = 'F:\DARBA TEHNISKIE RAKSTI\imgre.png 50w, F:\DARBA TEHNISKIE RAKSTI\imgre.png 800w, F:\DARBA TEHNISKIE RAKSTI\imgre.png 1200w'
izmēriem = '(maksimālais platums: 800 pikseļi) 100 vw, 800 pikseļi'
/>
ķermenis >
html >
Šajā koda blokā ' izmēriem ” atribūts integrē multivides vaicājumus un izmērus. Tas ir tāds, ka tas palīdz pārlūkprogrammai izvēlēties attēla izmēru atkarībā no lietotāja ekrāna platuma. Tas nodrošina, ka attēls(-i) nepārsniedz mērķa maksimālo platumu.
Izvade
Svarīgi apsvērumi, lietojot atribūtu “izmēri”.
Ir daži ierobežojumi, izmantojot ' izmēriem ” atribūts, kā arī norādīts zemāk:
- Izmantojot vairākus multivides vaicājumus sadaļā “ izmēriem ” atribūtu, pārliecinieties, vai ir izvēlēts pirmais patiesais multivides vaicājums. Tāpat pārliecinieties, vai multivides vaicājumi ir sakārtoti no visprecīzākā līdz vismazāk specifiskajam.
- Atribūts “izmēri” neatbalsta procentuālos izmērus, jo pārlūkprogramma nezina, cik plats būs kaut kas, kas norādīts procentos, kamēr tas neapzinās vecākelementa platumu.
4. piemērs: uzlabojiet lapas ielādes ātrumu, izmantojot atsaucīgus attēlus, izmantojot elementu “
'
< html >
< galvu >
< meta rakstzīmju kopa = 'utf-8' >
< meta nosaukums = 'skata logs' saturu = 'platums=ierīces platums, sākotnējais mērogs=1' >
< virsraksts > virsraksts >
galvu >
< ķermeni >
< bilde >
< avots plašsaziņas līdzekļi = '(maksimālais platums: 100 pikseļi)' srcset = 'F:\DARBA TEHNISKIE RAKSTI\imgbanner.png' />
< img src = 'F:\DARBA TEHNISKIE RAKSTI\imgre.png' viss = 'Atsaucīgs attēls' />
bilde >
ķermeni >
html >
Saskaņā ar šīm koda rindām:
- Norādiet '
' elements, kas uzkrāj ' ” elementi dažādiem attēliem un ļauj pārlūkprogrammai izvēlēties atbilstošo, pamatojoties uz lietotāja ekrāna izmēru. - Turklāt, ja neviens no “
” elementi ir piemēroti ekrāna izmēram, attēlā norādītais attēls ” atzīme kalpo kā rezerves variants.
- Tādējādi neparedzētā gadījumā tiek pievienots alternatīvs attēls, tādējādi saglabājot palielinātu lapas ielādes ātrumu.
Izvade
Secinājums
Lapas ielādes ātrumu var palielināt, izmantojot reaģējošus attēlus, izmantojot “ srcset ” atribūtu, norādot dažādus pikseļu blīvumus, izmantojot “ izmēriem ” atribūtu vai izmantojot “