Ben jij een starter en wil je zelf aan de slag? Lees dan hier verder>>

Afbeeldingen bewerken voor je WordPress website

wordpress afbeeldingen verkleinen
Aangepast op: 20 sep, 2022

Laadt je pagina langzaam? Grote kans dat je te grote foto’s en afbeeldingen hebt geüploadt.

Er zijn een aantal redenen om je foto’s te verkleinen voordat je ze uploadt

  • SEO ranking, grotere zwaardere foto’s betekenen meer laadtijd en een minder hoge score op Google voor jouw website
  • Bezoekers klikken je website weer weg als het te duurt
  • Als ze toch blijven, raken ze geïrriteerd
  • Je schijfruimte bij je hosting raakt vol en soms kan dat extra kosten met zich meebrengen bovenop je maandbedrag

Test zelf een pagina met Pingdom

Ja, maar wat bedoel je dan met verkleinen?

Even een technisch verhaal, maar blijf bij me… Als ik een foto maakt met mijn mobiel, en uploadt naar mijn computer dan is deze bijna 3MB / 3000kB. Als ik hem open in Photoshop en de image size bekijk is deze 4160 x 3140 pixels en 72 dpi (dots per inch). En de camera’s op een telefoon worden alleen maar beter en groter.

Nu terug naar je website. Als je blogt en je gebruikt de volledige pagina breedte dan zal dan maximaal 1250 pixels zijn, maar met een zijkolom zal dat al gauw 800 pixels breed zijn. Haal daar de witruimte rondom vanaf en je foto wordt op slechts 760 pixels breed getoond. Waarom zou je dan zo’n enorme foto uploaden?

Wat bedoel je met te zwaar?

Foto’s van je telefoon, digitale camera of van de fotograaf zijn al gauw zwaarder dan 2MB. De foto’s op jouw website worden ingeladen in de browser (chrome, safari, firefox, IE etc.) en dat kost tijd. Hoe lichter de foto des te korter de laadtijd, hij toont de foto sneller en dat maakt de bezoeker des te blijer.

Hoe groot en zwaar moet de afbeelding dan zijn?

Gemiddeld gezien kun je al je foto’s behalve je headers verkleinen naar 960 pixels breed. Als je hem nu bewaart is hij nog steeds te groot.

Daarom deze tweede stap, je bewaart hem met de functie “save for web”, hierbinnen kun je kiezen voor max, high, medium, low. Kijk goed naar de preview en kies de laagste mogelijke waarde. Hieronder zie je een overzicht van wat dit doet met het aantal kB’s. Een foto van 1,7 mB gaat naar 48 kB. En dat betekent veel voor je laadtijd. Zeker als je meerdere foto’s hebt geplaatst binnen een blog.

In dit geval maakt het me niet zoveel uit dat hij wat wazig wordt, maar wil ik hem scherp hebben dan had ik voor high moeten kiezen. Dan is hij nog maar 97 kB.

afbeeldingen-weggeschreven-groottes

Waarmee kan ik afbeeldingen optimaliseren?

Hiervoor heb je Photoshop of een dergelijk programma nodig die dit kan. Uiteraard heeft niet iedereen Photoshop of Lightroom. Hier vind je een online tool: 

Ja, maar, dan kan toch ook in WordPress zelf?

Ja dat kan, maar WordPress bewaart meerdere versies in je upload map, dus ook de versie van 1,7 mB. Onder media instellingen kun je kiezen hoe groot je de variaties van het origineel wilt uploaden. Er komen dus 4 versies in je upload map. Ga je dit trouwens aanpassen na dit blog dan veranderen je oude afbeeldingen dus niet.

In je blog zelf (tussen de tekst) gebruikt WordPress de drie varianten. Bij de uitgelichte afbeelding( boven aan je blog) pakt hij de Thumbnail versie. En met die grote afbeelding doet hij niks.

Afbeeldingen worden geschaald, verkleind in je website

afbeelding weergave instellingen

Als je dan een afbeelding in de tekst plaatst, dan kan je hem op dat moment ook nog een eigen grootte geven. In dit voorbeeld hieronder zie je dat je afbeelding in werkelijkheid 558 x 806 pixels is. Maar hij word verkleind weergegeven naar 279 x 403 pixels. Als je hem niet groter dan dit gebruikt, verklein hem dan al van te voren.

afbeelding resizen

Dus mijn advies

Uploadt de foto in het formaat waarop je hem maximaal gaat gebruiken. Dat scheelt kB’s en dus laadtijd. En schijfruimte in je hostingpakket.

Installeren van de Imsanity plugin

Misschien handig om deze plugin Imsanity te installeren. Deze plugin installeer je in website. Je stelt de max grootte in en hij verkleind ze voor jouw en vervangt de originele mega afbeelding.

Waar ik tegen aanloop is dat ik een max MB heb ingesteld om te uploaden bij mijn media bibliotheek. Als je daar bijvoorbeeld max. 2MB hebt staan dan kan je nooit een foto groter dan dat uploaden en kan je de plugin niet gebruiken. Of je moet die max. MB ophogen.

Pluspunt is dat het snel werkt en inderdaad kleinere foto’s upload. Speel een beetje met de compressie voordat je hem volop gaat gebruiken. Bij mij in de video stond hij op 82, zou eventueel lager kunnen.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Post- en vestigingsadres

Timmermeesterslaan 44 8014 EM Zwolle

Bezoekadres / Kantoor
Ik heb momenteel een flexplek bij verschillende verzamelgebouwen.

Btw-ID NL001413297B10
KVK 53368959

Let op: alle genoemde prijzen op deze website zijn excl. 21% btw

Contactgegevens

Fotografie

De meeste foto's zijn gemaakt door Marieke Vogelzang van Time to shine. Beelden zijn eigendom van Marieke en mogen niet gebruikt worden zonder toestemming.

Overige foto's komen van Unsplash of zijn in eigen beheer gemaakt met toestemming van mijn klanten.