Dok postavljaju web stranicu, programeri obično koriste istu sliku za sve veličine zaslona, što nije dobra praksa jer se ne može osloniti na preglednik za promjenu veličine. U takvoj situaciji, responzivne slike stupaju na snagu osiguravajući da se slika preuzima u odgovarajućoj veličini i kvaliteti za odgovarajući uređaj, čime se povećava brzina učitavanja stranice.
Kako povećati brzinu učitavanja stranice pomoću responzivnih slika?
Kako biste povećali brzinu učitavanja stranice putem responzivnih slika, razmotrite sljedeće metodologije:
Primjer 1: Povećajte brzinu učitavanja stranice putem odgovarajućih slika pomoću atributa 'srcset'
Najprikladniji pristup primjeni responzivnih slika može biti korištenje ' srcset ' akumuliran u ' ” oznaka. Ovaj atribut omogućuje programeru da odredi različite veličine slike, a preglednik automatski odabire najprikladniju sliku s obzirom na veličinu zaslona korisnika. Slijedi demonstracija:
DOCTYPE html >
< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< titula > titula >
glava >
< tijelo >
< img src = 'F:\TEHNIČKI ČLANCI ZA POSAO\imgre.png' sve = 'Responzivna slika'
srcset = 'F:\TEHNIČKI ARTIKLI ZA POSAO\imgre.png 400w, F:\TEHNIČKI ARTIKLI ZA POSAO\imgre.png 800w, F:\TEHNIČKI ARTIKLI ZA POSAO\imgre.png 1200w'
/>
tijelo >
html >
U ovom kodu:
- ' srcset ” uključen je atribut koji svaki put sadrži putanju slike i različite širine.
- Takav je da slika “ F:\POSAO TEHNIČKI ARTIKLI\imgre.png 400w ” predstavlja putanju slike koja ima širinu od “ 400 ” piksela.
- Na temelju tih informacija, preglednik analizira najprikladniju sliku za preuzimanje na temelju veličine zaslona korisnika tako da manji zasloni prikazuju manje slike, čime se štedi propusnost.
Izlaz
Primjer 2: Povećajte brzinu učitavanja stranice putem responzivnih slika određivanjem različitih gustoća piksela
U ovom primjeru, putanja slike bit će navedena zajedno s različitim gustoćama piksela za zaslone visoke razlučivosti. To se može postići putem ' srcset ”, prikazan u nastavku:
DOCTYPE html >< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< titula > titula >
glava >
< tijelo >
< img src = 'F:\TEHNIČKI ČLANCI ZA POSAO\imgre.png' sve = 'Responzivna slika' srcset = 'F:\TEHNIČKI ČLANCI ZA POSAO\imgre.png 1x, F:\TEHNIČKI ČLANCI ZA POSAO\imgre.png 1,5x, F:\TEHNIČKI ČLANCI ZA POSAO\imgre.png 2x'
/>
tijelo >
html >
U ovom isječku koda odredite putanju slike tri puta s različitim gustoćama piksela. To je takvo da se preglednik odlučuje za najprikladniju/prikladnu sliku kako bi osigurao vrhunsku kvalitetu na različitim ekranima.
Bilješka: ' 1x ” piksel je zadana vrijednost tako da je izbor na korisniku hoće li ga povezati s putanjom slike ili ne.
Izlaz
Primjer 3: Povećajte brzinu učitavanja stranice putem odgovarajućih slika pomoću atributa 'veličine'
U nekim situacijama može postojati ograničenje kada se stvarna veličina slike na zaslonu razlikuje od širine zaslona. Za rješavanje ovog problema, ' veličine ” atribut se može koristiti za uključivanje veličine slike s obzirom na medijske upite ili fiksnu veličinu. Ispod je demonstracija koda:
DOCTYPE html >< html >
< glava >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< titula > titula >
glava >
< tijelo >
< img src = 'F:\TEHNIČKI ČLANCI ZA POSAO\imgre.png' sve = 'Responzivna slika' srcset = 'F:\TEHNIČKI ARTIKLI ZA POSAO\imgre.png 50w, F:\TEHNIČKI ARTIKLI ZA POSAO\imgre.png 800w, F:\TEHNIČKI ARTIKLI ZA POSAO\imgre.png 1200w'
veličine = '(maksimalna širina: 800 px) 100vw, 800 px'
/>
tijelo >
html >
U ovom bloku koda, ' veličine ” atribut integrira medijske upite i veličine. Takav je da vodi preglednik da izabere veličinu slike s obzirom na širinu zaslona korisnika. Time se osigurava da slike ne premašuju ciljanu maksimalnu širinu.
Izlaz
Važna razmatranja pri korištenju atributa 'veličine'.
Postoje neka ograničenja u korištenju ' veličine ” atribut koji je naveden u nastavku:
- Kada koristite više medijskih upita u ' veličine ”, provjerite je li odabran prvi pravi medijski upit. Također provjerite jesu li medijski upiti poredani od najspecifičnijih do najmanje specifičnih.
- Atribut 'veličine' ne podržava veličine postotaka budući da preglednik nije svjestan koliko će biti široko nešto navedeno u postocima dok ne sazna širinu nadređenog elementa.
Primjer 4: Povećajte brzinu učitavanja stranice putem odgovarajućih slika pomoću elementa “
'
< html >
< glavu >
< meta skup znakova = 'utf-8' >
< meta Ime = 'viewport' sadržaj = 'width=device-width, initial-scale=1' >
< titula > titula >
glavu >
< tijelo >
< slika >
< izvor medijima = '(maksimalna širina: 100 px)' srcset = 'F:\TEHNIČKI ČLANCI ZA POSAO\imgbanner.png' />
< img src = 'F:\TEHNIČKI ČLANCI ZA POSAO\imgre.png' sve = 'Responzivna slika' />
slika >
tijelo >
html >
Prema ovim linijama koda:
- Navedite '
' element koji akumulira ' ” za različite slike i pustite preglednik da odabere odgovarajuću na temelju veličine zaslona korisnika. - Također, ako ništa od “
' elementi su prikladni za veličinu zaslona, slika navedena u ' ” služi kao zamjena.
- To rezultira dodavanjem alternativne slike u nepredviđenom slučaju, čime se održava poboljšana brzina učitavanja stranice.
Izlaz
Zaključak
Brzina učitavanja stranice može se poboljšati putem responzivnih slika pomoću ' srcset ', određujući različite gustoće piksela, koristeći ' veličine ' ili putem '