Bij het implementeren van een website gebruiken de ontwikkelaars meestal dezelfde afbeelding voor alle schermformaten, wat geen goede gewoonte is, omdat er niet op de browser kan worden vertrouwd voor het wijzigen van de grootte. In een dergelijke situatie treden de responsieve afbeeldingen in werking en zorgen ervoor dat de afbeelding wordt gedownload met de geschikte grootte en kwaliteit voor het overeenkomstige apparaat, waardoor de laadsnelheid van de pagina wordt verbeterd.
Hoe kunt u de laadsnelheid van pagina’s verbeteren met responsieve afbeeldingen?
Om de laadsnelheid van de pagina via responsieve afbeeldingen te verbeteren, kunt u de volgende methoden overwegen:
Voorbeeld 1: Verbeter de laadsnelheid van pagina's via responsieve afbeeldingen met behulp van het kenmerk 'srcset'
De handigste benadering voor het toepassen van responsieve afbeeldingen is het gebruik van de “ srcset ' attribuut verzameld in de ' ' label. Met dit attribuut kan de programmeur verschillende afbeeldingsformaten specificeren, en de browser kiest automatisch de meest geschikte afbeelding met betrekking tot de schermgrootte van de gebruiker. Hieronder volgt de demonstratie:
DOCTYPEhtml >
< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< titel > titel >
hoofd >
< lichaam >
< afb src = 'F:\VACATURE TECHNISCHE ARTIKELEN\imgre.png' alles = 'Responsief beeld'
srcset = 'F:\JOB TECHNISCHE ARTIKELEN\imgre.png 400w, F:\JOB TECHNISCHE ARTIKELEN\imgre.png 800w, F:\JOB TECHNISCHE ARTIKELEN\imgre.png 1200w'
/>
lichaam >
html >
In deze code:
- De ' srcset ”-attribuut is opgenomen dat elke keer het pad van de afbeelding en verschillende breedtes omvat.
- Het is zo dat het beeld “ F:\VACATURE TECHNISCHE ARTIKELEN\imgre.png 400w ” vertegenwoordigt een afbeeldingspad met een breedte van “ 400 ”pixels.
- Op basis van deze informatie analyseert de browser de meest geschikte afbeelding om te downloaden op basis van de schermgrootte van de gebruiker, zodat de kleinere schermen kleinere afbeeldingen weergeven, waardoor bandbreedte wordt bespaard.
Uitvoer
Voorbeeld 2: Verbeter de laadsnelheid van pagina's via responsieve afbeeldingen door verschillende pixeldichtheden op te geven
In dit voorbeeld wordt het afbeeldingspad gespecificeerd samen met verschillende pixeldichtheden voor weergaven met hoge resolutie. Dit kan worden bereikt via de “ srcset ” attribuut, hieronder gedemonstreerd:
DOCTYPEhtml >< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< titel > titel >
hoofd >
< lichaam >
< afb src = 'F:\VACATURE TECHNISCHE ARTIKELEN\imgre.png' alles = 'Responsief beeld' srcset = 'F:\JOB TECHNISCHE ARTIKELEN\imgre.png 1x, F:\JOB TECHNISCHE ARTIKELEN\imgre.png 1.5x, F:\JOB TECHNISCHE ARTIKELEN\imgre.png 2x'
/>
lichaam >
html >
Geef in dit codefragment driemaal het afbeeldingspad op met verschillende pixeldichtheden. Het is zo dat de browser kiest voor het meest geschikte/geschikte beeld om topkwaliteit op verschillende schermen te garanderen.
Opmerking: De ' 1x Pixel is de standaardwaarde, dus het is een keuze voor de gebruiker om al dan niet aan het pad van de afbeelding te koppelen.
Uitvoer
Voorbeeld 3: Verbeter de laadsnelheid van pagina's via responsieve afbeeldingen met behulp van het kenmerk 'sizes'
In sommige situaties kan er een beperking zijn waarbij de werkelijke afbeeldingsgrootte op het scherm afwijkt van de schermbreedte. Om dit probleem aan te pakken, heeft de “ maten ”-attribuut kan worden gebruikt om de afbeeldingsgrootte op te nemen met betrekking tot mediaquery's of een vaste grootte. Hieronder vindt u de codedemonstratie:
DOCTYPEhtml >< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< titel > titel >
hoofd >
< lichaam >
< afb src = 'F:\VACATURE TECHNISCHE ARTIKELEN\imgre.png' alles = 'Responsief beeld' srcset = 'F:\JOB TECHNISCHE ARTIKELEN\imgre.png 50w, F:\JOB TECHNISCHE ARTIKELEN\imgre.png 800w, F:\JOB TECHNISCHE ARTIKELEN\imgre.png 1200w'
maten = '(max. breedte: 800px) 100vw, 800px'
/>
lichaam >
html >
In dit codeblok wordt de “ maten ”-attribuut integreert de mediaquery's en -formaten. Het is zodanig dat het de browser begeleidt om de afbeeldingsgrootte te kiezen in verhouding tot de schermbreedte van de gebruiker. Dit zorgt ervoor dat de afbeelding(en) de beoogde maximale breedte niet overschrijden.
Uitvoer
Belangrijke overwegingen bij het gebruik van het kenmerk 'sizes'
Er zijn enkele beperkingen bij het gebruik van de “ maten ”-kenmerk, ook hieronder vermeld:
- Bij gebruik van meerdere mediaquery's in de ' maten ”-kenmerk, zorg ervoor dat de eerste echte mediaquery is gekozen. Zorg er ook voor dat de mediaquery's zijn gerangschikt van meest specifiek naar minst specifiek.
- Het attribuut “sizes” ondersteunt geen percentagegroottes, omdat de browser zich niet bewust is van hoe breed iets dat in percentages is opgegeven, zal zijn totdat hij zich bewust is van de breedte van het bovenliggende element.
Voorbeeld 4: Verbeter de laadsnelheid van pagina's via responsieve afbeeldingen met behulp van het element '
De '
< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< titel > titel >
hoofd >
< lichaam >
< afbeelding >
< bron media = '(max. breedte: 100px)' srcset = 'F:\VACATURE TECHNISCHE ARTIKELEN\imgbanner.png' />
< afb src = 'F:\VACATURE TECHNISCHE ARTIKELEN\imgre.png' alles = 'Responsief beeld' />
afbeelding >
lichaam >
html >
Volgens deze coderegels:
- Specificeer de '
'element dat de' '-elementen voor verschillende afbeeldingen en laat de browser de juiste kiezen op basis van de schermgrootte van de gebruiker. - Ook als geen van de “
”-elementen zijn geschikt voor de schermgrootte, de afbeelding gespecificeerd in de “ '-tag dient als terugval.
- Hierdoor wordt in een onvoorzien geval een alternatieve afbeelding toegevoegd, waardoor de verbeterde laadsnelheid van de pagina behouden blijft.
Uitvoer
Conclusie
De laadsnelheid van de pagina kan worden verbeterd via responsieve afbeeldingen met behulp van de “ srcset ” attribuut, waarbij verschillende pixeldichtheden worden gespecificeerd, met behulp van de “ maten ' attribuut, of via het '