Afbeeldingen optimaliseren volgens Pagespeed Insights

Afbeeldingen optimaliseren volgens Pagespeed Insights

October 9, 2020

Door: Ton Koop

3 min. leestijd

Afbeeldingen optimaliseren in moderne formaten is belangrijk. In deze blog gaan we in op de verschillende aanbevelingen die je uit Google PageSpeed insights krijgt met betrekking tot jouw afbeeldingen.

  • Lever afbeeldingen in moderne indelingen
  • Geef afbeeldingen het juiste formaat
  • Codeer afbeeldingen op een efficiënte manier

De snelheid waarmee jouw website laadt is belangrijk en wordt steeds belangrijker. Elke byte die door een browser geladen moet worden kost tijd. Afbeeldingen zijn vaak goed voor het grootste deel van de bytes die gedownload moeten worden op een pagina. Dit zorgt ervoor dat een besparing op het aantal bytes van afbeeldingen vaak direct tot een grote verbetering leidt in de prestaties van een pagina. Des te minder bytes, des te sneller de browser van een bezoeker de pagina kan renderen!

Om te ontdekken hoeveel bytes er bespaard kunnen worden op jouw afbeeldingen zijn er verschillende tools beschikbaar. De tool die wij aanraden is de tool Pagespeed Insights van Google.

Hieronder lichten wij een aantal aanbevelingen uit die Google geeft op basis van jouw scan.

Lever afbeeldingen in moderne indelingen

Deze melding wordt getoond indien er verbeteringen mogelijk zijn op het gebied van bestandsformaten. De meeste mensen kennen de 'standaard' bestandsformaten JPEG en PNG. Tegenwoordig zijn er ook andere formaten beschikbaar. JPEG 2000, JPEG XR en WebP zijn bestandsformaten met superieure compressie- en kwaliteitskenmerken in vergelijking met hun oudere JPEG- en PNG-tegenhangers. Het coderen van jouw afbeeldingen in deze formaten in plaats van JPEG of PNG betekent dat ze kleiner zijn, sneller laden en minder dataverkeer gebruiken.

Quicq zorgt ervoor dat afbeeldingen on-the-fly worden geoptimaliseerd, op basis van de browser van de bezoeker. Zo zullen we bijvoorbeeld bezoekers die een chrome browser gebruiken automatisch het WebP formaat serveren.

Geef afbeeldingen het juiste formaat

In de ideale situatie zou jouw pagina nooit afbeeldingen moeten bevatten die groter zijn dan ze worden getoond op het scherm van een bezoeker. Alles wat groter is dan dat zorgt ervoor dat er onnodige bytes worden ingeladen. Dit heeft weer tot gevolg dat de pagina langzaam laadt.

De belangrijkste methode voor het serveren van afbeeldingen in het juiste formaat wordt 'responsive images' genoemd. Met responsive images kunnen van elke afbeelding meerdere versies worden gegenereerd. Daarna specificeer je vervolgens welke versie je wilt gebruiken in jouw HTML of CSS, bijvoorbeeld met behulp van media queries of viewport-afmetingen.

Een handige tool hierbij kan het gebruik van een image CDN zoals Quicq zijn. De slimme CDN van Quicq zorgt voor het leveren van het juiste formaat op basis van het device van de bezoeker.

Codeer afbeeldingen op een efficiënte manier

Nadat we de afbeelding naar het juiste formaat en de juiste afmeting hebben omgezet moet de afbeelding ook nog gecomprimeerd worden. Dit dient te gebeuren zonder dat de afbeelding aan kwaliteit inlevert.

Over het algemeen worden de niveaus van compressie gedefinieerd op een schaal van 1-100, waarbij 100 de beste kwaliteit (of de laagste compressie) is. Lighthouse, de tool die wordt gebruikt in Google PageSpeed, test de afbeelding met een compressieniveau van 85.

Over het algemeen is het voldoende om afbeeldingen te comprimeren naar een niveau van tussen de 75 en 90. Onderzoeken wijzen uit de de visuele achteruitgang bij dit niveau voor het menselijke oog amper zichtbaar is en je profiteert wel van de reductie in bestandsgrootte.

Het gehele proces van comprimeren klinkt ingewikkeld. De slimme software achter Quicq zorgt er echter voor dat dit erg eenvoudig is. Geef aan ons door welke compressie niveau je wilt hanteren (kan per afbeelding) en wij regelen de rest.

Ter afsluiting

Het is erg belangrijk om stil te staan bij de afbeeldingen die op jouw site worden getoond. Je wilt jouw gebruiker de optimale gebruikservaring geven (snelle laadtijden) en daarbij niet inleveren op de kwaliteit van jouw afbeeldingen. Dit proces handmatig uitvoeren en bijhouden is erg tijdsintensief. Daarom kan de slimme software van Quicq wellicht een uitkomst zijn. Jij upload je afbeelding in wat voor grootte dan ook, wij regelen de rest en strippen elke onnodige byte van de afbeelding en serveren hem in moderne formaten.


Deel dit artikel