Alles wat u wilt weten voordat u installeert.
Een gedetailleerde blik op hoe DataFirefly Image Optimizer: WebP, AVIF, Compressie en CDN voor Shopware 6 werkt, waarom we het zo gebouwd hebben en de gedachte achter de bovenstaande functies.
Het probleem met afbeeldingen op Shopware 6 standaard
Shopware comprimeert de JPEG's via de native ThumbnailService en genereert meerdere thumbnailformaten, maar produceert noch WebP noch AVIF. Nochtans bespaart WebP gemiddeld 25 tot 35% ten opzichte van JPEG en gaat AVIF nog verder, met tussen 50 en 60% winst ten opzichte van JPEG in de meeste gevallen. Zonder die formaten blijft uw Largest Contentful Paint zwaar en blijft uw Core Web Vitals score steken. Ook zonder native CDN-integratie wordt elke afbeelding vanaf uw applicatieserver geserveerd, wat de belasting en de latentie voor bezoekers ver weg verhoogt.
De volledige pipeline die deze plugin opzet
Bij de upload van een media luistert de subscriber naar media.written en detecteert hij de types JPEG, PNG en GIF. De in-place compressie van het origineel wordt toegepast indien geactiveerd, met progressieve JPEG met subsampling 2x2/1x1/1x1 en instelbare kwaliteit, of PNG met afgestemd compressieniveau en afgestemde filters. De EXIF- en ICC-metadata worden verwijderd als de optie is aangevinkt, wat bij foto's die rechtstreeks uit een toestel komen een niet te verwaarlozen gewichtswinst oplevert. Daarna wordt de WebP-sibling ernaast gegenereerd met een cumulatieve extensie, foo.jpg.webp, volgens de ingestelde kwaliteit, met een optionele lossless modus voor PNG's. Vervolgens wordt de AVIF-sibling gegenereerd met zijn eigen onafhankelijke kwaliteit en een beveiliging op de maximale breedte om de CPU niet te verzadigen bij zeer grote afbeeldingen. Tot slot krijgen de Shopware-thumbnails dezelfde behandeling.
CDN-herschrijving met een fijn bereik
De CDN-integratie herschrijft niet zomaar blindelings alle URL's. Er zijn drie bereiken beschikbaar: alleen media, wat enkel de URL's raakt die met /media beginnen, media plus thumbnails, wat /thumbnail toevoegt, en alle statische assets, wat ook /theme, /bundles en /assets omvat. Het standaardbereik, alleen media, is het veiligste en dekt 95% van de noden. Met het Twig-filter df_cdn kunnen themaontwikkelaars de herschrijving bovendien handmatig op om het even welke URL toepassen. Wanneer het CDN actief is, injecteert de plugin automatisch dns-prefetch en preconnect in de head tag, wat 50 tot 200 ms wint op het eerste CDN-verzoek, afhankelijk van de latentie.
Picture-rendering volgens de beste praktijken
Het component storefront/component/image/thumbnail.html.twig wordt via sw_extends uitgebreid. Het blok component_thumbnail_picture wikkelt de bovenliggende img tag in een picture met sources voor AVIF en daarna WebP, gevolgd door de originele fallback. De volgorde is cruciaal: AVIF eerst omdat recente browsers die verkiezen en zo de meeste bandbreedte besparen, WebP als tweede als vangnet voor oudere Safari-versies, en de JPEG/PNG fallback voor al de rest. De attributen loading lazy, decoding async, width en height om CLS te voorkomen worden volgens de configuratie toegevoegd.
Geplande taak voor afbeeldingen die al in de database staan
De plugin activeren op een webshop met al duizenden afbeeldingen in de database start de retroactieve optimalisatie niet automatisch, want dat zou riskant zijn. In plaats daarvan draait er standaard om de 15 minuten een Shopware geplande taak die de nog niet geoptimaliseerde media identificeert via een LEFT JOIN op df_image_optimizer, en die een instelbare batch verwerkt, standaard 50. Zo werkt u een grote webshop in enkele uren bij zonder de queue te blokkeren of de server te verzadigen. Met een knop in het admindashboard kunt u ook op elk moment een handmatige batch starten voor tests of gerichte inhaalslagen.
Transparante serverdetectie
Nog vóór de eerste optimalisatie toont het dashboard in realtime wat er aan de serverzijde beschikbaar is: PHP-versie, aanwezigheid van Imagick met de ondersteunde formaten, aanwezigheid van GD met zijn formaten, effectieve ondersteuning van WebP en AVIF, en de aanbevolen engine. Imagick krijgt voorrang wanneer die beschikbaar is omdat hij een betere encodeerkwaliteit en native AVIF-ondersteuning via libheif biedt. GD neemt het anders over, want die ondersteunt WebP al lang en AVIF sinds PHP 8.1. Geen verrassingen: als AVIF aan de serverzijde niet beschikbaar is, slaat de plugin die stap gewoon over en gaat hij verder met WebP in plaats van te crashen.
Veiligheid en netheid
De conversies zijn atomair: de plugin plaatst de afbeelding in een lokaal tijdelijk bestand voor de converters die een echt pad nodig hebben, en ruimt daarna systematisch op via een finally blok. De fouten worden via de PSR Logger gelogd zonder ooit de schrijftransactie van de media te onderbreken, dus een upload die slaagt wordt nooit geblokkeerd door een conversie die mislukt. Bij de deïnstallatie kunt u kiezen om de gebruikersgegevens al dan niet te behouden: de df_image_optimizer tabellen worden alleen verwijderd als u de optie uitvinkt. De WebP- en AVIF-bestanden die op het filesystem zijn gegenereerd blijven voor de zekerheid staan, en met een script van één regel ruimt u ze op indien nodig.
Voor wie is deze plugin gemaakt?
Voor elke Shopware 6 webshop waar de afbeeldingen een knelpunt vormen voor de LCP of de bandbreedte. Voor B2C-shops met rijke fotocatalogi: mode, decoratie, meubels, voeding. Voor internationale shops die ver van de origin-server leveren en de belasting naar een CDN willen verplaatsen. Voor themaontwikkelaars die een net Twig-filter en een nette Twig-functie willen in plaats van de img tags handmatig te knutselen. Voor SEO-teams die de Core Web Vitals opvolgen en gemakkelijk 20 tot 40 PageSpeed-punten willen winnen.
There are no reviews yet.