Moderne afbeeldingsindelingen

Silktide laadt je pagina's in een echte browser en identificeert afbeeldingen die aanzienlijk kleiner zouden zijn als ze in een moderne indeling, zoals WebP of AVIF, zouden worden aangeboden. Voor elke afbeelding wordt de huidige grootte vermeld, evenals de besparing die een moderne indeling zou opleveren.

Waarom dit belangrijk is

WebP en AVIF comprimeren afbeeldingen veel beter dan de oudere indelingen JPEG en PNG: bij dezelfde zichtbare kwaliteit zijn ze vaak 25-50% kleiner. Omdat afbeeldingen meestal het grootste deel van het gewicht van een pagina vormen, is het converteren ervan een van de grootste afzonderlijke prestatieverbeteringen die beschikbaar zijn. Bovendien verandert er niets zichtbaar aan je website. Snellere pagina's zorgen ervoor dat meer bezoekers blijven en dragen via bij aan een betere positie in zoekresultaten.

Alle moderne browsers ondersteunen WebP en de ondersteuning voor AVIF is inmiddels vrijwel universeel. De historische reden om deze indelingen te vermijden is daarom verdwenen.

Hoe je dit oplost

Converteer de gemelde afbeeldingen naar WebP of AVIF. De meeste afbeeldingsprogramma's kunnen beide indelingen exporteren en veel en kunnen afbeeldingen automatisch converteren bij het uploaden of aanbieden. Zo voorkom je dat het probleem terugkomt.
Als je zeer oude browsers moet ondersteunen, bied dan een fallback aan:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <!-- Oudere browsers vallen terug op de JPEG -->
  <img src="photo.jpg" alt="Team tijdens de zomerbijeenkomst buiten de locatie">
</picture>

Hoe Silktide dit test

Laad de pagina in een echte browser en verzamel de afbeeldingen die deze weergeeft.
Schat in wat elke JPEG- of PNG-afbeelding in een moderne indeling zou kosten.
Rapporteer afbeeldingen waarbij de besparing aanzienlijk is (minimaal 8 KB), met de huidige grootte en de mogelijke besparing, in aflopende volgorde van grootte.

Problemen oplossen

Wat is het verschil met de andere afbeeldingscontroles?

Deze controle gaat specifiek over het converteren van de indeling. Het comprimeren van afbeeldingen binnen hun huidige indeling wordt behandeld in Afbeeldingscompressie en uitgebreider in Afbeeldingsoptimalisatie. Het aanbieden van afbeeldingen in de juiste afmetingen wordt behandeld in Responsieve afbeeldingen. Dezelfde afbeelding kan in meerdere controles voorkomen: de oplossingen vullen elkaar aan.

Ons platform kan geen WebP of AVIF aanbieden

Een vóór je website kan afbeeldingen vaak on-the-fly converteren zonder wijzigingen aan het platform. Als dat niet lukt, levert het goed comprimeren van de originele afbeeldingen nog steeds een groot deel van de voordelen op. Zie Afbeeldingsoptimalisatie.