Hoe WordPress-afbeeldingen te optimaliseren en uw site SNELLER te maken

Als u uw bezoeker een geweldige gebruikerservaring wilt bieden, moet u ervoor zorgen dat uw website sneller laadt, zodat ze niet gefrustreerd raken. In feite kan de snelheid van uw website uw online bedrijf maken of breken. U MOET WordPress-afbeeldingen optimaliseren om uw site sneller te maken - omdat afbeeldingen meestal het zwaarste deel van uw inhoud zijn,

Walmart heeft een 2% stijging van hun conversieratio telkens wanneer ze de snelheid met 1 seconde verbeterden.

En Amazon vond een stijging van de omzet met 1% voor elke 100 milliseconden verbetering van hun sitesnelheid. Deze statistieken geven aan dat het snel maken van uw website van cruciaal belang is voor uw website. Een eenvoudige manier om uw website sneller te maken, is door alle afbeeldingen op uw WordPress-website te optimaliseren.

Inhoud[Producten per pagina]
 

optimaliseer wordpress-afbeeldingen voor verbeterde conversiepercentages

Als u de snelheid van uw WordPress-website nog niet als een cruciaal onderdeel van uw bedrijf heeft beschouwd, moet u opnieuw nadenken en maatregelen nemen om de snelheid van uw WordPress-website te verbeteren.

Raden lezen: Hoe u een snelle WordPress-website krijgt - een complete gids [25 acties]

Er zijn veel manieren om je website sneller te maken. Sommigen van hen staan ​​​​hieronder vermeld.

  • Vermijd het gebruik van te veel WordPress-plug-ins
  • Gebruik WordPress CDN-services
  • Optimaliseer CSS-levering
  • Optimaliseer WordPress-afbeeldingen

Afbeeldingen die niet zijn geoptimaliseerd voor internet zijn doorgaans groot. Het laden van deze afbeeldingen duurt langer. Het is belangrijk dat u uw afbeeldingen optimaliseert door ze zo klein mogelijk te maken. Meestal is het proces van het optimaliseren van afbeeldingen voor WordPress en uw website echter vervelend of staat het de productie van inhoud in de weg.

In dit bericht leggen we verschillende manieren uit om je WordPress-afbeeldingen te optimaliseren en zo je site sneller te laten laden.

Comprimeer afbeeldingen of sla ze op voor het web

Het is een goed idee dat de grootte van uw afbeelding de laadtijd van uw WordPress-website kan beïnvloeden. Omdat afbeeldingen met een hoge resolutie een grotere bestandsgrootte hebben, is het altijd beter om: comprimeer de afbeeldingen voor het uploaden.

Nu heb je misschien een vraag: wat is WordPress-beeldcompressie en hoe kan het de grootte verkleinen zonder de kwaliteit te beïnvloeden?

Compressie is het proces waarbij de beeldgrootte drastisch wordt verkleind door algoritmisch beeldinformatie te verwijderen die een menselijk oog niet kan waarnemen. Dit is een zeer effectieve manier om WordPress-afbeeldingen te optimaliseren.

Hoewel beeldcompressie een onfeilbare methode is om de afbeeldingsgrootte te verkleinen, verliest het proces soms de werkelijke inhoud van de afbeeldingen tijdens het proces als het gaat om het comprimeren van JPEG-bestanden. Dit is het enige nadeel van deze aanpak. Vergeet niet om de resultaten na de compressie zorgvuldig te controleren, om er zeker van te zijn dat u tevreden bent met de resultaten van de compressie.

WP Smush is een populaire WordPress-plug-in waarmee u eenvoudig de bestandsgrootte van afbeeldingen kunt verkleinen door elke afbeelding die u uploadt te scannen en onnodige gegevensinformatie te verwijderen. Met de gratis versie van deze plug-in kunt u afbeeldingen tot 1 MB comprimeren, terwijl u met de pro-versie afbeeldingen tot 32 MB kunt comprimeren.

U kunt downloaden WP Smush hier

wp smush om wordpress-afbeeldingen te optimaliseren

Houd er ook rekening mee dat u met deze plug-in alle nieuw geüploade afbeeldingen naar uw WordPress-website kunt optimaliseren. Als u de bestaande afbeeldingen wilt comprimeren, kunt u de Bulk Smush.it-link onder het tabblad Mediabibliotheek gebruiken om bestaande WordPress-afbeeldingen te optimaliseren.

Lazy loading: optimaliseer de laadtijd van WordPress-afbeeldingen

[UPDATE: WordPress 5.4 heeft lazy loading ingebouwd in de kern, dus je hoeft deze actie alleen uit te voeren als je WordPress-versie lager is dan deze versie]

We weten allemaal dat "een foto meer zegt dan duizend woorden".

Maar als u te veel afbeeldingen op één pagina gebruikt, kan uw website langzamer laden.

Een eenvoudige manier om uw laadtijd te verbeteren, is door onnodige afbeeldingen te verwijderen en alleen dat te bewaren dat absoluut noodzakelijk is. Niet iedereen wil echter het aantal afbeeldingen dat op een webpagina wordt gebruikt verminderen, alleen om de pagina sneller te laten laden.

Hoe kan dit probleem worden opgelost?

Je hebt het misschien al opgemerkt - websites die veel afbeeldingen op elke pagina gebruiken, lossen dit probleem op door de afbeelding alleen te laden wanneer deze zichtbaar is voor de gebruiker. Deze tactiek vermindert niet alleen de laadtijd van de pagina, maar bespaart ook serverbandbreedte. Dit wordt lui laden genoemd. Omdat het beeld "lui" is, verschijnt het alleen wanneer het nodig is.

Als u WordPress gebruikt, is het gemakkelijker om de afbeelding alleen te laten laden als deze zichtbaar is. Het enige dat u hoeft te doen, is een Lazy load-plug-in installeren. Nogmaals, dit is een uitstekende manier om WordPress-afbeeldingen te optimaliseren voor verbeterde snelheid.

U kunt de Lazy load-plug-in hier

Optimaliseer wordpress-afbeeldingen met lazy load

Deze plug-in heeft geen extra configuratie nodig, omdat hij direct na installatie en activering werkt.

Lees verder: Divi tegen Elementor

Gebruik het geoptimaliseerde en juiste afbeeldingsformaat

JPEG, PNG en GIF zijn de meest populaire beeldformaten.

Als u de verschillen tussen elk afbeeldingsformaat kent, kunt u het juiste formaat op uw website gebruiken, wat u zelfs helpt als het gaat om beeldoptimalisatie.

Welk formaat is beter voor geoptimaliseerde afbeeldingen van WordPress-websites en wanneer moet je het gebruiken? Hieronder een paar tips:

  • GIF: gebruik GIF wanneer uw afbeelding te klein is en een relatief less aantal kleuren. GIF is bijvoorbeeld een goede keuze voor clipart, opsommingstekens en grafieken. Aan de andere kant konden complexe afbeeldingen met verbeteringen zoals slagschaduwen niet correct worden weergegeven met GIF.
  • JPEG / JPG: Het is geschikt voor complexe afbeeldingen met veel kleurvariaties of als het fotografische afbeeldingen bevat.
  • PNG: PNG-indeling is het meest geschikt voor transparante afbeeldingen.
  • WebP: dit is tegenwoordig het beste formaat, maar het maken van deze afbeeldingen vereist serverondersteuning op uw website

Houd er rekening mee dat dit slechts algemene aanbevelingen zijn. Zoals alle regels zijn er uitzonderingen en sommige van deze regels zijn bedoeld om te worden overtreden.

Maak effectief gebruik van browsercache

Wanneer u afbeeldingen op een webpagina uploadt, zorg er dan voor dat u ze naar een enkele map uploadt. Door uw afbeeldingen naar een enkele map op een webpagina te uploaden, kan de browser die afbeeldingen gemakkelijk laden met behulp van de browsercache tijdens herhaalde bezoeken.

Het is prima als u afbeeldingen uploadt via de standaard WordPress-uploader voor afbeeldingen. Maar als u bijvoorbeeld HTML-bestemmingspagina's op WordPress maakt, is de kans groot dat u niet de standaard WordPress-uploader voor afbeeldingen gebruikt. In deze gevallen, in plaats van de afbeeldingen van een webpagina naar verschillende mappen te uploaden, moet u ervoor zorgen dat u ze allemaal uploadt naar een enkele map.

Als je meer wilt lezen over browsercaching en hoe je deze kunt gebruiken, bekijk dan ons gedetailleerde artikel hier: Browsercaching gebruiken in WordPress met of zonder plug-in [5 manieren]

 

Gebruik dezelfde afbeelding meerdere keren

Een andere manier om browsercaching te gebruiken om de afbeeldingsbandbreedte te verminderen, is door dezelfde afbeeldingen meerdere keren op de site te gebruiken.

Als u bijvoorbeeld logo's of menu-items van een pagina gebruikt, zorg er dan voor dat u overal op de site dezelfde afbeeldingen oproept, zodat gebruikers ze niet meerdere keren maar één keer hoeven te downloaden en browsers de afbeeldingen vanuit de browser kunnen weergeven cache.

Zorg er bij het gebruik van een gestructureerde achtergrond voor dat u herhaaldelijk kleinere afbeeldingen gebruikt in plaats van één enkele grote afbeelding. Dit kan ook helpen om de laadtijd te verkorten.

Wanneer u afbeeldingen uploadt met behulp van de media-uploader op het WordPress-dashboard, gaat deze standaard naar de map, afhankelijk van wanneer u deze uploadt. Dat betekent dat alle afbeeldingen die in een maand worden geüpload, zich in één map bevinden.

Als u bijvoorbeeld in januari 2021 een afbeelding uploadt, bevindt deze zich in deze map: wp-content/uploads/2021/01.

Laten we eens kijken naar de voordelen van uploaden via de media-uploader en dan zullen we u vertellen waar u rekening mee moet houden als u niet uploadt naar uw media-uploader om uw website sneller te maken.

Media-uploader zorgt ervoor dat de afbeelding sneller wordt geladen: Het laden gaat sneller als de afbeeldingen in dezelfde map worden opgeslagen terwijl u door een webpagina bladert. Wanneer de afbeeldingen herhaaldelijk worden aangeroepen, kan de browser ze gemakkelijk ophalen uit de browsercache als ze zich in een enkele map bevinden.

Vaak gebruiken WordPress-bloggers echter niet de standaard media-uploader, vooral niet wanneer ze aan een aangepaste bestemmingspagina werken. Voor het gemak uploaden ze afbeeldingen in een aparte map.

Zorg er in dergelijke gevallen voor dat u alle afbeeldingen van die pagina in een enkele map uploadt in plaats van naar meerdere mappen te uploaden. Deze tactiek kan de laadtijd verbeteren, omdat het cachen van bestanden gemakkelijker zal zijn tijdens herhaalde bezoeken.

CSS gebruiken in plaats van afbeeldingen

Weet je dat je de laadtijd kunt verbeteren door helemaal geen afbeelding te gebruiken?

Het is bijvoorbeeld heel goed mogelijk om bepaalde vormen te genereren door eenvoudige CSS te gebruiken in plaats van afbeeldingen zoals afgeronde rechthoeken, verlopen, slagschaduwen en transparante afbeeldingen. Dat gezegd hebbende, zorg ervoor dat u de browsercompatibiliteit in de gaten houdt wanneer u een afbeelding vervangt door CSS, omdat niet alle browsers deze technieken kunnen ondersteunen.

Over de auteur
Shahzad Saeed
Auteur: Shahzad SaeedWebsite: http://shahzadsaeed.com/
Shahzaad Saaed is als WordPress-expert op een groot aantal websites van autoriteiten te zien geweest. Hij is gespecialiseerd in contentmarketing om bedrijven te helpen meer bezoekers te trekken.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...