Aan de slag met verklein.nu

Installeren

1. De plugin staat binnenkort op WordPress.org. Dan ga je in WordPress naar Plugins → Nieuwe plugin en zoek je op verklein.nu.
2. Activeer de plugin. Je vindt hem daarna als verklein.nu in het beheermenu, direct onder Media.
3. Open het tabblad Systeem & hulp en kijk of je server WebP en AVIF kan maken.
4. Maak een back-up van je database en de map wp-content/uploads voordat je de bibliotheek voor het eerst omzet.

Na de installatie verandert er nog niets: er wordt niets omgezet tot jij dat start of het omzetten van uploads aanzet.

Het beheer: vijf tabbladen

Nieuwe uploads

Automatisch omzetten staat standaard aan; de schakelaar staat op het tabblad Nieuwe uploads. Elke nieuwe JPG en PNG wordt bij het uploaden omgezet: WordPress schrijft het hoofdbestand en elk formaat meteen in WebP of AVIF, zonder eerst JPG’s te maken.

• Formaat en kwaliteit (bij Instellingen): standaard hetzelfde als voor bestaande afbeeldingen, maar je kunt uploads een eigen formaat of kwaliteit geven. AVIF maakt elke upload een paar seconden trager; WebP is snel.
• Maximale afmetingen (bij Instellingen): foto’s van een camera of telefoon zijn vaak 4000 tot 6000 pixels. Stel een maximale breedte en hoogte in. Kies of een grotere upload eerst kleiner wordt gemaakt, of wordt geweigerd. Werkt ook als automatisch omzetten uit staat.
• Maximale bestandsgrootte per afbeelding (bij Instellingen): bijvoorbeeld 1 MB. Grotere afbeeldingen worden geweigerd met een melding. Er wordt gecontroleerd na het verkleinen.
• Uploadlimiet (bij Instellingen): de maximale grootte voor alle bestanden. De pagina laat zien wat PHP op je server toestaat. Een plugin kan de limiet alleen lager zetten; hoger moet via je hoster of php.ini.
• Waar het werkt: de Mediabibliotheek, de blokeditor, het mediavenster van page builders, WooCommerce-productimports, de REST API en wp media import. GIF, SVG en PDF blijven bij uploaden ongemoeid.

Zet je het uit, dan blijven uploads JPG of PNG tot je ze omzet: per afbeelding met de knop Omzetten in de Mediabibliotheek, of met de rest van de bibliotheek.

Bestaande afbeeldingen

Wat al in je bibliotheek staat zet je in één keer om met de wizard op het tabblad Bestaande afbeeldingen. Zolang er nog iets om te zetten is, staat er ook een knop naar de wizard bovenaan Nieuwe uploads.

1. Je bibliotheek: hoeveel afbeeldingen kleiner kunnen, en of je server WebP en AVIF kan maken.
2. Kiezen: het formaat (WebP, AVIF of JPG/PNG houden), wat er met de originelen gebeurt en hoeveel je comprimeert. De aanbevolen keuzes staan al aan.
3. Voorbeeld: een afbeelding uit je bibliotheek in de drie niveaus. Sleep de lijn om met het origineel te vergelijken, of kies zelf een afbeelding om mee te testen. Er wordt nog niets opgeslagen.
4. Omzetten: bevestig dat je een back-up hebt en start. De taak loopt in korte porties; laat de pagina open voor het snelste resultaat. Sluit je hem, dan gaat de taak verder via WP-Cron.

Na afloop zie je wat er bespaard is. Nieuwe uploads krijgen automatisch dezelfde behandeling. De caches worden geleegd; leeg zelf de cache van je CDN of Varnish. Later opnieuw draaien, bijvoorbeeld met andere instellingen, kan gewoon via hetzelfde tabblad.

Instellingen

Deze instellingen gelden voor bestaande afbeeldingen én nieuwe uploads. Voor de meeste sites zijn de vier hoofdkeuzes genoeg.

Onder Meer opties staan ingeklapt:

• PNG, JPG, GIF en PDF: PNG lossless naar WebP, PNG naar 256 kleuren of naar JPG, progressieve JPG’s, GIF naar WebP, PDF’s comprimeren en de inspanning.
• Back-ups en URL’s: slimme back-up, back-ups automatisch verwijderen, URL’s bijwerken in alle tabellen, oude URL’s doorsturen en elke pagina controleren op achtergebleven oude URL’s.
• Welke afbeeldingen worden overgeslagen: bestandstypen, namen en mappen, bestandsgrootte, uploadperiode, berichttypen en het site-icoon.
• Afbeeldingsformaten: per thumbnailformaat niet comprimeren of niet meer aanmaken, en de maximale grootte.
• Fallback-modus: <picture>-elementen, de hele pagina, de Accept-headerregel en uitsluitingen op de site.
• Geavanceerd: metadata, alleen als het kleiner is, caches, de lengte van een portie, verwijderen en e-mailrapporten.

Instellingen exporteren en importeren als JSON-bestand kan onderaan dezelfde pagina.

Systeemeisen

nginx

nginx negeert het .htaccess-bestand dat de back-upmap afsluit, dus zet je zelf een regel in de serverconfiguratie. Met de tweede regel komen oude JPG- en PNG-URL’s bij WordPress terecht, voor de 301-doorverwijzing. De exacte mapnaam voor jouw site staat op het tabblad Systeem & hulp, en de systeemcheck test of de map dicht is.

location ^~ /wp-content/uploads/verklein-backup-<naam>/ {
    deny all;
}
location ~* ^/wp-content/uploads/.+\.(jpe?g|png)$ {
    try_files $uri /index.php?$args;
}
types { image/webp webp; image/avif avif; }

Apache en LiteSpeed hebben niets extra’s nodig.

WP-CLI

Alles uit het dashboard werkt ook in de terminal, zonder time-outs. Opties die je weglaat komen uit de instellingen. wp byt werkt nog als alias, voor scripts van de oude mu-plugin.

wp verklein convert --to=webp --dry-run        # eerst kijken wat er gebeurt
wp verklein convert --to=webp                  # omzetten, URL's bijwerken, caches legen
wp verklein convert --to=avif --quality=55 --effort=4
wp verklein convert --to=avif --mode=fallback  # JPG/PNG houden, AVIF- en WebP-kopieën, <picture>
wp verklein convert --to=webp --originals=keep # originelen laten staan
wp verklein convert --to=webp --ids=12,15      # alleen deze bijlagen
wp verklein convert --to=webp --network        # multisite: alle sites
wp --url=https://example.com/site-2 verklein convert --to=webp   # één subsite

wp verklein restore --dry-run
wp verklein restore --ids=12,15
wp verklein rewrite --dry-run
wp verklein repair
wp verklein status
wp verklein cleanup --yes
wp verklein job run                            # taak uit het dashboard afmaken

wp verklein convert

Zet afbeeldingen om naar WebP of AVIF, inclusief alle formaten en (standaard) de URL’s in de database. Zonder --to, --ids of --network toont het commando de hulp.

wp verklein restore

Zet de originele JPG- en PNG-bestanden en hun URL’s terug. Werkt ook voor afbeeldingen die met de oude mu-plugin zijn omgezet. Bij afbeeldingen met kopieën (fallback-modus) worden alleen de kopieën verwijderd.

Overige commando’s

Voor ontwikkelaars

Met deze filters en actions pas je het gedrag aan vanuit je thema of een eigen plugin.

// Ook URL's op je CDN herschrijven.
add_filter( 'verklein_rewrite_hosts', function ( $hosts ) {
	$hosts[] = 'cdn.example.com';
	return $hosts;
} );

// Redacteuren mogen ook omzetten.
add_filter( 'verklein_capability', function () {
	return 'edit_others_posts';
} );

// Het logo en de ID's 42 en 43 nooit omzetten.
add_filter( 'verklein_excluded_ids', function ( $ids ) {
	return array_merge( $ids, array( 42, 43, (int) get_theme_mod( 'custom_logo' ) ) );
} );

// Geen conversie voor uploads met "origineel" in de bestandsnaam.
add_filter( 'verklein_convert_upload', function ( $convert, $file ) {
	return false === stripos( $file['name'], 'origineel' ) ? $convert : false;
}, 10, 2 );

// Ook de tabellen van een eigen logplugin overslaan.
add_filter( 'verklein_rewrite_skip_tables', function ( $prefixes ) {
	$prefixes[] = 'mijnlog_';
	return $prefixes;
} );

// Na de taak ook de CDN-cache legen.
add_action( 'verklein_purge_caches', 'mijn_cdn_purge_all' );

// Geen <picture> op de afrekenpagina.
add_filter( 'verklein_picture_enabled', function ( $enabled ) {
	return function_exists( 'is_checkout' ) && is_checkout() ? false : $enabled;
} );

// Een class toevoegen aan elk <picture>-element.
add_filter( 'verklein_picture_html', function ( $html ) {
	return str_replace( '<picture>', '<picture class="vk-picture">', $html );
} );

// Bijhouden hoeveel er per afbeelding is bespaard.
add_action( 'verklein_converted', function ( $id, $record ) {
	error_log( sprintf( 'Bijlage %d: %d bytes bespaard', $id, $record['bytes_before'] - $record['bytes_after'] ) );
}, 10, 2 );