Afbeeldingen optimaliseren

Silktide downloadt de afbeeldingen op je pagina's en test of ze aanzienlijk kleiner kunnen worden gemaakt zonder zichtbaar te veranderen. Afbeeldingen die kleiner kunnen worden gemaakt, worden gerapporteerd samen met de mogelijke besparing, zodat je de grootste verbeteringen kunt prioriteren.

Waarom dit belangrijk is

Afbeeldingen vormen meestal het grootste deel van het gewicht van een webpagina en zijn daarom doorgaans de grootste afzonderlijke kans om de prestaties te verbeteren. Te grote afbeeldingen zorgen ervoor dat pagina's langzamer verschijnen, waardoor het aantal bezoekers dat afhaakt meetbaar toeneemt — vooral bij mobiele verbindingen — en ze kosten je bezoekers onnodig bandbreedte en batterij. De paginasnelheid heeft ook invloed op de positie in zoekresultaten via .

In tegenstelling tot het meeste andere werk aan prestaties, brengt het optimaliseren van afbeeldingen zelden nadelen met zich mee: een goed gecomprimeerde afbeelding ziet er hetzelfde uit en gedraagt zich hetzelfde. Het levert vrijwel gratis betere prestaties op.

Zo los je het op

Comprimeer de gerapporteerde afbeeldingen. Vrijwel elke afbeeldingstool kan dit doen bij het exporteren; foto's moeten over het algemeen JPEG zijn met ongeveer 85% kwaliteit. Dat bespaart veel bestandsgrootte met minimaal zichtbaar verlies.
Gebruik het juiste formaat: JPEG (of WebP/AVIF) voor foto's; PNG of SVG voor logo's, pictogrammen en andere illustraties met vlakke kleuren. Moderne formaten zoals WebP en AVIF zijn in veel gevallen beter, als je platform ze ondersteunt.
Automatiseer het. De meeste , buildpipelines en kunnen afbeeldingen bij het uploaden of leveren comprimeren en converteren — als je de pipeline aanpast, voorkom je dat het probleem terugkeert.
Lever afbeeldingen aan op het formaat waarin ze worden weergegeven. Gebruik responsieve afbeeldingen (srcset) in plaats van één enorme afbeelding naar elk apparaat te sturen:

<img src="hero-800.jpg"
     srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     alt="Wijngaard bij zonsondergang">

Zo test Silktide dit

Verzamel de afbeeldingen die elke pagina daadwerkelijk laadt.
Comprimeer elke afbeelding opnieuw met technieken die geschikt zijn voor het formaat: progressieve JPEG met 85% kwaliteit, compressie zonder en met kwaliteitsverlies voor PNG, SVG- en heroptimalisatie van GIF.
Vergelijk het beste resultaat met het origineel. Een afbeelding wordt alleen gerapporteerd als de besparing aanzienlijk is: meer dan 20% kleiner en meer dan 40 KB bespaard.
Rapporteer de mogelijke verkleining voor elke afbeelding, zodat de grootste besparingen opvallen.

Problemen oplossen

De afbeelding ziet er al gecomprimeerd uit

De gerapporteerde besparing is gemeten en niet geschat — Silktide heeft daadwerkelijk een kleiner bestand geproduceerd. Veelvoorkomende redenen waarom een ogenschijnlijk geoptimaliseerde afbeelding toch 20% kleiner kan worden, zijn ingesloten metadata, JPEG-codering zonder progressieve indeling en PNG-bestanden die voor foto's worden gebruikt.

We gebruiken een CDN dat afbeeldingen optimaliseert

Silktide test wat de pagina daadwerkelijk heeft geleverd. Als een gerapporteerde afbeelding via je CDN is gegaan, is die optimalisatie dus niet toegepast of niet voldoende geweest. Controleer de instellingen van het CDN voor de betreffende paden of formaten.

De besparing lijkt klein

Afbeeldingen die binnen 20% of 40 KB van het optimale resultaat liggen, worden niet gerapporteerd. Als een gerapporteerde besparing klein lijkt, bedenk dan dat deze bij elke paginaweergave van elke bezoeker wordt gerealiseerd.