Verkkosivustoa ottaessaan käyttöön kehittäjät käyttävät yleensä samaa kuvaa kaikille näyttökokoille, mikä ei ole hyvä käytäntö, koska selaimen koon muuttamisessa ei voi luottaa. Tällaisessa tilanteessa responsiiviset kuvat tulevat voimaan varmistaen, että kuva ladataan vastaavalle laitteelle sopivassa koossa ja laadussa, mikä lisää sivun latausnopeutta.
Kuinka parantaa sivun latausnopeutta käyttämällä responsiivisia kuvia?
Voit parantaa sivun latausnopeutta responsiivisten kuvien avulla käyttämällä seuraavia menetelmiä:
Esimerkki 1: Paranna sivun latausnopeutta reagoivien kuvien avulla käyttämällä 'srcset'-attribuuttia
Kätevin tapa käyttää responsiivisia kuvia voi olla ' srcset '-attribuutti, joka on kertynyt ' ' -tunniste. Tämän ominaisuuden avulla ohjelmoija voi määrittää erilaisia kuvakokoja, ja selain valitsee automaattisesti sopivimman kuvan käyttäjän näytön kokoon nähden. Seuraavassa esittely:
DOCTYPE html >
< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< otsikko > otsikko >
pää >
< kehon >
< img src = 'F:\JOB TECHNICAL ARTIKKELIT\imgre.png' kaikki = 'Responsiivinen kuva'
srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 400w, F:\JOB TECHNICAL ARTIKKELIT\imgre.png 800w, F:\JOB TECHNICAL ARTIKKELIT\imgre.png 1200w'
/>
kehon >
html >
Tässä koodissa:
- ' srcset ” on mukana attribuutti, joka sisältää kuvan polun ja eri leveydet joka kerta.
- Se on sellainen, että kuva ' F:\JOB TEKNINEN ARTIKKELI\imgre.png 400w ' edustaa kuvapolkua, jonka leveys on ' 400 ”pikseliä.
- Näiden tietojen perusteella selain analysoi käyttäjän näytön koon perusteella sopivimman ladattavan kuvan siten, että pienemmät näytöt näyttävät pienempiä kuvia, mikä säästää kaistanleveyttä.
Lähtö
Esimerkki 2: Paranna sivun latausnopeutta responsiivisten kuvien avulla määrittämällä eri pikselitiheydet
Tässä esimerkissä kuvapolku määritetään eri pikselitiheyksien kanssa korkearesoluutioisille näytöille. Tämä voidaan saavuttaa ' srcset ”-attribuutti, joka näkyy alla:
DOCTYPE html >< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< otsikko > otsikko >
pää >
< kehon >
< img src = 'F:\JOB TECHNICAL ARTIKKELIT\imgre.png' kaikki = 'Responsiivinen kuva' srcset = 'F:\JOB TECHNICAL ARTIKKELI\imgre.png 1x, F:\JOB TECHNICAL ARTIKKELIT\imgre.png 1,5x, F:\JOB TECHNICAL ARTIKKELI\imgre.png 2x'
/>
kehon >
html >
Määritä tässä koodinpätkässä kuvan polku kolmesti vaihtelevalla pikselitiheydellä. Se on sellainen, että selain valitsee sopivimman/sopivimman kuvan varmistaakseen huippulaadun eri näytöillä.
Huomautus: ' 1x ” pikseli on oletusarvo, joten käyttäjä voi valita, liittääkö se kuvan polkuun vai ei.
Lähtö
Esimerkki 3: Paranna sivun latausnopeutta responsiivisten kuvien avulla käyttämällä 'koko'-attribuuttia
Joissakin tilanteissa voi olla rajoituksia, joissa todellinen kuvakoko näytöllä vaihtelee näytön leveydestä. Tämän ongelman ratkaisemiseksi ' koot ” -attribuuttia voidaan käyttää sisällyttämään kuvakoon mediakyselyjen tai kiinteän koon mukaan. Alla koodiesittely:
DOCTYPE html >< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< otsikko > otsikko >
pää >
< kehon >
< img src = 'F:\JOB TECHNICAL ARTIKKELIT\imgre.png' kaikki = 'Responsiivinen kuva' srcset = 'F:\JOB TECHNICAL ARTICLES\imgre.png 50w, F:\JOB TECHNICAL ARTIKKELIT\imgre.png 800w, F:\JOB TECHNICAL ARTIKKELIT\imgre.png 1200w'
koot = '(max-width: 800px) 100vw, 800px'
/>
kehon >
html >
Tässä koodilohkossa ' koot ”-attribuutti integroi mediakyselyt ja -koot. Se on sellainen, että se ohjaa selainta valitsemaan kuvakoon käyttäjän näytön leveyden mukaan. Tämä varmistaa, että kuvat eivät ylitä tavoiteleveyttä.
Lähtö
Tärkeitä huomioita 'koko'-attribuutin käytössä
' koot ”-attribuutti myös alla lueteltuina:
- Kun käytät useita mediakyselyitä ' koot ”-attribuuttia, varmista, että ensimmäinen tosimediakysely on valittuna. Varmista myös, että mediakyselyt on järjestetty tarkimmasta vähiten tarkempaan.
- 'Koot'-attribuutti ei tue prosenttikokoja, koska selain ei tiedä, kuinka leveä jokin prosentteina määritetty on, ennen kuin se on tietoinen yläelementin leveydestä.
Esimerkki 4: Paranna sivun latausnopeutta responsiivisten kuvien avulla käyttämällä '
'
< html >
< pää >
< meta merkkisetti = 'utf-8' >
< meta nimi = 'näkymä' sisältö = 'width=device-width, original-scale=1' >
< otsikko > otsikko >
pää >
< kehon >
< kuva >
< lähde media = '(max-width: 100px)' srcset = 'F:\JOB TECHNICAL ARTIKKELIT\imgbanner.png' />
< img src = 'F:\JOB TECHNICAL ARTIKKELIT\imgre.png' kaikki = 'Responsiivinen kuva' />
kuva >
kehon >
html >
Näiden koodirivien mukaan:
- Määritä '
' elementti, joka kerää ' ”-elementtejä eri kuville ja anna selaimen valita sopiva käyttäjän näytön koon perusteella. - Myös, jos mikään '
' elementit sopivat näytön kokoon, kuvassa määritetty kuva ”-tunniste toimii varavarana.
- Tämä lisää vaihtoehtoisen kuvan odottamattomassa tapauksessa, mikä ylläpitää parannettua sivun latausnopeutta.
Lähtö
Johtopäätös
Sivun latausnopeutta voidaan parantaa responsiivisilla kuvilla käyttämällä ' srcset '-attribuutti, joka määrittää eri pikselitiheydet käyttämällä ' koot '-attribuutin kautta tai '