Hoe u afbeeldingen sneller kunt laten laden op uw WordPress-site

U wilt dus dat uw afbeeldingen sneller worden geladen?


Nou, ik zal niet dally dally. Laten we een duik nemen in de goede dingen!

Er zijn drie manieren om afbeeldingen sneller te laten laden in WordPress:

  • Formaat wijzigen
  • Samenpersen
  • Luie lading

In dit bericht leg ik uit hoe elk van deze technieken werkt en waarom ze ervoor zorgen dat je site sneller laadt. Ik zal je ook laten zien hoe je elke tactiek implementeert met zowel handmatige oplossingen als aanbevelingen voor plug-ins.

Deze eerste techniek is uiterst eenvoudig, maar wordt vaak over het hoofd gezien door WordPress-nieuwkomers.

Hoe afbeeldingen in WordPress te optimaliseren

Verklein je afbeeldingen

De absoluut eenvoudigste manier om uw afbeeldingen sneller te laten laden, is door ze te verkleinen. Laat het me uitleggen.

Wat is het formaat wijzigen?

Wanneer ik zeg ‘formaat wijzigen’, bedoel ik de afmetingen van een afbeelding te wijzigen, en in dit geval wil je de afmetingen van te grote afbeeldingen verkleinen.

Bloggers nemen bijvoorbeeld soms foto’s op hun telefoon of digitale camera en uploaden deze naar hun blogs. De onbewerkte kopieën van de foto’s kunnen wel 5.000 px breed zijn. Denk hier eens over na …

De breedte van het berichtgedeelte op uw site is waarschijnlijk niet breder dan 800 px. De tekst die u nu leest, beslaat slechts ongeveer 700 px op de pagina, dus stel u voor dat u hier een afbeelding toevoegt die 5000 px breed is. Het zou zijn veel groter dan het moet zijn en hoewel het zou worden verkleind om op de pagina te passen, is het geladen afbeeldingsbestand nog steeds enorm en uiterst verspilling. En dat komt omdat …

Afbeeldingen met grotere afmetingen hebben ook grotere bestandsgroottes.

Als het gaat om prestaties en het sneller laden van uw afbeeldingen, is het verkleinen van de afmetingen van uw afbeelding een geweldige manier om de bestandsgrootte drastisch te verkleinen, en hierdoor wordt de afbeelding sneller geladen.

Laten we teruggaan naar mijn voorbeeld en aannemen dat de afbeelding 5.000 px breed en hoog is. Als je het verkleint van 5.000px naar slechts 700px, zou de afbeelding eigenlijk 99% minder pixels gebruiken. Met andere woorden, de bestandsgrootte zou met ongeveer 99% afnemen. Als de afbeelding 5 MB was, zou deze slechts 50 kb bedragen en zou deze 99% sneller op uw site worden geladen.

Formaat van afbeeldingen wijzigen

Als u niet van plan bent het formaat van uw afbeeldingen zorgvuldig te wijzigen, is er vrijwel zeker winst te behalen.

Er zijn een paar manieren waarop u het formaat van uw afbeeldingen kunt aanpassen zodat ze perfect op de site passen.

Wijzig de afmetingen van uw afbeeldingen handmatig

Voordat u een nieuwe afbeelding naar uw site uploadt, moet u deze handmatig aanpassen met behulp van de ingebouwde hulpmiddelen voor beeldbewerking op uw computer.

Als je een extreem groot beeld hebt zoals in mijn voorbeeld, zal dit meteen een groot verschil maken. Nadat het formaat van de afbeelding is gewijzigd, kunt u deze uploaden naar uw mediabibliotheek.

Zelfs als je de afbeelding in een lightbox of slider gaat gebruiken, is er normaal gesproken geen reden voor dat deze breder is dan 2000px. Als de afbeelding zich in een post- of pagina-inhoudsgebied bevindt, kunt u het waarschijnlijk goed doen met een afbeelding van 800 px breed.

Deze methode voor het vergroten of verkleinen van afbeeldingen werkt prima, maar het helpt niet bij afbeeldingen die al naar uw site zijn geüpload. Een eenvoudige techniek voor bestaande afbeeldingen is om simpelweg een ander formaat te kiezen.

Gebruik kleinere maten

Wanneer u een afbeelding uploadt naar uw mediabibliotheek, maakt WordPress maximaal 3 extra versies aan: Thumbnail, Medium en Large.

Als u uw pagina met media-instellingen bezoekt, ziet u dat u deze formaten hier kunt kiezen:

WordPress Media-instellingen

Hoewel u de instellingen kunt wijzigen, is de standaardgrootte Groot 1024px, wat groot genoeg is om te gebruiken voor berichten zonder al te verkwistend te zijn. Je kunt dit formaat gebruiken voor alle afbeeldingen die je in je berichten plaatst.

Als je de grootte van een afbeelding die je aan een bericht hebt toegevoegd, wilt wijzigen, klik je erop in de editor en zie je de vervolgkeuzelijst Afbeeldingsgrootte in de rechterzijbalk.

Formaat van WordPress-afbeelding wijzigen

Selecteer het formaat “Groot” en werk het bericht bij. Als u overmaatse afbeeldingen heeft, kunt u met deze techniek snel een geschikter formaat weergeven dat sneller wordt geladen zonder dat u het origineel opnieuw hoeft te uploaden en te vervangen.

Dat gezegd hebbende, dit kan erg vervelend zijn als je tientallen berichten met tientallen afbeeldingen hebt. Er is een nog snellere en effectievere methode beschikbaar.

Geautomatiseerd formaat wijzigen met een plug-in

In plaats van het formaat van de afbeeldingen zelf te wijzigen, kunt u een plug-in dit automatisch voor u laten doen. Als het gaat om het automatisch aanpassen van afbeeldingen, gaat er niets boven de Optimole inpluggen.

Optimole Image Optimizer

Het werkt niet zoals je verwacht.

In plaats van de afbeeldingen in uw mediabibliotheek te bewerken, bewaart Optimole zijn eigen kopieën van uw afbeeldingen en bedient ze vanaf een hoogwaardige CDN. Op deze manier worden uw originelen op geen enkele manier gewijzigd.

Bovendien hoeft u Optimole geen enkel formaat te geven om voor uw afbeeldingen te gebruiken. Het krijgt eerder de grootte van het scherm van de bezoeker en genereert een optimale versie van elke afbeelding tijdens de vlucht. Dat betekent dat iemand op een mobiel apparaat een 400px-versie van een afbeelding kan laden, terwijl een andere bezoeker op een laptop een 700px-versie van diezelfde afbeelding krijgt.

Deze methode van formaatwijziging is veel eenvoudiger te implementeren en effectiever voor mobiele apparaten, wat vooral belangrijk is omdat mobiele bezoekers vaak de neiging hebben om langzamere verbindingen te hebben.

Als je wilt leren hoe je Optimole gebruikt, kun je mijn volledige walkthrough-video volgen:

Ik raad aan om eerst het formaat te wijzigen, want of je het nu handmatig doet of het automatiseert met een plug-in, het is eenvoudig en kan enorme voordelen opleveren.

Als uw afbeeldingen al het juiste formaat hebben voor uw site, kunt u de prestaties van uw site nog veel meer verbeteren met compressie.

Comprimeer uw afbeeldingen

Compressie is een manier om de bestandsgrootte van een afbeelding te verkleinen zonder de afmetingen te wijzigen.

Er zijn twee soorten beeldcompressie beschikbaar.

Het eerste type beeldcompressie wordt “verliesloze” compressie genoemd.

Lossless compressie

Met een verliesloze optimalisatie wordt de afbeelding zelf eigenlijk niet bewerkt. Deze techniek verwijdert eerder alle metadata die zijn opgeslagen in het afbeeldingsbestand. Afbeeldingen slaan bijvoorbeeld vaak de naam op van het apparaat dat is gebruikt om de afbeelding te maken, de datum waarop de foto is gemaakt en soms zelfs de GPS-coördinaten van de opname.

Aangezien deze gegevens meestal vrij beperkt zijn, kan verliesloze optimalisatie de grootte van uw afbeelding slechts met 1-5% verkleinen, maar er is echt geen reden om deze niet te gebruiken omdat dit geen invloed heeft op de beeldkwaliteit.

De echte winst komt van optimalisatie met verlies.

Lossy compressie

Zoals je zou verwachten, optimaliseert lossy compressie het beeld zelf en resulteert het in kwaliteitsverlies. Maar hier is het ding …

Compressie-algoritmen zijn tegenwoordig zo goed dat u de bestandsgrootte van de afbeelding vaak met 50-70% kunt verkleinen zonder enig waarneembaar verschil. Tenzij u een professionele fotograaf bent en uw afbeeldingen perfect scherp wilt hebben op 4K-monitoren, zult u het kwaliteitsverlies niet eens merken.

Hoe u uw afbeeldingen kunt comprimeren

U kunt uw afbeeldingen handmatig comprimeren met een tool als TinyPNG voordat je ze uploadt, of gebruik een plug-in om dingen te automatiseren.

ShortPixel is een geweldige plug-in voor het optimaliseren van de afbeeldingen op uw site. Het kan ze meteen optimaliseren wanneer u ze uploadt en alle afbeeldingen die al in uw mediabibliotheek staan ​​in bulk optimaliseren.

shortpixel

Ik heb Optimole aanbevolen voor het vergroten of verkleinen van afbeeldingen en het comprimeert afbeeldingen ook zeer effectief. Nogmaals, het optimaliseert niet de originelen die zijn opgeslagen in uw mediabibliotheek, maar comprimeert eerder de kopieën die het dient voor uw bezoekers.

U kunt hier nog een paar plug-ins voor beeldoptimalisatie vinden.

Met je afbeeldingen verkleind en gecomprimeerd, wordt je site veel sneller geladen, maar er is nog een laatste optimalisatie voor afbeeldingen die je kunt maken.

Implementeer lui laden

Lazy loading is een hele slimme manier om je afbeeldingen verder te optimaliseren.

Stel dat u een blogpost met twaalf afbeeldingen heeft. Wanneer iemand uw site bezoekt, zijn niet al die afbeeldingen meteen zichtbaar op hun scherm. Ze moeten verder naar beneden scrollen om de meeste te laten verschijnen. Dus waarom alle 12 meteen laden?

Bij lui laden worden alleen de afbeeldingen die op het scherm verschijnen geladen. In plaats van 12 afbeeldingen te laden, worden er misschien maar 2-3 geladen. Terwijl de bezoeker naar beneden scrolt, worden de resterende afbeeldingen geladen zodra ze op het scherm verschijnen. Dit betekent dat de eerste lading veel sneller is en aangezien de meeste bezoekers niet helemaal naar beneden scrollen, worden veel afbeeldingen nooit geladen, wat u waardevolle serverbronnen bespaart.

Deze video heeft een visualisatie die het beter uitlegt als je een duidelijker beeld wilt van hoe lui laden werkt:

Nu u het concept heeft verkocht, kunt u als volgt lui laden op uw site implementeren.

Hoe lui laden te gebruiken

Nogmaals, deze techniek voor prestatieoptimalisatie kan eenvoudig aan WordPress worden toegevoegd met een plug-in.

Als u op zoek bent naar een gratis optie, probeer dan Optimole of a3 Lazy Load.

Met Optimole wordt lui laden automatisch ingeschakeld en is de a3-plug-in eenvoudig te configureren.

Als je het niet erg vindt om te betalen, kijk dan eens WP Rocket. Het heeft krachtige caching en een verscheidenheid aan andere snelheidsinstrumenten.

Om lui laden in te schakelen met WP Rocket, hoef je alleen maar deze schakelaar om te draaien:

WP Rocket Media

Makkelijker kan het niet!

Geniet van uw sneller ladende afbeeldingen

Om samen te vatten wat je net hebt geleerd …

Extra grote afbeeldingen die naar uw site zijn geüpload, zijn extreem traag. Slechts een van deze afbeeldingen kan uw site tot stilstand brengen.

Het belangrijkste dat u kunt doen om uw afbeeldingen te versnellen, is het formaat van te grote afbeeldingen te wijzigen, zodat ze de juiste grootte hebben voor uw site. U kunt dit handmatig doen of automatiseren met Optimole.

Vervolgens hebben algoritmen voor beeldcompressie een lange weg afgelegd en tegenwoordig kunt u de bestandsgrootte van een afbeelding met 50-70% verkleinen zonder de kwaliteit op een merkbare manier te beïnvloeden. Dit is geen goed idee. Gebruik ShortPixel of Optimole om elke afbeelding op uw site te comprimeren.

Ten slotte is lui laden een geweldige manier om selectief afbeeldingen te laden. U kunt Optimole, a3 Lazy Load of WP Rocket gebruiken om onmiddellijk lui laden op uw site te implementeren.

Als u geen van deze technieken heeft gebruikt, wordt uw site na implementatie aanzienlijk sneller geladen. Het zal je versteld doen staan.

Heeft u vragen over de concepten en technieken in dit bericht? Heb je nog een tip om te delen? Plaats in de comments hieronder!

Dit vind je misschien ook leuk,

Een langzame WordPress-site en beheerdersdashboard repareren (permanent)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map