Optimalisatie: een eenvoudige afbeelding

Een goede website kan op ontelbare manieren geoptimaliseerd worden. Wat gebeurt er met een afbeelding, voordat het op een pagina verschijnt? Is een afbeelding niet een afbeelding? Zoals altijd... het is maar net hoe je het bekijkt.

Optimaliseren doe je om de pagina sneller te laten laden. Iedere milliseconde die je kunt besparen. Iedere stottering die je kunt voorkomen... het draagt bij aan een betere ervaring voor de bezoeker. En voor de waardering van zoekmachines! Een trage website wordt immers sneller genegeerd.

Diepe optimalisatie is alleen mogelijk met echt maatwerk, omdat je tot de diepste code van een website toegang dient te hebben. Ga je aan de slag met een kant en klaar sjabloon en de mogelijkheden beperken je.

Optimalisatie per apparaat

Er kan gekeken worden naar het apparaat waarmee de bezoeker een website bezoekt. Is dit een grote desktop monitor? Een tablet, laptop? Of mobiele telefoon? De website registreert het formaat van het beeldscherm en kan met die gegevens een geoptimaliseerde versie leveren.

Een mobiel apparaat laadt de gegevens namelijk vaak over een draadloos netwerk; veel trager is dan een verbinding thuis of op kantoor. Daarnaast is het beeld veel kleiner. Dus je kunt vaak een ‘kleinere’ versie van de afbeelding leveren. En meer compressie toepassen.

Een tablet of laptop zit tussen een mobiel apparaat en een desktop computer in. De afbeelding dient groter te zijn van formaat. Maar je bent niet zeker van de verbinding, dus een tussenoplossing is verantwoord. Met een desktop kun je het beeld nóg groter maken. En de compressie eventueel wat verminderen. 

Hoeveel versies je van een afbeelding maakt en de bezoeker kunt tonen hangt uiteraard af van de website. En de afbeelding zelf. Bij sommige afbeeldingen is de winst minimaal. En voor sommige projecten is optimalisatie zo belangrijk dat er voor iedere afbeelding minstens vijf of zes versies bestaan. 

Laden wanneer in beeld

Een pagina is klaar met laden zodra alle elementen zijn gedownload van de server waarop de website staat. Dus zodra iedere afbeelding, iedere instructie, ieder lettertype op het apparaat van de bezoeker staat.

Heb je een lange pagina, dan betekent dit dat de pagina pas geladen is zodra ook de afbeelding die verder op de pagina staan binnen zijn. Dit is standaard.

Maar, met een stuk code kan dit proces worden geoptimaliseerd. Deze code verbergt iedere afbeelding op de website. Bij het openen van de pagina worden ze dus niet geladen. Wat de laadtijd aanzienlijk verbetert.

De code houdt bij wanneer je verder scrollt. Kom je in de buurt van een afbeelding die nog niet is geladen? Pas dan wordt - op de achtergrond - de afbeelding ingeladen!

Meerdere servers

Om het laadprococes zo optimaal mogelijk te houden laden de meeste browsers niet meer dan zes tot acht elementen tegelijkertijd van één domein. Deze elementen zijn afbeeldingen, icoontjes, stijlinstructies en de pagina zelf.

Met veel websites kom je al snel boven dit aantal elementen per pagina. Wat geen probleem is, maar het betekent dat een aantal elementen pas worden geladen nádat andere elementen volledig binnen zijn. En niet tegelijkertijd.

Er is een oplossing. Het maakt het ontwikkelen iets complexer. Maar je kunt een ‘tweede’ domein gebruiken om dit te omzeilen. Een tweede domein waarop je alleen enkele afbeeldingen plaatst. In de code geef je aan dat bepaalde afbeeldingen op dit andere domein staan... en voor je het weet worden ze sneller ingeladen.

Deze drie manieren zijn slechts een voorbeeld van hoeveel aandacht gegeven kan worden aan slechts één eenvoudige afbeelding. Er zijn meer manieren om verder te optimaliseren!