Afbeeldingen optimaliseren in WordPress: comprimeren en uitstellen van het laden

Afbeeldingen zijn een belangrijk onderdeel van de inhoud van een website, maar ze zijn ook de 'grootste boosdoener' wat betreft de laadtijd. Een ongeoptimaliseerde afbeelding in hoge resolutie (bijvoorbeeld 5 MB) kan de laadtijd van een pagina met 3 tot 5 seconden verlengen, waardoor gebruikers het geduld verliezen. Gelukkig is het optimaliseren van afbeeldingen vrij eenvoudig. Met twee belangrijke technieken, 'bestandscompressie' en 'uitgestelde laadtijd', kun je de laadtijd van afbeeldingen met meer dan 50% verkorten. In deze sectie wordt uitgelegd hoe je dit automatisch kunt doen met behulp van plug-ins. Hiervoor heb je geen technische kennis nodig, zodat ook beginners dit kunnen doen.

I. Waarom moeten foto's worden geoptimaliseerd? 3 schokkende feiten

• Afbeeldingen zijn doorgaans goed voor 60%-80% van de totale laadsnelheid van een website (veel meer dan tekst, code en andere content).
• Voor elke extra seconde die het duurt om een pagina te laden, neemt het aantal gebruikers dat de website verlaat toe met 20% (vooral mobiele gebruikers zijn gevoelig voor snelheid).
• Niet-geoptimaliseerde afbeeldingen zullen de Google PageSpeed-score (die van invloed is op de SEO-ranking) direct doen dalen.

Het kerndoelHet is mogelijk om de afbeeldingsgrootte van 50%-80% te comprimeren zonder dat dit ten koste gaat van de beeldkwaliteit. Bovendien kunnen afbeeldingen die niet op het eerste scherm worden weergegeven, 'op aanvraag worden geladen'.

II. Methode 1: Afbeeldingen comprimeren (met behulp van een plug-in om de bestandsgrootte automatisch te verkleinen)

Het principe van beeldcompressie is dat overbodige gegevens worden verwijderd (zoals informatie over het apparaat waarmee de foto is gemaakt en niet weergegeven pixeldetails), terwijl de voor het menselijk oog zichtbare beeldkwaliteit nagenoeg hetzelfde blijft. Het wordt aanbevolen om de 'Smush'-plug-in te gebruiken voor volledig automatische compressie. Hiermee kun je bestaande afbeeldingen in bulk verwerken en nieuw geüploade afbeeldingen automatisch comprimeren.

Stap 1: Installeer en activeer de Smush-plug-in.

1. Log in op de WordPress-back-end en ga naar 'Plugins → Plugins installeren'.
2. Zoek naar 'Smush', vind de plug-in met het label 'ontwikkeld door WPMU DEV' en klik op 'Installeren' → 'Activeren'.

Stap 2: Automatische compressie instellen (nieuwe afbeeldingen hoeven niet handmatig te worden verwerkt)

Na de activering gaat de plug-in automatisch naar de instellingspagina en voer je de volgende stappen uit om deze te configureren:

1. Automatische compressie inschakelenOp het tabblad 'Instellingen' moet je ervoor zorgen dat de optie 'Automatisch nieuwe geüploade afbeeldingen comprimeren' is geselecteerd (dit is standaard geselecteerd). Op deze manier worden afbeeldingen die je in de toekomst uploadt automatisch gecomprimeerd, zonder dat je hiervoor handmatig actie hoeft te ondernemen.
2. Kies een compressiemodus.：
   • Voor beginners wordt 'verliesloze compressie' aanbevolen (de standaardoptie): hierbij worden alleen overbodige gegevens verwijderd, zonder verlies van beeldkwaliteit. De compressieratio is ongeveer 30%-50%.
   • Als u op zoek bent naar een hogere compressieverhouding (bijvoorbeeld als de afbeelding nog steeds te groot is), kunt u 'Compressie met verlies' selecteren. Hierbij gaat de beeldkwaliteit iets verloren (wat voor het menselijk oog bijna niet te zien is) en kan de compressieverhouding oplopen tot 60%-80% (waarbij u op 'Geavanceerde instellingen' moet klikken om dit te activeren).
3. Sla de instellingen opKlik op 'Instellingen opslaan' onderaan de pagina.

Stap 3: Comprimeer bestaande afbeeldingen in bulk (één actie, voor optimale prestaties op het web)

Als er al veel ongecomprimeerde afbeeldingen op de website staan (bijvoorbeeld afbeeldingen bij eerdere artikelen), kun je deze met één klik optimaliseren met de functie 'Bulkcompressie':

1. Op de pagina van de Smush-plug-in klik je op het tabblad 'Bulk Smush' aan de linkerkant.
2. Klik op 'Nu beginnen' en de plug-in scant automatisch alle afbeeldingen in de mediabibliotheek.
3. Na het voltooien van de scan, klik je op 'Smush toepassen op XX foto's'. Het systeem comprimeert de foto's vervolgens in bulk (dit proces kan enkele minuten duren en hoeft niet te worden afgewacht; het kan op de achtergrond worden uitgevoerd).
4. Bekijk het compressie-effect.Na het comprimeren wordt de 'totale bespaarde ruimte' weergegeven (bijvoorbeeld '12 MB bespaard'), evenals een vergelijking van de bestandsgrootte van elke afbeelding voor en na compressie.

III. Methode 2: Uitgestelde lading (laat de afbeeldingen 'op aanvraag' laden)

Het principe van lazy loading is als volgt:De afbeelding begint pas te laden als de gebruiker naar de positie van de afbeelding scrolt.Op deze manier worden de afbeeldingen op het eerste scherm (het gebied dat als eerste wordt weergegeven wanneer je de pagina opent) als eerste geladen. De afbeeldingen die niet op het eerste scherm staan (zoals de afbeeldingen bij de artikelen hieronder en de voettekstafbeeldingen) worden tijdelijk niet geladen, waardoor de initiële laadtijd aanzienlijk wordt verkort.

Met de Smush-plug-in kun je met één klik vertraagde laden inschakelen (zonder extra plug-ins).

Smush heeft een ingebouwde functie voor uitgestelde lading. Je hoeft geen aparte plug-in te installeren. Hieronder volgen de instappasjes:

1. Op de pagina van de Smush-plug-in klik je op het tabblad 'Uitgestelde laden' aan de linkerkant.
2. Vink 'Vertraagde laden inschakelen' aan en volg de onderstaande aanbevolen configuratie:
   • 'Type afbeeldingen met uitgestelde laden': Alles selecteren (afbeeldingen, profielfoto's, thumbnails, etc.)
   • 'De eerste schermafbeelding uitsluiten': het wordt aanbevolen om dit aan te vinken (de eerste schermafbeelding wordt niet vertraagd, zodat gebruikers de kerninhoud snel kunnen zien wanneer ze de pagina openen).
   • 'Laadanimatie': Houd de standaardinstelling aan (er wordt een lichte animatie weergegeven om de gebruiker te laten weten dat de afbeeldingen worden geladen).
3. Klik op 'Instellingen opslaan' en de vertraagde lading wordt onmiddellijk van kracht.

Verifieer of het uitstellen van het laden effectief is.

1. Ga naar een willekeurige artikelpagina op de website (met meerdere afbeeldingen) en druk op F12 om de ontwikkelaarstools van de browser te openen.
2. Klik op het tabblad 'Netwerk', vernieuw de pagina en bekijk hoe de afbeeldingen worden geladen:
   • Tijdens het eerste laden worden alleen de afbeeldingen op het eerste scherm weergegeven in de lijst 'Netwerk'.
   • Scrol naar beneden op de pagina en wanneer de afbeeldingen die niet op het eerste scherm staan in beeld komen, verschijnen de laadrecords van deze afbeeldingen pas in de lijst 'Netwerk', wat aangeeft dat de vertraagde lading effectief is.

4. Extra tips voor het optimaliseren van afbeeldingen die iedere beginner moet weten

1. Kies de juiste afbeeldingsindeling (dit is nog baserker dan comprimeren).

Voor het uploaden van afbeeldingen kun je alvast het juiste formaat kiezen, zodat je de bestandsgrootte al vanaf de bron kunt verkleinen:

• Foto's / Complexe afbeeldingenMet de Smush-plug-in kun je JPG/PNG-bestanden automatisch naar WebP-bestanden converteren (in de 'Geavanceerde instellingen' moet je 'Automatisch converteren naar WebP' inschakelen). WebP-bestanden zijn 301 KB kleiner dan JPG-bestanden en hebben een betere beeldkwaliteit.
• Eenvoudige afbeeldingen/pictogrammenGebruik de PNG-indeling (ondersteunt transparante achtergronden en heeft een kleinere bestandsgrootte) in plaats van JPG.
• We gebruiken absoluut geen BMP- of TIFF-indelingen.Deze formaten zijn enorm groot en zijn niet geschikt voor gebruik op het web.

2. Controleer de afmetingen van de foto's (gebruik geen 'grote foto's die worden weergegeven als kleinere foto's').

Veel beginners uploaden rechtstreeks foto's in hoge resolutie (bijvoorbeeld 3000 bij 2000 pixels) en voegen deze vervolgens toe aan WordPress, waar ze worden weergegeven als 300 bij 200 pixels. Dit is niet verstandig, omdat de browser de originele grote afbeeldingen nog steeds laadt, waardoor bandbreedte en tijd worden verspild.

Het juiste doen：

• Voor het uploaden moet je de afbeelding eerst bijsnijden met een grafische tool (zoals Paint op je computer of de online tool Canva) tot de werkelijke weergaveafmetingen (bijvoorbeeld een banner van 1200 pixels breed voor op het startscherm).
• Als je niet weet hoe je de beeldhulpmiddelen moet gebruiken, kun je de plug-in 'Imsanity' installeren. Hiermee worden grote geüploade afbeeldingen automatisch gecomprimeerd tot een bepaalde grootte (bijvoorbeeld een maximale breedte van 1200 pixels).

3. Vermijd het misbruik van afbeeldingen (hoe meer, hoe beter is niet altijd het geval).

• Gebruik geen afbeeldingen (zoals eenvoudige stappenplannen) als je de inhoud ook in woorden kunt uitleggen.
• Meerdere opeenvolgende afbeeldingen kunnen worden samengevoegd tot een carrousel (bijvoorbeeld voor productpresentaties) om het aantal tegelijkertijd te laden afbeeldingen te verminderen.

5. Oplossingen voor veelvoorkomende problemen

1. Is de fotokwaliteit na compressie duidelijk slechter geworden?

• Als je 'lossy compressie' gebruikt, kun je de compressie-intensiteit verlagen in de instellingen van Smush (‘Geavanceerde instellingen’ → ‘Compressie-intensiteit’ naar 50%).
• Het wordt aanbevolen om voorrang te geven aan 'lossless compressie' en het 'WebP-formaat' om het volume en de beeldkwaliteit met elkaar in balans te brengen.

2. Zorgt het uitstellen van het laden voor een abnormale weergave van de afbeeldingen (zoals lege ruimten of een verkeerde plaatsing)?

• Controleer of de eerste schermafbeelding is uitgesloten (niet uitgesloten kan leiden tot een vertraging bij het laden van de eerste schermafbeelding, waardoor er een korte pauze ontstaat).
• Als bepaalde afbeeldingen onmiddellijk moeten worden geladen, kunt u in de instellingen van Smush voor 'Uitstel van laden' de CSS-klassen van de afbeeldingen invoeren in het vak 'Uitsluiten' (dit vereist enige basiskennis van code. Als u een beginner bent, kunt u het uitstel van laden voor de pagina waarop de afbeeldingen staan tijdelijk uitschakelen).

3. Is de snelheid na de optimalisatie niet merkbaar verbeterd?

• Test het opnieuw met GTmetrix (referentie) Een hulpmiddel om de snelheid van een website te testen.Daarna heb ik de 'watervalgraph' bekeken om te controleren of de laadtijd van de afbeeldingen was verkort.
• Als het nog steeds traag is, kunnen andere factoren hier de oorzaak van zijn (zoals een trage server of te veel plug-ins) en moet u dit combineren met latere optimalisatiemethoden (zoals het inschakelen van caching).

Samenvatting

Afbeeldingen optimaliseren is de meest kosteneffectieve manier om de snelheid van een website te verbeteren. Met de Smush-plug-in kun je de laadtijd van afbeeldingen in minder dan 10 minuten met meer dan 50% verkorten. De belangrijkste stappen zijn: Smush installeren → automatische compressie en batchcompressie inschakelen → uitgestelde laadtijd activeren (behalve voor afbeeldingen op het eerste scherm).

Vergeet niet dat het principe van beeldoptimalisatie is: 'Zolang het maar werkt'. Je hoeft niet te streven naar een maximale compressie of om superhoge resolutiebeelden te uploaden. Het is beter om een balans te vinden tussen beeldkwaliteit en snelheid, zodat gebruikers de inhoud goed kunnen zien en de pagina snel kan worden geladen. Dat is de beste aanpak.