Med uvajanjem spletnega mesta razvijalci običajno uporabljajo isto sliko za vse velikosti zaslona, kar ni dobra praksa, saj se ni mogoče zanesti na brskalnik pri spreminjanju velikosti. V takšni situaciji začnejo veljati odzivne slike, ki zagotavljajo, da se slika prenese v primerni velikosti in kakovosti za ustrezno napravo, s čimer se poveča hitrost nalaganja strani.
Kako povečati hitrost nalaganja strani z uporabo odzivnih slik?
Če želite povečati hitrost nalaganja strani prek odzivnih slik, razmislite o naslednjih metodologijah:
1. primer: izboljšajte hitrost nalaganja strani prek odzivnih slik z uporabo atributa »srcset«
Najprimernejši pristop za uporabo odzivnih slik je lahko uporaba » srcset atribut, nakopičen v ' oznaka. Ta atribut programerju omogoča, da določi različne velikosti slik, brskalnik pa samodejno izbere najprimernejšo sliko glede na velikost zaslona uporabnika. Sledi demonstracija:
DOCTYPE html >
< html >
< glavo >
< meta nabor znakov = 'utf-8' >
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1' >
< naslov > naslov >
glavo >
< telo >
< img src = 'F:\TEHNIČNI ČLANKI ZA DELO\imgre.png' vse = 'Odzivna slika'
srcset = 'F:\JOB TEHNIČNI IZDELKI\imgre.png 400w, F:\JOB TEHNIČNI IZDELKI\imgre.png 800w, F:\JOB TEHNIČNI IZDELKI\imgre.png 1200w'
/>
telo >
html >
V tej kodi:
- ' srcset « je vključen atribut, ki vsebuje pot slike in vsakokrat različne širine.
- Tako je, da slika ' F:\ZAPOSLITEV TEHNIČNI ARTIKLI\imgre.png 400w « predstavlja slikovno pot s širino « 400 ” slikovnih pik.
- Na podlagi teh informacij brskalnik analizira najprimernejšo sliko za prenos glede na uporabnikovo velikost zaslona, tako da manjši zasloni prikazujejo manjše slike in s tem ohranjajo pasovno širino.
Izhod
2. primer: izboljšajte hitrost nalaganja strani prek odzivnih slik z določitvijo različnih gostot slikovnih pik
V tem primeru bo določena pot slike skupaj z različnimi gostotami slikovnih pik za zaslone z visoko ločljivostjo. To je mogoče doseči z ' srcset «, prikazano spodaj:
DOCTYPE html >< html >
< glavo >
< meta nabor znakov = 'utf-8' >
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1' >
< naslov > naslov >
glavo >
< telo >
< img src = 'F:\TEHNIČNI ČLANKI ZA DELO\imgre.png' vse = 'Odzivna slika' srcset = 'F:\JOB TEHNIČNI IZDELKI\imgre.png 1x, F:\JOB TEHNIČNI IZDELKI\imgre.png 1,5x, F:\JOB TEHNIČNI IZDELKI\imgre.png 2x'
/>
telo >
html >
V tem izrezku kode trikrat določite pot slike z različnimi gostotami slikovnih pik. Gre namreč za to, da se brskalnik odloči za najprimernejšo sliko, ki zagotavlja vrhunsko kakovost na različnih zaslonih.
Opomba: ' 1x ” pikslov je privzeta vrednost, tako da lahko uporabnik sam izbira, ali jo bo povezal s potjo slike ali ne.
Izhod
3. primer: izboljšajte hitrost nalaganja strani prek odzivnih slik z uporabo atributa »sizes«
V nekaterih primerih lahko pride do omejitve, ko se dejanska velikost slike na zaslonu razlikuje od širine zaslona. Za rešitev te težave je ' velikosti ” se lahko uporabi za vključitev velikosti slike glede na medijske poizvedbe ali fiksno velikost. Spodaj je predstavitev kode:
DOCTYPE html >< html >
< glavo >
< meta nabor znakov = 'utf-8' >
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1' >
< naslov > naslov >
glavo >
< telo >
< img src = 'F:\TEHNIČNI ČLANKI ZA DELO\imgre.png' vse = 'Odzivna slika' srcset = 'F:\JOB TEHNIČNI IZDELKI\imgre.png 50w, F:\JOB TEHNIČNI IZDELKI\imgre.png 800w, F:\JOB TEHNIČNI IZDELKI\imgre.png 1200w'
velikosti = '(max-width: 800px) 100vw, 800px'
/>
telo >
html >
V tem bloku kode je » velikosti ” združuje medijske poizvedbe in velikosti. Tako vodi brskalnik, da izbere velikost slike glede na širino zaslona uporabnika. To zagotavlja, da slike ne presegajo največje ciljne širine.
Izhod
Pomembni premisleki pri uporabi atributa »sizes«.
Obstaja nekaj omejitev pri uporabi » velikosti «, kot tudi spodaj naveden atribut:
- Pri uporabi več medijskih poizvedb v » velikosti ”, se prepričajte, da je izbrana prva prava medijska poizvedba. Prepričajte se tudi, da so medijske poizvedbe razvrščene od najbolj specifičnih do najmanj specifičnih.
- Atribut »velikosti« ne podpira velikosti v odstotkih, ker brskalnik ne ve, kako široko bo nekaj, kar je določeno v odstotkih, dokler ne ugotovi širine nadrejenega elementa.
Primer 4: Povečajte hitrost nalaganja strani prek odzivnih slik z uporabo elementa “
'
< html >
< glavo >
< meta nabor znakov = 'utf-8' >
< meta ime = 'viewport' vsebino = 'width=device-width, initial-scale=1' >
< naslov > naslov >
glavo >
< telo >
< slika >
< vir mediji = '(največja širina: 100 slikovnih pik)' srcset = 'F:\TEHNIČNI ČLANKI ZA DELO\imgbanner.png' />
< img src = 'F:\TEHNIČNI ČLANKI ZA DELO\imgre.png' vse = 'Odzivna slika' />
slika >
telo >
html >
Glede na te vrstice kode:
- Določite '
' element, ki kopiči ' ” za različne slike in pustite, da brskalnik izbere ustrezno glede na velikost zaslona uporabnika. - Tudi, če nobeden od '
” so primerni za velikost zaslona, slika, določena v ” služi kot rezerva.
- To posledično doda nadomestno sliko v nepredvidenem primeru in s tem ohrani izboljšano hitrost nalaganja strani.
Izhod
Zaključek
Hitrost nalaganja strani je mogoče povečati z odzivnimi slikami z uporabo » srcset ', ki določa različne gostote slikovnih pik z uporabo ' velikosti ' ali prek '