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 wanneer ze de snelheid met 1 seconde verbeterden. Dit is een van de vele voorbeelden die aangeven dat het van cruciaal belang is om uw website snel te maken.
Een eenvoudige manier om uw website sneller te maken, is door alle afbeeldingen op uw WordPress-website te optimaliseren.
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: Een snelle WordPress-website krijgen - een complete gids [25 stappen]
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 je je 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 produceren 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. Hoe meer uw browser moet laden, hoe meer tijd het kost om dit te doen.
Dat geldt vooral voor mobiele of langzamere internetverbindingen.
Aangezien afbeeldingen met een hoge resolutie een grotere bestandsgrootte hebben, is het altijd beter om dit te doen comprimeer de afbeeldingen voor het uploaden.
Op die manier moet de browser downloaden less gegevens zouden dus veel sneller moeten laden.
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 bij het comprimeren van JPEG-bestanden soms de daadwerkelijke inhoud van de afbeeldingen tijdens het proces.
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 grootte van het afbeeldingsbestand 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.
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.
We zullen het straks meer hebben over optimalisatie-plug-ins.
Lui laden: optimaliseer de laadtijden van WordPress-afbeeldingen
[UPDATE: WordPress 5.4 heeft lazy loading ingebouwd. Zolang je WordPress up-to-date houdt, hoef je je geen zorgen meer te maken over lazy loading.]
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?
Het is je misschien al opgevallen: websites die veel afbeeldingen op elke pagina gebruiken, lossen dit probleem op door de afbeelding alleen te laten laden wanneer deze zichtbaar is voor de gebruiker.
Deze tactiek vermindert niet alleen de laadtijd van de pagina, maar bespaart ook serverbandbreedte. Dit wordt lazyloading genoemd. Omdat het beeld "lui" is, verschijnt het alleen wanneer het nodig is.
Als u WordPress gebruikt, is het eenvoudiger om de afbeelding alleen te laten laden wanneer 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.
Vroeger had je hiervoor een plug-in nodig, maar nu is het ingebakken in WordPress.
Lees verder: Divi tegen Elementor
Gebruik het juiste afbeeldingsformaat
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.
JPEG, PNG en GIF zijn de meest populaire beeldformaten.
Welk formaat is beter voor geoptimaliseerde afbeeldingen van WordPress-websites en wanneer moet je het gebruiken?
- 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 de 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-afbeeldingen-uploader. Maar als u bijvoorbeeld HTML-bestemmingspagina's op WordPress maakt, is de kans groot dat u niet de standaard WordPress-afbeeldingsuploader gebruikt.
Zorg er in deze gevallen voor dat u de afbeeldingen van een webpagina niet naar verschillende mappen uploadt, maar dat u ze allemaal in één map uploadt.
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 browsercompatibiliteitscontrole in de gaten houdt wanneer u een afbeelding vervangt door CSS, omdat niet alle browsers deze technieken kunnen ondersteunen.
5 plug-ins voor beeldoptimalisatie om de paginasnelheid te behouden
We noemden eerder de Smush-plug-in voor afbeeldingsoptimalisatie, maar dit is niet de enige die u kunt gebruiken.
Als je ervan overtuigd bent dat het optimaliseren van afbeeldingen de juiste keuze is (en dat zou ook zo moeten zijn), zijn hier 5 WordPress-plug-ins die het volgende opleveren:
1. ShortPixel Image Optimizer voor WordPress
ShortPixel Image Optimizer voor WordPress is een lichtgewicht plug-in met alle basisfuncties om u te helpen afbeeldingen te optimaliseren.
Het comprimeert afbeeldingen, converteert ze, bevat achtergrondprocessen om afbeeldingen te optimaliseren en nog veel meer.
De plug-in is gratis te gebruiken voor maximaal 100 credits per maand. Dan kost het vanaf $3.99 per maand voor extra tegoeden. Onbeperkte abonnementen beginnen bij $ 8.99 per maand.
Deze plug-in doet veel dingen goed. Met de gratis versie kunt u het proberen voordat u het koopt, maar het leven wordt gecompliceerd met prijzen zodra u begint met het optimaliseren van meer afbeeldingen. Anders is het een goede optie.
2. Imagify
Imagify is een populaire plug-in voor beeldoptimalisatie met meer dan 300,000 installaties. Hiermee kunt u afbeeldingen optimaliseren, formaten inclusief WebP converteren en het formaat in een handomdraai wijzigen. Het is een zeer competente plug-in als u denkt dat u alle opties kunt gebruiken.
Er is een gratis versie met tot 20 MB aan bestandsoptimalisaties. Premium-abonnementen kosten $ 4.99 per maand voor maximaal 500 MB en $ 9.99 per maand voor onbeperkte optimalisaties.
Omdat Imagify comprimeert op hun eigen servers in plaats van op die van u, werkt deze prijsmethode beter.
Imagify biedt enkele krachtige optimalisatietools en drie compressieniveaus. Bovendien gebruikt het zijn eigen servers om dit te doen. Die gratis 20 MB is echter niet veel, aangezien een HD-afbeelding gemakkelijk 2 MB hoger kan zijn.
3. EWWW Afbeelding Optimizer
EWWW Image Optimizer is een gratis plug-in voor beeldoptimalisatie voor WordPress die veel doet zonder iets terug te vragen. Het wordt geïnstalleerd in WordPress en gebruikt zowel lossy als lossless compressie om afbeeldingen op uw site te verkleinen.
Het kan afbeeldingen tot 150 MB aan en kan de meeste tot 50% verkleinen. Hoewel het niet veel meer geavanceerde functies heeft, zijn de basisprincipes zeer zeker gedekt.
EWWW Image Optimizer is een geweldige gratis optie die vrij eenvoudig is, maar de klus klaart. Iedereen die lui laden of geavanceerdere afbeeldingsoptimalisaties nodig heeft, moet vanaf $ 7 per maand betalen voor premiumfuncties.
4. Smush
Smush is een krachtige gratis plug-in voor beeldoptimalisatie voor WordPress. Het heeft meer dan 1 miljoen installaties en doet alles wat een dergelijke plug-in zou moeten doen. Het optimaliseert, verkleint, verandert het formaat en laadt zelfs afbeeldingen lui.
Smush is installeren en vergeten. Stel het in, laat het los en het optimaliseert alle bestaande afbeeldingen en doet automatisch hetzelfde voor alle nieuwe afbeeldingen. De Bulk Smush-functie is vooral handig voor websites of portfolio's met veel afbeeldingen.
Om eerlijk te zijn, Smush is zo capabel dat we moeite hebben om het betalen voor beeldoptimalisatie te rechtvaardigen. Als u een kleinere website heeft en niet sterk afhankelijk bent van afbeeldingen, kan dit de enige plug-in zijn die u nodig heeft.
5. Optimole
Optimole is meer een hands-off plug-in voor beeldoptimalisatie. Eenmaal geïnstalleerd, zal het bestaande afbeeldingen controleren en optimaliseren en automatisch nieuwe afbeeldingen verkleinen zoals Smush dat doet.
Optimole biedt ook cloudgebaseerde afbeeldingen met behulp van een Optimole-server. Dit kan de levering van afbeeldingen versnellen ten koste van meer HTTP-verzoeken. Het is gratis voor maximaal 5,000 bezoekers per maand en $ 19.99 voor een onbeperkt aantal afbeeldingen.
Optimole is goed omdat het zorgt voor het weergeven van afbeeldingen op uw webpagina's. Het is niet zo goed omdat het afbeeldingen voor uw webpagina's dient. Je verliest veel controle in ruil voor een bescheiden prestatiewinst.
Veelgestelde vragen over het optimaliseren van plug-ins voor WordPress-afbeeldingen
Is er een WordPress-plug-in voor beeldcompressie die gratis is?
Ja, er zijn verschillende gratis WordPress-plug-ins voor beeldcompressie beschikbaar die u kunnen helpen de bestandsgrootte van uw afbeeldingen te verkleinen zonder aan kwaliteit in te boeten. Enkele populaire opties zijn Smush, ShortPixel en Optimole. Deze plug-ins zijn freemium, dus je krijgt meestal een bepaald aantal beeldcompressies gratis en daarna meer opties of gebruik als onderdeel van een premium abonnement.
Hoe optimaliseer je afbeeldingen voor het web in Photoshop?
Volg deze stappen om afbeeldingen voor het web in Photoshop te optimaliseren. Pas eerst het formaat van de afbeelding aan: Ga naar Afbeelding > Afbeeldingsformaat en stel de afmetingen in op het gewenste formaat voor uw webpagina. Vink het vakje "Resample Image" aan en kies "Bicubic Sharper" voor het beste resultaat. Sla de afbeelding op voor web: Ga naar Bestand > Exporteren > Opslaan voor web (oud) en kies uw bestandsindeling (JPEG, PNG of WebP) en compressie-instellingen. Gebruik het voorbeeldvenster om verschillende compressieniveaus te vergelijken en ervoor te zorgen dat uw afbeelding er goed uitziet terwijl het nog steeds een kleine bestandsgrootte heeft. Gebruik het juiste bestandsformaat: gebruik voor foto's het JPEG-formaat en gebruik voor afbeeldingen of logo's het PNG-formaat of WebP, wat doorgaans goed is voor de meeste soorten afbeeldingen. Dit helpt ervoor te zorgen dat uw afbeeldingen zijn geoptimaliseerd voor internet en snel op uw website worden geladen.
Hoe optimaliseer je afbeeldingen voor WordPress zonder een plug-in?
Om afbeeldingen voor WordPress te optimaliseren zonder plug-in, kunt u deze stappen volgen. Wijzig het formaat van de afbeelding met behulp van een afbeeldingseditor om het formaat van de afbeelding aan te passen aan de gewenste afmetingen. U kunt Photoshop, GIMP of een andere afbeeldingseditor gebruiken waarmee u vertrouwd bent. U kunt de afbeelding comprimeren met behulp van een hulpmiddel voor het comprimeren van afbeeldingen. Er zijn veel gratis online tools beschikbaar, zoals TinyPNG of Kraken.io, die je afbeeldingen kunnen comprimeren zonder kwaliteitsverlies.
WordPress-afbeeldingen optimaliseren
Beeldoptimalisatie is een van de belangrijkste aanpassingen die u kunt doen om de bruikbaarheid en responsiviteit van uw website te verbeteren.
Aangezien snelheid alles is, helpt het snel leveren van pagina's, met minimale vertraging, de betrokkenheid te verbeteren en zal dit ook een domino-effect hebben op uw SEO.
Omdat het zo eenvoudig is om te doen, vinden we dat elke website een vorm van beeldoptimalisatie zou moeten gebruiken.
Wat denk je? Optimaliseer je afbeeldingen? Welke methode gebruik je?
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.
en nog veel meer ...