In een vorige blog artikel (Waarom is mijn WordPress website traag?) hebben we aangegeven dat één van de grootste redenen dat een webpagina langzaam laadt is omdat de bestandsgrootte van afbeeldingen onnodig groot is. In dit artikel leren we je hoe je in 3 stappen jouw website afbeeldingen hierop kunt optimaliseren.

Stap 1: Optimaliseer je WordPress instellingen

Een goede begin is het halve werk. Voordat je ook maar 1 afbeelding in de media library hebt zitten kun je door een aantal plugins te installeren en een aantal WordPress instellingen goed te zetten de grootste problemen voorkomen.

Begin met eerst vast te stellen welke afbeeldingsformaten je op je website gaat gebruiken (thumbnails, sliders, plaatjes in teksten) en wat de maximale breedte en hoogte van deze formaten zijn.  Onder instellingen >> media kun je de verschillende formaten (thumbs, medium, medium_large, large) hierop aanpassen. Zit je formaat hier niet bij kun je deze toevoegen door bijv. de plugin “simple image sizes” te installeren.

Stel een maximum bestandsgrootte in bij het uploaden. Installeer de plugin “Imsanity” en stel daarin een maximum in (bijv. 2048px breed). Te grootte afbeeldingen worden dan automatisch verkleind tijdens het uploaden.

Installeer een afbeeldingsoptimisatie plugin. Een afbeeldingsoptimalisatie plugin zorgt ervoor dat afbeeldingen in de media library automatisch worden gecomprimeerd en geoptimaliseerd tijdens het uploaden. De gratis plugin “WP Smush” is hiervan een goed voorbeeld.

Stap 2: Kies het juiste afbeeldingstype

Nu WordPress goed is ingesteld kun je de afbeeldingen uploaden. Maar voordat je dit doet controleer eerst of je de afbeelding in het juiste afbeeldingstype gaat uploaden. Voor het internet zijn er namelijk verschillende bestandstypen waarin je afbeelding kunt opslaan. Elk type heeft zijn sterke en zwakke punten.  Een kort overzicht:

• .jpeg.  Kan foto’s en grote afbeeldingen opslaan in minimale bestandsgrootte maar teveel compressie kan leiden tot korrelige afbeeldingen.
• .png. Zeer geschikt voor afbeeldingen met transparantie, maar .png bestanden zijn over het algemeen groter dan een .jpeg formaat.
• .gif. Geschikt voor bewegende afbeeldingen, maar de bestandsgrootte is vrij groot.
• .svg of fonts. Zeer geschikt voor iconen en logo’s, maar niet voor foto’s. Een goede voorbeeld hiervan is fontawesome

Dus voordat je een afbeelding upload, open de afbeelding in een bewerkingsprogramma en sla deze dan op met het juiste bestandstype.

TIP: Bij het opslaan in het bewerkingsprogramma verklein dan meteen de afbeelding tot de benodigde breedte en hoogte en geef de afbeelding een beschrijvende naam (dus geen IMG_1123444.jpg maar bluemammoth_afbeeldingen_optimaliseren.jpg) voor zoekmachine optimalisatie.

Stap 3: Kies de juiste afmeting

Als je in WordPress een afbeelding upload in de media library, dan maakt WordPress hier automatisch verschillende bestandsformaten van. De standaard formaten zijn thumbnail , medium, medium_large, large en full. Als je dan een afbeelding gebruikt bij een artikel zorg dan dat niet een te groot formaat gebruikt. Dit kun je doen via de weergave instellingen van de afbeelding. Op deze manier kun je gemakkelijk de bestandsgrootte van jouw webpagina met veel kilobytes verkleinen.

Conclusie

Met een paar handige plugins en door je afbeeldingen op de juiste manier op te slaan en te gebruiken kan je jouw WordPress webpagina’s met vele kilobytes verkleinen en de laadtijd van jouw websitebezoekers verminderen.