Mens de distribuerer et nettsted, bruker utviklerne vanligvis det samme bildet for alle skjermstørrelsene, noe som ikke er en god praksis siden nettleseren ikke kan stole på for å endre størrelse. I en slik situasjon trer de responsive bildene i kraft og sikrer at bildet lastes ned i passende størrelse og kvalitet for den tilsvarende enheten, og øker dermed sideinnlastingshastigheten.
Hvordan forbedre sideinnlastingshastigheten ved å bruke responsive bilder?
For å forbedre sideinnlastingshastigheten via responsive bilder, bør du vurdere følgende metoder:
Eksempel 1: Forbedre sideinnlastingshastigheten via responsive bilder ved å bruke «srcset»-attributtet
Den mest praktiske tilnærmingen til å bruke responsive bilder kan være å bruke ' srcset '-attributt samlet i ' ' stikkord. Dette attributtet gjør det mulig for programmereren å spesifisere ulike bildestørrelser, og nettleseren velger automatisk det mest passende bildet med hensyn til brukerens skjermstørrelse. Følgende er demonstrasjonen:
DOCTYPE html >
< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< tittel > tittel >
hode >
< kropp >
< img src = 'F:\JOBB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt bilde'
srcset = 'F:\JOBB TEKNISK ARTIKKEL\imgre.png 400w, F:\JOBB TEKNISK ARTIKKEL\imgre.png 800w, F:\JOBB TEKNISK ARTIKKEL\imgre.png 1200w'
/>
kropp >
html >
I denne koden:
- « srcset ”-attributtet er inkludert som omfatter bildets bane og forskjellige bredder hver gang.
- Det er slik at bildet ' F:\JOBB TEKNISKE ARTIKLER\imgre.png 400w ' representerer en bildebane som har en bredde på ' 400 ' piksler.
- Basert på denne informasjonen analyserer nettleseren det mest passende bildet for nedlasting basert på brukerens skjermstørrelse, slik at de mindre skjermene viser mindre bilder, og dermed sparer båndbredden.
Produksjon
Eksempel 2: Forbedre sideinnlastingshastigheten via responsive bilder ved å spesifisere forskjellige pikseltettheter
I dette eksemplet vil bildebanen spesifiseres sammen med forskjellige pikseltettheter for skjermer med høy oppløsning. Dette kan oppnås via ' srcset '-attributt, vist nedenfor:
DOCTYPE html >< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< tittel > tittel >
hode >
< kropp >
< img src = 'F:\JOBB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt bilde' srcset = 'F:\JOBB TEKNISK ARTIKKEL\imgre.png 1x, F:\JOBB TEKNISK ARTIKKEL\imgre.png 1.5x, F:\JOBB TEKNISK ARTIKKEL\imgre.png 2x'
/>
kropp >
html >
I denne kodebiten spesifiserer du bildebanen tre ganger med varierende pikseltettheter. Det er slik at nettleseren velger det mest passende/egnede bildet for å sikre topp kvalitet på ulike skjermer.
Merk: « 1x ” piksel er standardverdien, så det er et valg for brukeren å knytte til bildets bane eller ikke.
Produksjon
Eksempel 3: Forbedre sideinnlastingshastigheten via responsive bilder ved å bruke «størrelser»-attributtet
I noen situasjoner kan det være en begrensning der den faktiske bildestørrelsen på skjermen varierer fra skjermbredden. For å løse dette problemet, ' størrelser ”-attributtet kan brukes til å inkludere bildestørrelsen med hensyn til medieforespørsler eller en fast størrelse. Nedenfor er kodedemonstrasjonen:
DOCTYPE html >< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< tittel > tittel >
hode >
< kropp >
< img src = 'F:\JOBB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt bilde' srcset = 'F:\JOBB TEKNISK ARTIKKEL\imgre.png 50w, F:\JOBB TEKNISK ARTIKKEL\imgre.png 800w, F:\JOBB TEKNISK ARTIKKEL\imgre.png 1200w'
størrelser = '(maks-bredde: 800px) 100vw, 800px'
/>
kropp >
html >
I denne kodeblokken er ' størrelser ”-attributtet integrerer mediespørringene og størrelsene. Det er slik at det veileder nettleseren til å velge bildestørrelsen i forhold til brukerens skjermbredde. Dette sørger for at bildet/bildene ikke overskrider målets maksimale bredde.
Produksjon
Viktige hensyn når du bruker 'størrelser'-attributtet
Det er noen begrensninger ved bruk av ' størrelser ”-attributtet er også oppført nedenfor:
- Når du bruker flere mediespørringer i ' størrelser ”-attributt, sørg for at den første sanne mediespørringen er valgt. Sørg også for at medieforespørslene er sortert fra mest spesifikke til minst spesifikke.
- «størrelser»-attributtet støtter ikke prosentstørrelser siden nettleseren ikke er klar over hvor bredt noe spesifisert i prosenter vil være før den er klar over det overordnede elementets bredde.
Eksempel 4: Forbedre sideinnlastingshastigheten via responsive bilder ved å bruke «
«
< html >
< hode >
< meta tegnsett = 'utf-8' >
< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >
< tittel > tittel >
hode >
< kropp >
< bilde >
< kilde media = '(maks-bredde: 100px)' srcset = 'F:\JOBB TEKNISKE ARTIKLER\imgbanner.png' />
< img src = 'F:\JOBB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt bilde' />
bilde >
kropp >
html >
I henhold til disse kodelinjene:
- Spesifiser '
' element som samler ' '-elementer for forskjellige bilder og la nettleseren velge det passende basert på brukerens skjermstørrelse. - Dessuten, hvis ingen av '
'-elementer er egnet for skjermstørrelsen, bildet spesifisert i ' ”-taggen fungerer som en reserve.
- Dette legger til et alternativt bilde i et uforutsett tilfelle, og opprettholder dermed den forbedrede sideinnlastingshastigheten.
Produksjon
Konklusjon
Sideinnlastingshastigheten kan forbedres via responsive bilder ved å bruke ' srcset '-attributt, som spesifiserer forskjellige pikseltettheter, ved å bruke ' størrelser ' attributt, eller via '