Mens de implementerer et websted, bruger udviklerne normalt det samme billede til alle skærmstørrelser, hvilket ikke er en god praksis, da browseren ikke kan stole på, når størrelsen skal ændres. I en sådan situation træder de responsive billeder i kraft og sikrer, at billedet downloades i den passende størrelse og kvalitet til den tilsvarende enhed, hvorved sidens indlæsningshastighed forbedres.
Sådan forbedres sideindlæsningshastigheden ved hjælp af responsive billeder?
Overvej følgende metoder for at forbedre sideindlæsningshastigheden via responsive billeder:
Eksempel 1: Forøg sideindlæsningshastigheden via responsive billeder ved hjælp af 'srcset'-attributten
Den mest bekvemme tilgang til at anvende responsive billeder kan være at bruge ' srcset ' attribut akkumuleret i ' ” tag. Denne egenskab gør det muligt for programmøren at angive forskellige billedstørrelser, og browseren vælger automatisk det bedst egnede billede i forhold til brugerens skærmstørrelse. Følgende er demonstrationen:
DOCTYPE html >
< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< titel > titel >
hoved >
< legeme >
< img src = 'F:\JOB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt billede'
srcset = 'F:\JOB TEKNISK ARTIKEL\imgre.png 400w, F:\JOB TEKNISK ARTIKEL\imgre.png 800w, F:\JOB TEKNISK ARTIKEL\imgre.png 1200w'
/>
legeme >
html >
I denne kode:
- Det ' srcset ”-attribut er inkluderet, der omfatter billedets sti og forskellige bredder hver gang.
- Det er sådan, at billedet ' F:\JOB TEKNISKE ARTIKLER\imgre.png 400w ' repræsenterer en billedsti med en bredde på ' 400 ' pixels.
- Baseret på denne information analyserer browseren det bedst egnede billede til download baseret på brugerens skærmstørrelse, således at de mindre skærme viser mindre billeder og derved sparer båndbredde.
Produktion
Eksempel 2: Forøg sideindlæsningshastigheden via responsive billeder ved at angive forskellige pixeltætheder
I dette eksempel vil billedstien blive specificeret sammen med forskellige pixeltætheder for skærme med høj opløsning. Dette kan opnås via ' srcset '-attribut, vist nedenfor:
DOCTYPE html >< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< titel > titel >
hoved >
< legeme >
< img src = 'F:\JOB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt billede' srcset = 'F:\JOB TEKNISKE ARTIKLER\imgre.png 1x, F:\JOB TEKNISKE ARTIKLER\imgre.png 1.5x, F:\JOB TEKNISKE ARTIKLER\imgre.png 2x'
/>
legeme >
html >
I dette kodestykke skal du angive billedstien tre gange med varierende pixeltætheder. Det er sådan, at browseren vælger det mest passende/egnede billede for at sikre topkvalitet på forskellige skærme.
Bemærk: Det ' 1x ” pixel er standardværdien, så det er et valg for brugeren at knytte til billedets sti eller ej.
Produktion
Eksempel 3: Forøg sideindlæsningshastigheden via responsive billeder ved at bruge attributten 'størrelser'
I nogle situationer kan der være en begrænsning, hvor den faktiske billedstørrelse på skærmen varierer fra skærmens bredde. For at løse dette problem, ' størrelser ”-attributten kan bruges til at inkludere billedstørrelsen med hensyn til medieforespørgsler eller en fast størrelse. Nedenfor er kodedemonstrationen:
DOCTYPE html >< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< titel > titel >
hoved >
< legeme >
< img src = 'F:\JOB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt billede' srcset = 'F:\JOB TEKNISKE ARTIKLER\imgre.png 50w, F:\JOB TEKNISKE ARTIKLER\imgre.png 800w, F:\JOB TEKNISKE ARTIKLER\imgre.png 1200w'
størrelser = '(maks. bredde: 800px) 100vw, 800px'
/>
legeme >
html >
I denne kodeblok er ' størrelser ”-attribut integrerer medieforespørgsler og størrelser. Det er sådan, at det guider browseren til at vælge billedstørrelsen i forhold til brugerens skærmbredde. Dette sikrer, at billedet/billederne ikke overskrider den maksimale målbredde.
Produktion
Vigtige overvejelser ved brug af attributten 'størrelser'.
Der er nogle begrænsninger ved at bruge ' størrelser ”-attributten er også angivet nedenfor:
- Når du bruger flere medieforespørgsler i ' størrelser ” attribut, skal du sørge for, at den første ægte medieforespørgsel er valgt. Sørg også for, at medieforespørgslerne er sorteret fra mest specifikke til mindst specifikke.
- Attributten 'størrelser' understøtter ikke procentstørrelser, da browseren ikke er klar over, hvor bredt noget angivet i procenter vil være, før den er opmærksom på det overordnede elements bredde.
Eksempel 4: Forøg sideindlæsningshastigheden via responsive billeder ved hjælp af '
Det '
< html >
< hoved >
< meta tegnsæt = 'utf-8' >
< meta navn = 'udsigtsport' indhold = 'width=device-width, initial-scale=1' >
< titel > titel >
hoved >
< legeme >
< billede >
< kilde medier = '(max-width: 100px)' srcset = 'F:\JOB TEKNISKE ARTIKLER\imgbanner.png' />
< img src = 'F:\JOB TEKNISKE ARTIKLER\imgre.png' alt = 'Responsivt billede' />
billede >
legeme >
html >
Ifølge disse kodelinjer:
- Angiv '
' element, der akkumulerer ' ” elementer til forskellige billeder og lad browseren vælge det passende baseret på brugerens skærmstørrelse. - Også, hvis ingen af '
' elementer er egnede til skærmstørrelsen, billedet angivet i ' ”-tag fungerer som en reserve.
- Dette tilføjer som resultat et alternativt billede i et uforudset tilfælde og bibeholder derved den forbedrede sideindlæsningshastighed.
Produktion
Konklusion
Sideindlæsningshastigheden kan forbedres via responsive billeder ved hjælp af ' srcset ' attribut, der angiver forskellige pixeltætheder ved at bruge ' størrelser ' attribut eller via '