Afbeeldingsoptimalisatie voor Managed WordPress Hosting

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 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 gecomprimeerde afbeelding aanzienlijk kleiner is dan de oorspronkelijke afbeelding.

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

Afbeeldingsoptimalisatie inschakelen

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

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

Lossless afbeeldingsoptimalisatie

Lossless optimalisatie heeft geen invloed op de kwaliteit van je afbeeldingen. GIF en PNG afbeeldingen worden gecomprimeerd, en metadata worden van alle afbeeldingen verwijderd.

Kies deze optie als het behoud van je beeldkwaliteit essentieel is.

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

Lossy afbeeldingsoptimalisatie

Lossy afbeeldingsoptimalisatie kan de kwaliteit van je afbeeldingen verminderen omdat het JPEG compressie gebruikt om afbeeldingen zo klein mogelijk te maken. Net als bij Lossless optimalisatie zal dit ook GIF en PNG afbeeldingen comprimeren en metadata van alle afbeeldingen verwijderen.

Selecteer deze optie om de afbeeldingsoptimalisatie te maximaliseren, ook al kan het de kwaliteit beïnvloeden.

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

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. 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. 1. 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 zal nu weergeven dat er geen instellingen voor afbeeldingsoptimalisatie zijn toegepast en ziet er als volgt uit: