# Afbeeldingsoptimalisator WebP & AVIF: volledige gids
> Overzicht De Afbeeldingsoptimalisator WebP & AVIF converteert en comprimeert de afbeeldingen van uw winkel rechtstreeks op uw server, en levert daarna aan elke bezoeker automatisch het lichtste formaat uit dat…
- Pagina:
- Taal: nl
- Bijgewerkt op: 2026-09-10
- Andere talen: [fr](https://www.datafirefly.com/documentation/datafireflyimageoptimizer/index.md), [en](https://www.datafirefly.com/en/documentation/datafireflyimageoptimizer/index.md), [es](https://www.datafirefly.com/es/documentation/datafireflyimageoptimizer/index.md), [de](https://www.datafirefly.com/de/documentation/datafireflyimageoptimizer/index.md), [it](https://www.datafirefly.com/it/documentation/datafireflyimageoptimizer/index.md), [pl](https://www.datafirefly.com/pl/documentation/datafireflyimageoptimizer/index.md), [pt](https://www.datafirefly.com/pt/documentation/datafireflyimageoptimizer/index.md)
- Index:
## Overzicht
De Afbeeldingsoptimalisator WebP & AVIF converteert en comprimeert de afbeeldingen van uw winkel rechtstreeks op uw server, en levert daarna aan elke bezoeker automatisch het lichtste formaat uit dat zijn browser kan tonen. De hele conversie is lokaal: er gaat geen enkele afbeelding naar een externe dienst, en er is geen quotum en geen credits.
Het wezenlijke punt: uw oorspronkelijke bestanden worden nooit overschreven. Voor elke afbeelding `product.jpg` maakt de module `product.jpg.webp` en `product.jpg.avif` naast het origineel aan, en levert die alleen aan compatibele browsers uit. De bewerking is dus volledig omkeerbaar. De module werkt met PrestaShop 1.7.6, 8 en 9, en met Imagick, GD of de binaire programma's `cwebp` en `avifenc`.
## Vereisten en compatibiliteit
- **PrestaShop**: 1.7.6 tot 9.x, ook in multistore.
- **PHP**: 7.2 tot 8.3.
- **Minstens één beeldmotor**: de uitbreiding **Imagick** (aanbevolen, gecompileerd met WebP- en AVIF-ondersteuning), of de uitbreiding **GD** met WebP- en AVIF-ondersteuning, of de systeemprogramma's `cwebp` en `avifenc`.
- **Webserver**: Apache (transparante uitlevering via `.htaccess`) of Nginx (de modus `picture`).
Weet u niet zeker wat uw server ondersteunt? De module heeft een knop **De motoren testen** die een voorbeeldafbeelding converteert en per formaat aangeeft welke motor beschikbaar is en welk gewicht die oplevert.
## Installatie
1. Open in de backoffice **Modules > Modulebeheer**.
2. Klik op **Een module installeren** en plaats het ZIP-archief van de module.
3. Klik na de installatie op **Configureren**.
Bij de installatie maakt de module zijn twee tabellen aan (statistieken en wachtrij), registreert hij zijn hooks, past hij kant-en-klare standaardinstellingen toe en schrijft hij, als de uitleveringsmodus `.htaccess` aanstaat, zijn regelblok in de map `/img`. De aanwezigheid van minstens één beeldbibliotheek (GD of Imagick) wordt gecontroleerd: is er geen enkele beschikbaar, dan wordt de installatie met een duidelijke melding afgebroken.
## Eerste stappen
Drie stappen volstaan om uw hele bestaande catalogus te optimaliseren:
1. **Test de motoren**: klik op de configuratiepagina op _De motoren testen_ om te bevestigen dat WebP en AVIF kunnen worden aangemaakt.
2. **Analyseer de mediatheek**: klik op _De mediatheek analyseren_: de module doorloopt de doelmappen en vult de wachtrij met de te behandelen afbeeldingen.
3. **Start de conversie**: klik op _De conversie starten_: de verwerking gebeurt in batches, met een voortgangsbalk, en kan op elk moment worden gepauzeerd en hervat.
Nieuwe afbeeldingen die u daarna in de backoffice toevoegt, worden automatisch geconverteerd (zie _Automatische conversie bij het uploaden_).
## Configuratie
De configuratiepagina bundelt een dashboard (de mogelijkheden van de server en de behaalde besparingen), het hulpmiddel voor bulkverwerking, het instellingenformulier en een onderhoudspaneel.
### Next-gen-formaten
- **WebP aanmaken**: schakelt het aanmaken van de `.webp`-bestanden in.
- **WebP-kwaliteit**: van 1 tot 100. Het bereik 80 tot 85 geeft de beste verhouding tussen kwaliteit en gewicht.
- **AVIF aanmaken**: schakelt het aanmaken van de `.avif`-bestanden in.
- **AVIF-kwaliteit**: AVIF is dichter dan WebP, dus een waarde van 45 tot 55 volstaat doorgaans voor een uitstekende kwaliteit.
### Motor en uitlevering
- **Conversiemotor**: _Automatisch_ (aanbevolen), _Imagick_, _GD_ of _Binaire programma's_. In de automatische modus kiest de module voor elk formaat de beste beschikbare motor, in de volgorde Imagick, dan GD, dan de binaire programma's.
- **Uitleveringsmodus**: _.htaccess_ (transparante Apache-onderhandeling), _picture_ (HTML-herschrijving voor Nginx) of _geen_. Laat op Apache `.htaccess` staan: er valt verder niets te doen. Kies op Nginx voor `picture`.
### Uitgesteld laden (lazy-load)
- **Native lazy-load**: voegt `loading="lazy"` en `decoding="async"` aan de afbeeldingen toe, zonder JavaScript en zonder SEO-impact.
- **Vervagingseffect**: een lichte cosmetische fade bij het verschijnen van de afbeelding (optioneel).
### Compressie van de originelen
- **De originelen opnieuw comprimeren**: bewaart de oorspronkelijke JPEG's en PNG's in een geoptimaliseerde versie. Er blijft een back-up `.dforig` staan om te kunnen terugzetten.
- **JPEG-kwaliteit (originelen)**: de kwaliteit die bij het opnieuw comprimeren van de oorspronkelijke JPEG's geldt.
Het opnieuw comprimeren van de originelen is optioneel en staat standaard uit. De WebP- en AVIF-conversie levert al het grootste deel van de winst op; schakel het opnieuw comprimeren alleen in als u ook de bestanden voor oudere browsers lichter wilt maken.
### Bereik
- **Te behandelen soorten afbeeldingen**: producten, categorieën, fabrikanten, leveranciers, winkels en CMS-pagina's. De soorten die op uw installatie werkelijk bestaan, worden automatisch herkend.
- **Afbeeldingen van het thema**: behandelt ook de map `assets/img` van uw thema (en beheert daar bij Apache-uitlevering een eigen `.htaccess`).
- **Uitsluiten**: één patroon per regel: elk pad dat een van die fragmenten bevat, wordt overgeslagen (bijvoorbeeld `logo` of `/img/cms/banner`).
### Geavanceerd
- **Automatische conversie bij het uploaden**: converteert elke productafbeelding zodra die in de backoffice wordt aangemaakt of opnieuw aangemaakt.
- **Geanimeerde afbeeldingen overslaan**: geanimeerde GIF's en PNG's (APNG) worden herkend en ongemoeid gelaten.
- **Minimale grootte (bytes)**: onder dat gewicht wordt de afbeelding overgeslagen: heel kleine afbeeldingen winnen niets bij een conversie.
- **Batchgrootte**: het aantal afbeeldingen per AJAX-verzoek of per crondoorloop. Op gedeelde hosting is 10 tot 30 aan te raden.
Denk eraan na elke wijziging op **opslaan** te klikken. Wisselt u van uitleveringsmodus, dan wordt het `.htaccess`-blok automatisch toegevoegd of weggehaald.
## Hoe de uitlevering werkt
De module doet niets anders dan de next-gen-bestanden _aanmaken_ en de server vertellen hoe hij ze moet _uitleveren_. De URL's van uw afbeeldingen veranderen nooit.
### De modus .htaccess (Apache)
De module schrijft een regelblok in `/img/.htaccess`. Vraagt een browser om `product.jpg`, dan leest de server de `Accept`-header: meldt die AVIF-ondersteuning en bestaat `product.jpg.avif`, dan gaat dat bestand terug; anders wordt de WebP geprobeerd, en bij gebrek daaraan de oorspronkelijke JPEG. Er komt een header `Vary: Accept` bij, zodat caches en CDN's per browser de juiste versie bewaren. Alles is transparant: uw thema wordt niet gewijzigd, en er breekt niets als u de module uitzet.
Het blok komt in `/img/.htaccess` en niet in de wortel, want PrestaShop bouwt zijn `.htaccess` in de wortel geregeld opnieuw op. De map `/img` wordt niet door PrestaShop beheerd, dus daar blijft het blok stabiel staan.
### De modus picture (Nginx)
Op Nginx-servers bestaat de onderhandeling via `.htaccess` niet. De modus `picture` herschrijft dan de `img`-tags van de pagina tot `picture` met AVIF- en WebP-bronnen, vlak vóór de pagina vertrekt. De browser kiest zelf de eerste bron die hij kan tonen.
## Een grote catalogus optimaliseren (CRON en CLI)
Het AJAX-hulpmiddel voor bulkverwerking volstaat voor de meeste winkels. Gebruik voor duizenden afbeeldingen, of om de nieuwe afbeeldingen automatisch mee te nemen, de cron of de opdrachtregel.
### CRON-taak
Plan een regelmatig verzoek naar de URL die in het paneel _Automatisering_ van de configuratie staat. Die is met een token beveiligd:
```
https://uw-winkel/index.php?fc=module&module=datafireflyimageoptimizer&controller=cron&token=UW_TOKEN&scan=1&limit=200
```
De parameter `scan=1` start vóór de verwerking een nieuwe analyse (handig om nieuwe afbeeldingen op te sporen) en `limit` bepaalt het aantal afbeeldingen per doorloop.
### CLI-opdracht
Voor heel grote mediatheken verwerkt de opdrachtregel de wachtrij op de achtergrond, zonder timeout:
```
php modules/datafireflyimageoptimizer/cli/optimize.php --scan --loop
```
Beschikbare opties: `--scan` (eerst analyseren), `--loop` (doorgaan tot de wachtrij leeg is), `--limit=N` (de batchgrootte), `--types=products,categories` (de doelen voor deze run beperken), `--force` (de reconversie afdwingen ook als de next-gen-bestanden actueel zijn) en `--quiet` (minimale uitvoer).
## Terugzetten en omkeerbaarheid
Omdat de originelen nooit worden overschreven, kunt u op elk moment terug. In het paneel _Onderhoud_ wist de knop **Alles terugzetten** de aangemaakte `.webp`- en `.avif`-bestanden, zet hij de opnieuw gecomprimeerde originelen vanuit hun back-up `.dforig` terug, haalt hij het `.htaccess`-blok weg en leegt hij de statistieken. In hetzelfde paneel kunt u zo nodig ook **de .htaccess opnieuw aanmaken**.
Ingebouwde beveiliging: blijkt een next-gen-versie zwaarder dan het origineel (dat gebeurt bij sommige al sterk gecomprimeerde afbeeldingen), dan wordt zij automatisch geweigerd. De browser krijgt dan het oorspronkelijke bestand.
## Verwijderen
Het verwijderen haalt het `.htaccess`-blok weg en wist de tabellen en de configuratie van de module. De al aangemaakte `.webp`- en `.avif`-bestanden blijven op de schijf staan. Wilt u met een schone mediatheek herbeginnen, gebruik dan eerst **Alles terugzetten** in het tabblad Onderhoud en verwijder de module daarna.
## Problemen oplossen
**De next-gen-afbeeldingen worden niet uitgeleverd.** Controleer in de Apache-modus of `mod_rewrite` en `mod_headers` actief zijn en of de `.htaccess`-bestanden worden gelezen (de richtlijn `AllowOverride`). Bevestig ook, met de hulpmiddelen van uw browser, dat het afbeeldingsverzoek wel een type `image/avif` of `image/webp` teruggeeft.
- **De motortest mislukt voor AVIF**: uw Imagick of GD is waarschijnlijk niet met AVIF-ondersteuning gecompileerd. Installeer het programma `avifenc`, of zet AVIF uit en houd WebP aan.
- **Een witte pagina aan de frontzijde na het inschakelen**: dat hangt doorgaans samen met de modus `picture` op een sterk aangepast thema. Ga terug naar de modus `.htaccess` (Apache) of _geen_, en neem contact op met de support.
- **De conversie is traag**: verlaag de _batchgrootte_, of verplaats de verwerking naar de cron of de CLI, die voor grote volumes zijn gemaakt.
- **Sommige afbeeldingen worden niet geconverteerd**: controleer of zij boven de _minimale grootte_ uitkomen, of zij niet geanimeerd zijn (als die optie aanstaat) en of geen enkel _uitsluitingspatroon_ op hen slaat.
## FAQ
### Gaan mijn afbeeldingen naar een externe dienst?
Nee. De hele conversie is volledig lokaal, op uw server. Er wordt geen enkele afbeelding aan een derde doorgegeven, en er is geen quotum en geen credits.
### Worden mijn oorspronkelijke bestanden gewijzigd?
Standaard niet: de WebP- en AVIF-versies komen naast het origineel te staan. Schakelt u het opnieuw comprimeren van de originelen in, dan blijft er een back-up `.dforig` staan om ze terug te zetten.
### Moet ik mijn thema of mijn server aanpassen?
In de Apache-modus niet: het `.htaccess`-blok regelt alles. Schakel op Nginx gewoon de modus `picture` in de instellingen in.
### Welke formaten worden ondersteund?
De module maakt WebP en AVIF aan uit uw JPEG's, PNG's en (niet-geanimeerde) GIF's.
### Werkt de module met PrestaShop 9 en met multistore?
Ja, de module werkt met PrestaShop 1.7.6 tot 9.x en in een multistore-context. Hij gebruikt uitsluitend officiële hooks.
### Hoe behandel ik een catalogus van meerdere duizenden afbeeldingen?
Start de analyse en daarna de conversie in AJAX-batches, of plan de CRON-taak of de CLI-opdracht, die de wachtrij op de achtergrond zonder timeout verwerken.