Afbeeldingen optimaliseren voor WordPress

Maak voor een WordPress-artikel een passende kopie, upload deze naar de mediabibliotheek en kies hem in een Afbeelding-blok. Kies de resolutie, voeg alt-tekst toe en controleer de pagina op je telefoon. Volledige grootte kiest de volledige versie van de mediabijlage, die WordPress al kan hebben verkleind. De optie maakt niet alleen het blok breder. De WordPress-referentie legt het verschil met de oorspronkelijke upload uit.

Voorbereiden vóór uploaden

Bewaar originele foto's apart van de kopieën die je wilt publiceren. Bepaal of het een brede omslag, artikelillustratie of kleine kaart wordt: daarvoor zijn meestal verschillende afbeeldingsgroottes nodig. Snijd overbodige ruimte weg en kies afmetingen voor de grootste bedoelde weergave.

Voor een afbeelding die 600 pixels breed wordt weergegeven, kun je op een scherm met hoge pixeldichtheid een versie van 1200 pixels proberen. Dat is een startpunt voor deze plek op de pagina, geen WordPress-eis. Bekijk het resultaat en vergelijk de bestandsgrootte met een kleinere versie.

Gebruik bijsnijden voor de compositie en de resizer voor de eindafmetingen. Behoud de verhouding bij breedte en hoogte, tenzij je bewust de vorm verandert.

Kies een ondersteund formaat

Probeer WebP voor eigen webfoto's. Behoud PNG als de pixels van de afbeelding exact behouden moeten blijven en JPG als een ander systeem dat vereist. Transparantie vereist niet per se PNG; WebP ondersteunt transparantie ook.

Test één beeld door je hele WordPress-installatie voordat je de bibliotheek converteert. De beeldverwerkingssoftware op de server, plugins en thema's beïnvloeden de verwerking. Zie WordPress over grootte en kwaliteit. Vermijd herhaald comprimeren door meerdere plugins zonder het resultaat te bekijken.

Controleer de afbeelding op de pagina

Plaats de afbeelding in het bedoelde bericht of op de pagina en bekijk de resolutieopties. Kies niet alleen voor de volledige grootte omdat dat beter klinkt. Kies voldoende detail voor die plek en controleer het bestand dat daadwerkelijk wordt geleverd. De officiële handleiding voor het Afbeelding-blok beschrijft de instellingen.

Schrijf alternatieve tekst voor de functie van het beeld. Een productdetail vraagt andere woorden dan een decoratieve scheiding. Maak er geen zoekwoordenlijst of herhaling van de alinea naast.

Controleer de gepubliceerde pagina

1. Open de URL uitgelogd, ook op een smal scherm.
2. Controleer uitsnede, scherpte en witruimte.
3. Open de getoonde afbeelding apart als je de gebruikte versie wilt controleren.
4. Controleer afmetingen en bestandsgrootte van de download. Gebruik het Network-paneel alleen voor verder onderzoek naar laden of de aanvraag.
5. Blijft de oude versie, controleer pagina-, plugin- of CDN-cache en test opnieuw.

Maak een herhaalbare routine

Noteer standaardmaten van omslagen, illustraties en miniaturen voor dit thema. Gebruik beschrijvende bestandsnamen en controleer mobiel vóór publicatie. Herzie instellingen bij een nieuw thema: een beeld voor een smalle kolom past misschien niet in een breed ontwerp.

Voorbeeld: van artikelbeeld tot publicatie

Maak voor een kolom van 720 pixels en een origineel van 3600 × 2400 kopieën van 720 × 480 en 1440 × 960 met dezelfde uitsnede. Dit zijn voorbeelden, geen WordPress-standaarden. Vergelijk op weergavegrootte en kies groter alleen bij nuttig extra detail. Bewaar het origineel en geef de export vóór upload een beschrijvende naam.

Voeg de kopie met een afbeeldingsblok aan een concept toe. Controleer resolutie en zichtbare breedte apart: een smaller blok bewijst geen kleinere download. Bekijk ook de uitgelichte afbeelding, die het thema anders kan uitsnijden. Controleer na publicatie uitgelogd het echte afbeeldingsverzoek op mobiel en desktop.

Als de vervanging nog verkeerd oogt

Vergelijk bij onscherpte eerst geleverde afmetingen met weergavebreedte voordat je de kwaliteit verhoogt. Blijft de oude afbeelding, controleer de aangevraagde URL: een andere kan op een oude verwijzing wijzen, dezelfde op cache. Onderzoek bij één verkeerde miniatuur juist die gegenereerde variant.

Maak vóór bulkwerk een back-up van media en database en test één bericht. Bepaal welk systeem comprimeert en controleer wijzigingen door plugins of CDN. Bewaar origineel, gekozen export en uiteindelijke URL samen om zonder herhaalde verliesgevende conversies terug te kunnen.