wordpress afbeeldingen verkleinen

Afbeeldingen bewerken voor je WordPress website

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 bij sommigen kan dat extra kosten met zich meebrengen bovenop je maandbedrag

Test zelf een pagina met Pingdom

In deze video leg ik je uit hoe je afbeeldingen verkleind in WordPress zelf.

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 1,7 MB/ 1500kB. Als ik hem open in Photoshop en de image size bekijk is deze 2560 x 1940 pixels en 72 dpi (dots per inch).

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 een foto van 2560 pixels 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 800 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: Pixlr.com. Maar vaak zit bij aanschaf van een digitale camera ook een cd of link naar een bewerkingsprogramma. Je kan Picasa van Google gebruiken, hier zit een handige optie om je foto’s in bulk te exporteren op elk gewenst formaat (mijn persoonlijke favoriet). Je kan deze installeren op je eigen computer en je foto’s importeren, en daarna een selectie maken van de te exporteren foto’s. Je kunt ze er ook bijsnijden en bijwerken. Picasa wordt alleen niet meer ondersteund en aangeboden. Maar, ik heb de laatste versie (3.9) die ik via WeTransfer toestuur. Je hoeft alleen een mailtje te sturen. Heb je zelf een goede optie laat het me weten via een reactie op dit blog.

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

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.

Dus mijn advies

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

afbeelding resizen
afbeelding weergave instellingen

Tutorials


Studio Sandra Gortemaker

Studio Sandra Gortemaker richt zich op vrouwelijk ondernemers die graag ondersteuning willen in hun online marketing. Ik help je bij het opzetten van je WordPress website, landingspagina en/of salespagina en je MailChimp campagnes. Ik ben hierin jouw sparringpartner en coach.

Is er nog iets onduidelijk of heb je een andere vraag? Laat het me weten door een reactie achter te laten.

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

Contactgegevens

Btw-ID NL001413297B10
KVK 53368959

Post- en vestigingsadres

Timmermeesterslaan 44 8014 EM Zwolle

Bezoekadres / Kantoor

Esdoornstraat 3 8021 WB Zwolle

%d bloggers liken dit:

Alle (cookie)scripts worden geblokkeerd totdat je klikt op accepteren. meer info

Onderaan in de footer vind je een link naar mijn privacy- en cookiebeleid. Hieronder een korte samenvatting:

Alle gegevens die worden verzameld via Google Analytics zijn anoniem. Ik hoef hier geen toestemming voor te vragen, maar het is wel fijn om te weten dat ik dit gebruik.
Maak je gebruik van formulieren of de reactiemogelijkheid op deze website. Dan maak je automatisch de keuze voor het plaatsen van cookies. Het is niet mogelijk deze opties te gebruiken zonder het plaatsen van cookies. Uiteraard bewaar ik je mail of aanvraag niet langer dan nodig. Reacties en aanvragen via een formulier op worden opgeslagen op mijn website en in mijn Gmail.
Meld je je aan voor een MailChimp nieuwsbrief dan worden deze gegevens opgeslagen in mijn MailChimp account, totdat je jezelf weer afmeld.

Sluit venster