Offscreen-afbeeldingen zijn afbeeldingen die niet zichtbaar zijn op het scherm op het moment dat ze worden geladen. Deze afbeeldingen kunnen zich onder de vouw bevinden of verborgen zijn achter andere elementen op de pagina. Het uitstellen van offscreen-afbeeldingen kan de laadtijd van pagina's verbeteren door het aantal benodigde HTTP-verzoeken te verminderen en de browser in staat te stellen door te gaan met het weergeven van de zichtbare inhoud. Offscreen-afbeeldingen worden daarentegen gedownload.
Manieren om afbeeldingen buiten beeld uit te stellen
Bij het laden van afbeeldingen op een website is het essentieel ervoor te zorgen dat ze alleen worden geladen wanneer dat nodig is. Anders kan de laadtijd van uw pagina onnodig worden vertraagd.
Een manier om het laden van afbeeldingen te optimaliseren, is door afbeeldingen die niet in beeld komen uit te stellen. Dit betekent dat de afbeeldingen pas worden geladen wanneer ze in beeld komen. Dit kan met name handig zijn als je veel afbeeldingen op één pagina hebt.
Er zijn verschillende manieren om afbeeldingen die niet in beeld zijn te laden. Een methode is om met CSS de zichtbaarheid van deze afbeeldingen op 'verborgen' te zetten totdat ze op het scherm verschijnen. Een andere aanpak is om met JavaScript te detecteren wanneer deze afbeeldingen zichtbaar worden en ze dan te downloaden. Tot slot kunnen sommige responsieve afbeeldingsoplossingen afbeeldingen die niet in beeld zijn automatisch uitstellen door ze pas te laden wanneer ze nodig zijn bij specifieke schermformaten.
De methode die u kiest, hangt af van uw specifieke situatie en of u alle afbeeldingen die niet in beeld zijn wilt laden, of slechts een deel ervan. In de meeste gevallen is het gebruik van CSS om de zichtbaarheid op 'verborgen' in te stellen de eenvoudigste oplossing. JavaScript-gebaseerde oplossingen zijn echter wellicht beter als u meer controle wilt over wanneer deze afbeeldingen worden gedownload.
Wat zijn de voordelen van het uitstellen van beelden die niet op het scherm verschijnen?
Visueel gezien betekent het uitstellen van afbeeldingen buiten het zichtbare gedeelte van het scherm dat de inhoud boven de vouw direct wordt weergegeven, zonder te hoeven wachten tot de afbeeldingen onder de vouw geladen zijn. Dit kan een aanzienlijke snelheidsverbetering betekenen voor gebruikers met een trage internetverbinding of een datalimiet.
Technisch gezien voorkomt het uitstellen van afbeeldingen die niet in beeld zijn dat de browser onnodige HTTP-verzoeken verstuurt totdat de gebruiker naar beneden scrollt en de afbeelding in beeld komt. Dit vermindert zowel het bandbreedtegebruik als de serverbelasting.
Over het algemeen kan het uitstellen van afbeeldingen buiten het scherm de laadtijden van pagina's verbeteren, het dataverbruik verminderen en de serverprestaties verbeteren.
Conclusie
Er zijn veel redenen waarom u afbeeldingen buiten het scherm zou moeten uitstellen. U wilt wellicht de prestaties van uw website verbeteren of ervoor zorgen dat bezoekers met een trage internetverbinding de content waarin ze geïnteresseerd zijn, toch kunnen zien. Wat uw redenen ook zijn, we hopen dat dit artikel u heeft geholpen te begrijpen hoe u afbeeldingen buiten het scherm kunt uitstellen. Als u vragen of opmerkingen heeft, kunt u die hieronder stellen.
Bent u op zoek naar diensten voor websiteoptimalisatie? Neem vandaag nog contact op met ons team!
