Er is een nieuwe teamfoto, of het product op uw homepage is uit het assortiment. U wilt de afbeelding vervangen en dat lijkt de eenvoudigste klus die er is. Tot de nieuwe foto er staat en de hele sectie ineens twee keer zo hoog is, of het gezicht van uw collega half is afgesneden, of de pagina op mobiel opeens vier seconden nodig heeft om te laden.
Een WordPress-afbeelding vervangen is inderdaad eenvoudig, maar alleen als u de afbeelding eerst voorbereidt. Bijna alle problemen ontstaan doordat het nieuwe bestand andere afmetingen of een ander formaat heeft dan het oude. In dit artikel leest u hoe u dat voorkomt, welke twee manieren van vervangen er zijn en wanneer u welke kiest.
Stap 1: kijk eerst hoe de oude afbeelding eruitziet
Voordat u iets uploadt, achterhaalt u de eigenschappen van de foto die er nu staat. Ga naar Media in het beheerscherm, zoek de afbeelding op en klik erop. Rechts staat de informatie die u nodig heeft:
- De afmetingen in pixels, bijvoorbeeld 1600 bij 900.
- De bestandsgrootte, bijvoorbeeld 180 kB.
- Het bestandstype: jpg, png of webp.
- De alt-tekst, de omschrijving die voorleessoftware en zoekmachines gebruiken.
Noteer die vier. Uw nieuwe afbeelding moet dezelfde verhouding hebben en bij voorkeur ongeveer dezelfde afmetingen. Dat ene gegeven voorkomt negen van de tien lay-outproblemen.
Weet u niet welke afbeelding het is? Klik op de website met de rechtermuisknop op de foto en kies “Afbeelding openen in nieuw tabblad”. De bestandsnaam in de adresbalk vertelt u waar u moet zoeken in de mediabibliotheek.
Stap 2: bereid de nieuwe afbeelding voor
Dit is het deel dat de meeste mensen overslaan en dat het meeste effect heeft. Vier handelingen, samen vijf minuten werk:
- Snijd bij naar dezelfde verhouding. Stond de oude foto in 16 bij 9, maak de nieuwe dan ook 16 bij 9. Elk gratis programma kan dit, van Paint tot de Foto’s-app op uw telefoon. Let bij portretten op waar het gezicht komt te staan; sommige thema’s snijden aan de bovenkant af.
- Schaal naar de juiste breedte. Voor een afbeelding over de volle breedte van een pagina is 1600 tot 2000 pixels breed ruim voldoende. Voor een foto in een kolom is 800 tot 1000 genoeg. Een foto van 6000 pixels breed uit uw camera is voor een website onnodig en maakt de pagina zwaar.
- Comprimeer het bestand. Mik op maximaal 200 kB voor een grote foto en 100 kB voor een kleinere. Gebruik een online compressiedienst of de exportoptie van uw fotoprogramma. Het verschil in kwaliteit ziet u op een scherm niet; het verschil in laadtijd wel.
- Geef het bestand een fatsoenlijke naam. Niet IMG_20260412_0031.jpg maar teamfoto-kantoor-utrecht.jpg. Kleine letters, streepjes, geen spaties of accenten.
Over het formaat: WebP is lichter dan jpg bij dezelfde kwaliteit en wordt door alle actuele browsers ondersteund. Heeft uw site een plugin die uploads automatisch naar WebP omzet, dan hoeft u zelf niets te doen. Zo niet, dan kunt u het bestand vooraf converteren.
Stap 3: kies hoe u vervangt
Er zijn twee routes, en de keuze hangt af van één vraag: staat deze afbeelding op meer dan één plek?
Route A: vervangen in de pagina. Open de pagina in de editor, klik op de afbeelding, kies in de werkbalk Vervangen en upload het nieuwe bestand. Snel en veilig, maar het geldt alleen voor deze plek. Gebruik deze route als de afbeelding maar op één pagina staat.
Route B: het bestand in de mediabibliotheek vervangen. Hiervoor heeft u een plugin nodig, zoals Enable Media Replace. U vervangt dan het bestand achter de bestaande vermelding, waardoor de nieuwe foto overal verschijnt waar de oude stond, zonder dat u alle pagina’s langs hoeft. Handig bij logo’s en bij foto’s die op meerdere plekken terugkomen.
Bij route B geldt één aandachtspunt: kies bij het vervangen de optie waarbij de bestandsnaam en datum behouden blijven, anders kan het gebeuren dat de oude versie nog een tijdje uit de cache wordt geserveerd. Ververst de site na afloop niet, leeg dan uw cache; dat is bij plaatjes de meest voorkomende verwarring.
Stap 4: vul de alt-tekst in
De alt-tekst is de beschrijving die wordt voorgelezen aan mensen die de foto niet kunnen zien en die getoond wordt als het bestand niet laadt. Hij is verplicht voor toegankelijkheid en nuttig voor zoekmachines.
Schrijf hem als een korte, feitelijke zin: “Twee monteurs installeren een warmtepomp in een woning” is goed. “warmtepomp installatie warmtepomp monteur warmtepomp installateur” is keyword stuffing en werkt averechts. Is de afbeelding puur decoratief, dan mag de alt-tekst leeg blijven; dat is beter dan hem vullen met een nietszeggende omschrijving.
Vergeet niet ook het bijschrift aan te passen als de oude foto er een had, en de titel in de mediabibliotheek als die iets specifieks vermeldde.
Stap 5: controleren
Bekijk de pagina in een incognitovenster, op een laptop en op een telefoon. Let op:
- Is de hoogte van de sectie gelijk gebleven? Zo niet, dan klopt de verhouding niet.
- Wordt er niets belangrijks afgesneden? Vooral bij foto’s die als achtergrond over de volle breedte staan.
- Is de foto scherp? Een te klein origineel dat wordt opgerekt, ziet er wazig uit. Dan heeft u een grotere bronafbeelding nodig.
- Laadt de pagina nog vlot? Voelt hij trager, controleer dan de bestandsgrootte.
Ziet u nog de oude foto, dan is dat vrijwel altijd cache. Ververs hard met Ctrl+F5, en leeg zo nodig de cache van uw cachingplugin. Zie ook wat u doet als afbeeldingen helemaal niet worden getoond.
Een praktijkvoorbeeld
Een cateringbedrijf uit Eindhoven verving de zes foto’s op de homepage door nieuwe opnames van een fotograaf. De foto’s kwamen rechtstreeks uit de camera: elk bestand ruim vier megabyte en 6000 pixels breed. De pagina zag er prachtig uit op kantoor en had op een mobiele verbinding meer dan tien seconden nodig. Na bijsnijden naar dezelfde verhouding, verkleinen naar 1800 pixels en comprimeren naar ongeveer 150 kB per stuk was de pagina weer net zo snel als daarvoor, met foto’s die er op het scherm identiek uitzagen.
Wat u zelf doet en wanneer u hulp inschakelt
Zelf doen: losse foto’s in pagina’s en berichten vervangen, alt-teksten bijwerken, productfoto’s verwisselen. Even overleggen: het logo, achtergrondafbeeldingen die door het thema worden gezet, en foto’s in een slider of in een blok dat op meerdere pagina’s staat. Uitbesteden: het in één keer optimaliseren van alle bestaande afbeeldingen op de site en het instellen van automatische WebP-conversie. Dat laatste is eenmalig werk dat structureel snelheid oplevert en dat hoort in het beheer van uw website thuis in plaats van in uw eigen avonduren.
Tot slot
Een afbeelding vervangen breekt niets, zolang de nieuwe foto dezelfde verhouding heeft, niet zwaarder is dan nodig en een nette alt-tekst krijgt. Het werk zit in de voorbereiding, niet in het uploaden.
Concrete volgende stap: kijk bij de eerstvolgende foto die u wilt vervangen eerst in de mediabibliotheek naar de afmetingen van de oude, en snijd de nieuwe daarop bij voordat u iets uploadt. Wilt u meer zelf kunnen doen, lees dan hoe u veilig teksten aanpast in WordPress.
