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 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).

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.

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.

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.

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.

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 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.