Skip to main content
Luister naar dit blog artikel

Verklein je afbeeldingen, foto’s voor je ze upload naar je website

Aangepast op: 14 mrt, 2024

Ben je zelf je website aan het bouwen? Grote kans dat je te grote foto’s en afbeeldingen hebt geüploadt. Let er op dat je eerst je foto’s kleiner maakt. In dit blog lees je waarom dit belangrijk is en wat je er aan kan doen.

wordpress afbeeldingen verkleinen

Geschatte leestijd: 8 minuten

Let op dit blog is helemaal herschreven sinds 27 febr. 2024

Waarom foto verkleinen voordat je ze uploadt, de voordelen

  • Snellere laadtijd van de pagina, SEO ranking verbetert
  • Backup is sneller klaar
  • Kleinere backup = minder verbruik van je schijfruimte
  • Bezoekers kunnen sneller door je website navigeren

Nadelen van grote zware foto’s

  • Zware foto’s betekenen meer laadtijd = lagere score door Google Index
  • Bezoekers klikken je website weer weg als het te duurt = bounce % omhoog
  • Hoog bounce % is een seintje naar Google Index dat je de match die ze voorlegden in de zoekresultaten niet de juiste is.
  • Als de bezoeker toch blijft, raken ze geïrriteerd = slechte reclame
  • Je schijfruimte bij je hostingpakket raakt vol = extra kosten bovenop je maandbedrag

Test zelf een pagina met Google Speedtest >>

Stappenplan afbeeldingen in WordPress gebruiken

Hieronder vind je de volgorde waarin je te werk gaat.

Stap 1 – Bepaald welke formaten er in je website komen

In een website heb je soms hero/header/banner/hoofdfoto’s bovenin. Loopt je foto over de volle breedte dan kan je 1920 pixels breed aanhouden. Heb je een boxed ontwerp, dan is het gemiddeld gezien 1500 pixels. De rest kan op 800-960 pixels breed.

Afbeeldingsformaten in WordPress

Uitleg website breedte: Stel de volledige pagina breedte is maximaal 1250 pixels zijn, maar je hebt een zijkolom. Dan zal de foto er niet groter dan 800 pixels op hoeven komen. 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?

Stap 2 – stel de afmetingen in bij Instellingen>media

afbeeldingen-weggeschreven-groottes

Als je een foto upload naar de mediabibliotheek. Maakt WordPress nog 3 extra formaten aan. Er worden 4 foto’s opgeslagen in jouw schijfruimte bij je hostingpartij. Hier zit een max op. Vandaar dat je wil voorkomen dat er onnodig extra versies worden opgeslagen.

Let goed op. Als je gebruik maakt van de een pagebuilder waarbij je zelf de formaten bepaald. Dan heb je deze functie niet altijd nodig. En kan je alles op 0 zetten. Dan worden ze niet aangemaakt. Check dit met je website bouwer.

Blijft de beeldverhouding hetzelfde bijvoorbeeld 2:3 maar heb je een thumbnail nodig voor bijvoorbeeld Yoast SEO of WooCommerce of een gallery? Dan kan je er voor kiezen om bij Thumbnailgrootte een fotoformaat in te stellen, zodat WordPress er automatisch een kleinere versie van maakt. Bijvoorbeeld 300×200, of 300×300 voor vierkante.

Weet je het niet zeker, test het uit. Zet alle op 0. Maak een pagina of blog aan en upload een nieuwe foto, mis je de formaten die je hebt uitgezet niet? Dan kan je het op 0 zetten.

Heb je een WooCommerce webshop dan zijn hier ook bepaalde instellingen voor gedaan.

Stap 3 – Bewerk je foto voordat je hem upload in WordPress

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

  • Pixlr.com
  • https://www.adobe.com/nl/express/feature/image/resize
voorbeeld photoshop
  1. Open de foto in jouw programma
  2. Open de image size en stel de resolutie in op 72dpi (beeldscherm)
  3. Maak een uitsnede in jouw vaste uitgekozen (afgesproken met websitebouwer) verhouding (aspect ratio). 1:1 is vierkant, 16:9 is panorama. 2:3 is veelgebruikt, maar 3:4 komt ook voor.
  4. Stel de breedte in, het kan zijn dat je tegelijkertijd moet doen in jouw programma met de aspect ratio. Voor paginabreed 1920, gekaderde website bijvoorbeeld 1500 en voor een blog 800. (let op voorbeeld groottes)
  5. Speel met de compressie als die mogelijkheid er is, doel is maximale kwaliteit, minimale kb.
  6. Save for web

Stap 4 – Upload (meerdere versies van) je foto in de mediabibliotheek

Gebruik je 1 foto op 2 manieren? 1x als panorama beeld bovenin en nog een keer als blogfoto of foto in je blog tussen de tekst? Dan kan je bovenstaande stappen vaker doen en verschillende versies uploaden.

Sommige website hebben de mogelijkheid om een andere foto te tonen voor tablet en mobiel. Om deze reden komt het ook voor dat je 1 foto vaker bewerkt naar meerdere beeldformaten en pixels.

Extra uitleg over verkleinen van foto’s

Als ik een foto maak met mijn mobiel, en daarna uploadt naar mijn computer dan is deze 14MB, dus 14.000KB. Een gemiddelde headerfoto zal een keer 250kb zijn. Groter hoeft niet.

Voor een scherm heb je niet meer dan 72 dpi nodig. Voor drukwerk is dat veel meer dan zit je op 300dpi. Stel daarom in op 72 dpi.

Met de optie “save for web”, wordt de afbeelding extra gecomprimeerd voor web en kan je zo uitkomen op een kleiner aantal kb. Probeer max 150 aan te houden, maar liever nog kleiner als het kan.

In Photoshop is er nog een optie om te kiezen voor de compressie in te stellen, dan snoep je nog wat van de pixels af. Maar let op hier kan het ten koste gaan van de kwaliteit van de foto en kan hij wazig worden.

Gebruik geen staande foto’s als uitgelichte afbeelding

Te vaak zie ik dat er staande foto’s worden toegepast als uitgelichte afbeelding. Dat is de foto die je in het blog-overzicht ziet en vaak boven de titel van je blog. Een staande foto gebruikt teveel van je webpagina en is meer geschikt om tussen de tekst te plaatsen, vaak met een tekstomloop.

Alleen als je in het ontwerp doelbewust gebruik maakt van staande foto’s houd ik mijn mond hierover. Maar anders niet doen.

Oplossingen achteraf

Ben je al jaren te grootte foto’s aan het uploaden dan kan je gaan opschonen. Doe dit wel met beleid want je wilt niet dat er foto’s op je website gaan ontbreken. Pas je beleid vanaf nu aan als je genoeg schijfruimte over hebt. Gooi foto’s weg als je het blog of pagina ook al hebt weggegooid.

Installeren van de Imagify of Imsanity plugin

Het kan handig zijn om deze plugin Imsanity te installeren. Je stelt de max grootte in en hij verkleind ze voor jouw en vervangt de originele mega afbeelding. Dit is natuurlijk niet met terugwerkende kracht op je oudere afbeeldingen.

WordPress Imsanity plugin gebruiken om je plaatjes qua kb te verkleinen

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.

Je kan ook Imagify gebruiken, werkt net wat anders maar zelfde principes om het aantal kb te verkleinen. Voorkomen is beter. Het kost je nog steeds schijfruimte als je foto’s van 2MB gaat uploaden.

Verkleinen in WordPress zelf

Je kan achteraf bijsnijden en verkleinen in WordPress. Door de afbeelding te bewerken. Ook hier bewaard hij alle versies en loopt je schijfruimte sneller vol dan vooraf op je computer verkleinen. Het enige voordeel is dat je een kleinere afbeeldingen (qua kb) op je website kan zetten. Zonder dat je dat eerst op je computer moet doen. Mijn ervaring is dat hij minder effectief is dan via photoshop.

Afbeeldingen in WordPress verkleinen
een voorbeeld van hoe het in WordPress zelf gaat

Behoefte om dit samen op te pakken?

Met regelmaat organiseer ik samen-doe-sessies maar een 1-op-1 sessie is ook mogelijk. Neem contact met me om uit te vinden hoe ik jou kan helpen.

studio@sandragortemaker.nl | 06 531 90 681


Geef een reactie

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.

Lees meer over het onderwerp: ,

Volg de WordPress training

online marketing studio sandra gortemaker

Wil jij je kennis over WordPress bijspijkeren? Dat kan met de online training waarin ik de meest voorkomende functies en werkwijzen bespreek.