Veebisaidi juurutamisel kasutavad arendajad tavaliselt kõigi ekraanisuuruste jaoks sama pilti, mis ei ole hea tava, kuna brauseri suuruse muutmisel ei saa loota. Sellises olukorras rakenduvad reageerivad pildid, tagades pildi allalaadimise vastavale seadmele sobivas suuruses ja kvaliteediga, suurendades seeläbi lehe laadimise kiirust.
Kuidas suurendada lehe laadimiskiirust tundlike piltide abil?
Lehekülje laadimiskiiruse suurendamiseks tundlike piltide abil kaaluge järgmisi meetodeid.
Näide 1: lehe laadimiskiiruse suurendamine tundlike piltide abil, kasutades atribuuti „srcset”
Kõige mugavam viis reageerivate piltide rakendamiseks on kasutada „ srcset atribuut , mis on kogutud jaotisesse ' ” silti. See atribuut võimaldab programmeerijal määrata erinevaid pildi suurusi ja brauser valib automaatselt kasutaja ekraanisuuruse jaoks sobivaima pildi. Demonstratsioon on järgmine:
DOCTYPE html >
< html >
< pea >
< meta charset = 'utf-8' >
< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1' >
< pealkiri > pealkiri >
pea >
< keha >
< img src = 'F:\JOB TEHNILISED ARTIKLID\imgre.png' kõike = 'Reageeriv pilt'
srcset = 'F:\JOB TEHNILISED ARTIKLID\imgre.png 400w, F:\TÖÖTEHNILISED ARTIKLID\imgre.png 800w, F:\TÖÖTEHNILISED ARTIKLID\imgre.png 1200w'
/>
keha >
html >
Selles koodis:
- ' srcset ” on lisatud atribuut, mis sisaldab pildi teed ja iga kord erinevat laiust.
- See on selline, et pilt ' F:\TÖÖ TEHNILISED ARTIKLID\imgre.png 400w ' tähistab pildi teed laiusega ' 400 ” pikslit.
- Selle teabe põhjal analüüsib brauser kasutaja ekraanisuuruse põhjal allalaadimiseks sobivaima pildi, nii et väiksematel ekraanidel kuvatakse väiksemaid pilte, säästes seeläbi ribalaiust.
Väljund
Näide 2: suurendage lehe laadimiskiirust reageerivate piltide abil, määrates erineva pikslitiheduse
Selles näites määratakse kõrge eraldusvõimega kuvade jaoks pildi teekond koos erinevate pikslitihedustega. Seda saab saavutada ' srcset ” atribuut, mida on näidatud allpool:
DOCTYPE html >< html >
< pea >
< meta märgistik = 'utf-8' >
< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1' >
< pealkiri > pealkiri >
pea >
< keha >
< img src = 'F:\JOB TEHNILISED ARTIKLID\imgre.png' kõike = 'Reageeriv pilt' srcset = 'F:\TÖÖTEHNILISED ARTIKLID\imgre.png 1x, F:\TÖÖTEHNILISED ARTIKLID\imgre.png 1,5x, F:\TÖÖTEHNILISED ARTIKLID\imgre.png 2x'
/>
keha >
html >
Selles koodilõigul määrake pildi teekond kolm korda erineva pikslitihedusega. See on selline, et brauser valib kõige sobivama/sobivama pildi, et tagada tippkvaliteet erinevatel ekraanidel.
Märge: ' 1x ” piksel on vaikeväärtus, nii et kasutaja saab valida, kas seostada pildi teega või mitte.
Väljund
Näide 3: suurendage lehe laadimiskiirust tundlike piltide abil, kasutades atribuuti 'suurused'
Mõnes olukorras võib esineda piirang, kui tegelik pildi suurus ekraanil erineb ekraani laiusest. Selle probleemi lahendamiseks ' suurused ” atribuuti saab kasutada pildi suuruse lisamiseks meediumipäringutele või fikseeritud suurusele. Allpool on koodi esitlus:
DOCTYPE html >< html >
< pea >
< meta märgistik = 'utf-8' >
< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1' >
< pealkiri > pealkiri >
pea >
< keha >
< img src = 'F:\JOB TEHNILISED ARTIKLID\imgre.png' kõike = 'Reageeriv pilt' srcset = 'F:\TÖÖTEHNILISED ARTIKLID\imgre.png 50w, F:\TÖÖTEHNILISED ARTIKLID\imgre.png 800w, F:\JOB TEHNILISED ARTIKLID\imgre.png 1200w'
suurused = '(max-width: 800px) 100vw, 800px'
/>
keha >
html >
Selles koodiplokis on ' suurused ” atribuut integreerib meediumipäringud ja suurused. See on selline, et see juhendab brauserit valima pildi suuruse vastavalt kasutaja ekraani laiusele. See tagab, et kujutis(ed) ei ületa sihtmärgi maksimaalset laiust.
Väljund
Olulised kaalutlused atribuudi „suurused” kasutamisel
Kasutamisel on mõned piirangud suurused ” atribuut, mis on loetletud ka allpool:
- Mitme meediumipäringu kasutamisel ' suurused ” atribuudiga, veenduge, et esimene tõelise meedia päring on valitud. Samuti veenduge, et meediapäringud oleksid järjestatud kõige spetsiifilisemast kuni kõige vähem spetsiifiliseni.
- Atribuut „suurused” ei toeta protsentuaalseid suurusi, kuna brauser ei tea, kui lai miski protsentides määratud on, kuni ta on teadlik emaelemendi laiusest.
Näide 4: lehe laadimiskiiruse suurendamine tundlike piltide abil, kasutades elementi „
'
< html >
< pea >
< meta charset = 'utf-8' >
< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1' >
< pealkiri > pealkiri >
pea >
< keha >
< pilt >
< allikas meedia = '(max-width: 100px)' srcset = 'F:\JOB TEHNILISED ARTIKLID\imgbanner.png' />
< img src = 'F:\JOB TEHNILISED ARTIKLID\imgre.png' kõike = 'Reageeriv pilt' />
pilt >
keha >
html >
Nende koodiridade järgi:
- Määrake '
element, mis kogub ” elemente erinevate piltide jaoks ja lase brauseril valida kasutaja ekraanisuuruse põhjal sobiv. - Samuti, kui ükski '
” elemendid sobivad ekraani suurusele, pildil määratud pilt ” märgend toimib tagavarana.
- Selle tulemusena lisatakse ettenägematul juhul alternatiivne pilt, säilitades seeläbi lehe kiirema laadimise.
Väljund
Järeldus
Lehe laadimiskiirust saab kiirendada tundlike piltide abil, kasutades ' srcset ' atribuut, mis määrab erinevad pikslitihedused, kasutades ' suurused ' või atribuudi '