Hoe stel je de beste WordPress-afbeeldingsgrootte in voor snel laden?
Het contentmanagementsysteem WordPress biedt de mogelijkheid om naast standaardafbeeldingsformaten ook individuele afbeeldingsformaten te gebruiken. We presenteren belangrijke stappen voor aangepaste afbeeldingsformaten, gebaseerd op WordPress 6.0.3.
De standaard afbeeldingsformaten in WordPress
De bestandsgrootte van afbeeldingen die op een website zijn ingesloten, heeft een grote invloed op de laadsnelheid ervan. Optimale afbeeldingsformaten verkorten de laadtijd en verminderen de geheugenbelasting op de server. Het WordPress CMS biedt een reeks gestandaardiseerde afbeeldingsformaten op de server bij het uploaden van media.
| Standaard afbeeldingsformaten van WordPress | Afmetingen (L x H) in pixels | Beeldverhouding |
|---|---|---|
| Voorbeeldafbeeldingen | 150 x 150 | Kan worden gedeactiveerd |
| Medium | 300 x 300 | Behouden |
| Groot | 1024 x 1024 | Behouden |
| Originele afbeelding | Zoals geüpload | Behouden |
WordPress-afbeeldingen opslaan in de backend en formaten aanpassen
Deze afbeeldingsformaten worden gedefinieerd in de WordPress-instellingen en kunnen daar binnen bepaalde grenzen worden aangepast. Ga hiervoor naar ‘Instellingen’ > ‘Media’ in de backend.
Na het uploaden van de media zijn er extra bestanden in de mediabibliotheek. De map hiervoor is https://mydomain.com/wp-content/uploads/ of https://mydomain.com/wp-content/uploads/2022/11/ (als mappen op basis van maand en jaar zijn ingeschakeld). Een afbeelding staat bijvoorbeeld in de volgende bestanden:
- voorbeeldafbeelding-1024x683.jpg
- voorbeeldafbeelding-150x150.jpg
- voorbeeldafbeelding-1536x1024.jpg
- voorbeeldafbeelding-2048x1365.jpg
- voorbeeldafbeelding-300x200.jpg
- voorbeeldafbeelding-620x413.jpg
- voorbeeldfoto-geschaald.jpg (2.560 x 1.707 px)
- voorbeeldafbeelding.jpg (het origineel)
Dit biedt de beste afbeeldingsformaten voor de meeste WordPress-pagina’s of -berichten. Afbeeldingen die naar de mediabibliotheek worden geüpload, mogen niet groter zijn dan 1920 pixels aan de lange kant van de afbeelding. Ze kunnen vóór het uploaden worden verkleind met gratis beeldbewerkingsprogramma’s om onaangename verrassingen te voorkomen. Dat geldt ook voor het WebP-afbeeldingsformaat, dat niet door alle browsers standaard wordt ondersteund.
Dit zijn de aanbevolen afbeeldingsformaten voor gebruik in WordPress-thema’s:
| WordPress-afbeeldingsformaten | Afmetingen (L x H) in pixels |
|---|---|
| Logo’s | 200 x 100 |
| Voorbeeldafbeeldingen | 150 x 150 |
| Achtergrondafbeeldingen | 1920 x 1080 |
| Afbeeldingen in staand formaat plaatsen | 900 x 1200 |
| Afbeeldingen in liggend formaat plaatsen | 1200 x 900 |
| Kopafbeeldingen (banner) | 1048 x 250 |
| Sliderafbeeldingen (afhankelijk van het thema) | Tot 1920 x ca. 600 |
De vereiste afmetingen van de afbeelding zijn afhankelijk van de componenten en structuur van een WordPress-thema. Ze zijn te vinden in de documentatie van het betreffende thema.
Afbeeldingen in de WordPress-mediabibliotheek vergroten of verkleinen
De afmetingen van WordPress-afbeeldingen kunnen ook worden aangepast. Naast het wijzigen van de oorspronkelijke afmetingen van de afbeelding, is het ook mogelijk om afbeeldingen bij te snijden, te draaien en om te keren. Om bijvoorbeeld een sliderfoto te maken van een afbeelding met grotere afmetingen in de mediabibliotheek, gaat u als volgt te werk:
Stap 1: Selecteer een afbeelding in de mediabibliotheek en klik op ‘Afbeelding bewerken’.
Stap 2: Stel de bewerkingsmethode en grootte in
Het is belangrijk om te weten dat de knop ‘Bijsnijden’ twee keer moet worden gebruikt: eenmaal om de functie te activeren en een tweede keer nadat de afmetingen van de afbeelding zijn ingesteld om de bewerking uit te voeren.
Stap 3: Afbeelding opslaan in mediabibliotheek
Nadat de geschaalde afbeelding is opgeslagen, bevat de uploadmap het bestand.
- preview-afbeelding-geschaald-e1667121439976.jpg
in nog vijf andere formaten met de automatisch toegewezen ID …-e1667121439976. De nieuw aangemaakte afbeeldingsformaten kunnen worden geselecteerd uit de mediabibliotheek in de Gutenberg-editor wanneer ze worden ingevoegd of vervangen. De pixelafmetingen van de afbeelding zijn dan ook daar beschikbaar.
Pas de afbeeldingsgrootte aan wanneer je deze invoegt in de WordPress-inhoud
De afbeeldingen uit de WordPress-mediabibliotheek worden in de inhoud ingevoegd. Hierdoor kunnen de afmetingen achteraf binnen ruime grenzen worden aangepast. De WordPress Gutenberg-editor biedt veel uitgebreidere mogelijkheden dan de klassieke editor TinyMCE.
Als u uw aangepaste instellingen wilt opslaan voor later gebruik, kunt u de Gutenberg-functie ‘Toevoegen aan herbruikbare blokken’ gebruiken en deze ook vergrendelen om onbedoelde wijzigingen te voorkomen. Dit bespaart u veel werk als u regelmatig nieuwe berichten publiceert.
Voor beroepsspecifieke websites, zoals de website van een fotograaf, kunnen aanvullende afbeeldingsformaten nodig zijn om uw visie perfect weer te geven. Onze handleiding’afbeeldingen comprimeren’biedt verdere hulp bij het aanpassen van afbeeldingsformaten, bijvoorbeeld voor WordPress-galerijplugins.
WordPress standaardafmetingen voor afbeeldingen uitschakelen
De eenvoudigste manier om de standaardafbeeldingsformaten uit te schakelen, is door de plug-in ‘Disable Media Sizes’ te gebruiken. In de instellingen ervan worden ook alle zeven gegenereerde afbeeldingsformaten weergegeven.
Met de getoonde instellingen van de plug-in worden de niet-geselecteerde formaten helemaal niet gegenereerd. Het uploaden van de originele afbeelding kan niet worden ‘uitgeschakeld’. Dit is een voordeel als u later toch andere formaten wilt genereren.
Het toevoegen van andere afbeeldingsformaten of het onderdrukken ervan is ook mogelijk met vermeldingen in de WordPress-kernbestanden functions.php en index.php. Dit is echter voorbehouden aan ervaren programmeurs. Een eerste overzicht van de programmeertaal vindt u in onze PHP-tutorial voor beginners.
Beelden verder optimaliseren voor WordPress met plug-ins
In de praktijk worden afbeeldingen voornamelijk gebruikt als JPG en PNG. De bestandsgrootte van deze afbeeldingsformaten kan verder worden aangepast met beeldbewerkingsprogramma’s. In Photoshop wordt bij het opslaan of exporteren gevraagd naar de kwaliteit. Het nadeel van deze methode is dat elke afbeelding afzonderlijk moet worden ‘bewerkt’ en vervolgens geüpload. Plug-ins zijn een elegantere oplossing. Deze hebben vaak een breed scala aan functies, dus het is raadzaam om de documentatie van de gebruikte plug-in goed door te nemen.
Hoge installatiecijfers en goede beoordelingen hebben bijvoorbeeld de volgende WordPress-plugins voor het aanpassen van WordPress-bestands- en afbeeldingsgroottes:
- EWWW Image Optimizer: Ondersteunt de volgende formaten: JPG, PNG, GIF, PDF, WebP, SVG
- TinyPNG: Ondersteunt JPG, PNG, WebP
- Imagify: ondersteunt JPG, PNG, PDF, GIF, WebP
- Regenerate Thumbnails: al enige tijd niet bijgewerkt
- Image Regenerate & Select Crop: idem
Onthoud voordat u plug-ins probeert: een WordPress-back-up beschermt tegen gegevensverlies als er echt iets misgaat.
Samenvatting: Optimaliseer de afbeeldingsgroottes in WordPress
Met de ingebouwde tools van WordPress kunnen al veel optimale afbeeldingsformaten worden bereikt. Met plug-ins zijn er nog meer mogelijkheden beschikbaar. Het aanpassen van de PHP-code van een WordPress-site moet worden voorbehouden aan programmeurs. En tot slot: houd bij het optimaliseren rekening met de SEO van afbeeldingen.