Afbeeldingen zijn verantwoordelijk voor het grootste deel van de laadtijd van de meeste websites. Met een paar klikken kan afbeeldingsoptimalisatie de laadtijd verbeteren en jou en je bezoekers gelukkiger en tevrederen maken. Afbeeldingsoptimalisatie is alleen beschikbaar als Kinsta’s CDN is ingeschakeld.

Afbeeldingsoptimalisatie verandert niets aan de afbeeldingen die in je sitebestanden zijn opgeslagen; het creëert nieuwe afbeeldingen. De nieuwe afbeeldingen vereisen geen extra opslagruimte, en ze tellen niet mee voor het schijfruimtegebruik van je Kinsta pakket.

Als Lossless of Lossy is ingeschakeld, creëert het CDN automatisch WebP versies van de afbeeldingen met behulp van Cloudflare’s Polish service. De WebP versies worden gecached in Cloudflare’s CDN en worden geleverd als:

  1. de Accept header in de browser van de bezoeker WebP bevat, en
  2. de WebP versie is aanzienlijk kleiner.

Het CDN levert de originele afbeelding als die kleiner is dan de WebP versie.

Afbeeldingsoptimalisatie inschakelen

Om afbeeldingsoptimalisatie in te schakelen op je site, log je in op MyKinsta, ga je naar WordPress Sites > sitenaam > CDN en klik je op Instellingen onder Afbeeldingsoptimalisatie.

Instellingen voor afbeeldingsoptimalisatie in MyKinsta.
Instellingen voor afbeeldingsoptimalisatie in MyKinsta.

Dit brengt je naar een nieuw venster waar je kiest tussen Lossless of Lossy afbeeldingsoptimalisatie:

Instellingen voor afbeeldingsoptimalisatie in MyKinsta.
Instellingen voor afbeeldingsoptimalisatie in MyKinsta.

Lossless afbeeldingsoptimalisatie

Afbeeldingsoptimalisatie gebeurt met lossless compressie en heeft geen invloed op de kwaliteit van je afbeeldingen. Alleen GIF- en PNG-afbeeldingen worden gecomprimeerd en WebP-versies van die afbeeldingen worden gemaakt. Metadata wordt van alle afbeeldingen verwijderd.

Selecteer de optie Lossless afbeeldingsoptimalisatie in MyKinsta.
Selecteer de optie Lossless afbeeldingsoptimalisatie in MyKinsta.

Selecteer deze optie als het behoud van je afbeeldingskwaliteit essentieel is. Als je JPEG afbeeldingen wilt comprimeren en er WebP versies van wilt maken, moet je de optie Lossy selecteren.

Nadat je op de knop Instellingen opslaan hebt geklikt, zou de CDN pagina er zo uit moeten zien:

Lossless afbeeldingsoptimalisatie ingeschakeld in MyKinsta.
Lossless afbeeldingsoptimalisatie ingeschakeld in MyKinsta.

Lossy afbeeldingsoptimalisatie

Afbeeldingsoptimalisatie met verlies kan de kwaliteit van je JPEG afbeeldingen verminderen omdat het lossy compressie gebruikt om die afbeeldingen zo klein mogelijk te maken. Deze optie comprimeert GIF en PNG bestanden hetzelfde als de lossless optie en verwijdert metadata van alle afbeeldingen. Het zal ook Webp versies van alle afbeeldingen maken, maar de Webp versie wordt alleen gebruikt als deze aanzienlijk kleiner is dan de lossy of lossless gecomprimeerde afbeelding.

De optie Lossy afbeeldingsoptimalisatie selecteren in MyKinsta.
De optie Lossy afbeeldingsoptimalisatie selecteren in MyKinsta.

Selecteer deze optie om de afbeeldingsoptimalisatie te maximaliseren, waarbij je begrijpt dat dit invloed kan hebben op de afbeeldingskwaliteit.

Nadat je op de knop Instellingen opslaan hebt geklikt, zou de CDN pagina er zo uit moeten zien:

Lossy afbeeldingsoptimalisatie ingeschakeld in MyKinsta.
Lossy afbeeldingsoptimalisatie ingeschakeld in MyKinsta.

Afbeeldingsoptimalisatie testen

Afbeeldingsoptimalisatie verandert de URL of bestandsextensie van de afbeelding niet, en het zal de HTML van de pagina’s van je website niet veranderen. Om te bevestigen dat afbeeldingsoptimalisatie werkt, kun je de HTTP headers van een afbeelding op je site inspecteren met de ingebouwde developer tools van je browser.

    1. Bezoek je site en open developer tools in je browser (rechtsklik op de pagina of een afbeelding en klik op Inspect).
    2. Herlaad op het tabblad Network de pagina indien nodig en selecteer een afbeelding.
    3. Scroll op het tabblad Headers voor de geselecteerde afbeelding naar beneden tot je de Response Headers ziet en zoek naar deze headers en waarden:
      1. cf-polished: Dit toont je de originele indeling en bestandsgrootte van de afbeelding. Als de gegenereerde WebP versie van de afbeelding een grotere bestandsgrootte heeft dan de oorspronkelijke afbeelding, wordt toch de oorspronkelijke afbeelding gebruikt.
      2. content-type: Dit toont je welke bestandsindeling geleverd wordt, ongeacht de URL of bestandsextensie.
      3. ki-cache-type: Dit moet een waarde hebben van CDN.
      4. ki-cf-cache-status: Dit zou een waarde van HIT moeten hebben. Dit, in combinatie met een ki-cache-type headerwaarde van CDN laat zien dat de afbeelding wordt geleverd door Kinsta’s CDN.

Afbeeldingsoptimalisatie uitschakelen

Om afbeeldingsoptimalisatie op je website uit te schakelen, log je in op MyKinsta, ga je naar WordPress sites > sitenaam > CDN en klik je op Instellingen bij Afbeeldingsoptimalisatie. Selecteer in het nieuwe venster Geen en klik op Bewaar instellingen.

De CDN pagina laat nu zien dat er geen instellingen voor afbeeldingsoptimalisatie zijn toegepast en ziet er als volgt uit:

Afbeeldingsoptimalisatie uitgeschakeld in MyKinsta.
Afbeeldingsoptimalisatie uitgeschakeld in MyKinsta.