WebP-productafbeeldingen serveren in Magento achter Cloudflare

Productafbeeldingen zijn meestal het zwaarste onderdeel van een Magento-pagina, en vaak het grootste element op het scherm. Ze als WebP in plaats van JPG serveren is een van de makkelijkste manieren om pagina's lichter te maken.

Het klinkt als een wijziging van één regel. Op onze Hyvä-demowebshop kostte het drie pogingen. In dit artikel lees je wat misging, wat we nu draaien en welke kleine Magento-plugin het geheel bij elkaar houdt. Het hoort bij het snelheidswerk dat we doen voor elke Hyvä-webshop, en het werkt ook op Luma.

Poging één: WebP-bestanden uploaden

Het voor de hand liggende idee is om productafbeeldingen meteen als WebP te uploaden. De GD-image-adapter van Magento, op de meeste servers de standaard, weigert WebP-bronbestanden met de foutmelding “Unsupported image format”.

Daarom hielden we JPG als bronformaat. Dat heeft een bijkomend voordeel: de originele bestanden blijven in een formaat dat elke tool begrijpt, en je kunt de WebP-kwaliteit later aanpassen zonder de catalogus aan te raken.

Hoe Magento productafbeeldingen schaalt

Magento stuurt nooit de originele upload naar de browser. Het maakt geschaalde kopieën voor elke afbeeldingsrol die in het thema is gedefinieerd in view.xml, zoals het categorieraster, de productgalerij en thumbnails.

Die kopieën staan in pub/media/catalog/product/cache. Magento maakt ze op aanvraag aan, of in bulk met dit commando:

bin/magento catalog:images:resize

We draaien de bulk-resize na imports en themawijzigingen, zodat klanten nooit hoeven te wachten tot een afbeelding is gegenereerd. Deze geschaalde bestanden zetten we om naar WebP.

Poging twee: Accept-header-negotiation

De klassieke server-side aanpak gebruikt de Accept -header van de browser. Browsers die WebP ondersteunen, geven dat aan in die header, en nginx kan dan file.jpg.webp in plaats van file.jpg serveren op dezelfde URL.

Op één server werkt het. Achter het gratis abonnement van Cloudflare werkte het bij ons niet, omdat Cloudflare zijn afbeeldingscache niet laat variëren op de Accept-header.

De eerste bezoeker bepaalt welke versie Cloudflare voor die URL cachet. Iedereen daarna krijgt hetzelfde bestand, wat hun browser ook ondersteunt. Eén URL die twee verschillende bestanden serveert is vragen om verwarrende bugs, dus lieten we het idee varen.

Wat we nu draaien

In de werkende opzet krijgt het WebP-bestand een eigen URL. Cachen is dan eenvoudig, want elke URL geeft altijd hetzelfde bestand terug.

1. Productafbeeldingen worden geüpload als JPG.
2. Magento schaalt ze naar de map van de afbeeldingscache.
3. Een cronjob draait cwebp -q 80 en schrijft file.jpg.webp naast elke geschaalde afbeelding die er nog geen heeft.
4. Een plugin verandert de afbeeldings-URL in de .webp -versie als dat bestand op de schijf staat.

De conversiestap is een korte shell-loop:

find pub/media/catalog/product/cache -type f -name '*.jpg' | while read -r f; do
    [ -f "$f.webp" ] || cwebp -quiet -q 80 "$f" -o "$f.webp"
done

Kwaliteit 80 gaf ons duidelijk kleinere bestanden, zonder verschil dat we op productfoto's konden zien. Test een paar van je eigen afbeeldingen, want de beste waarde hangt af van de fotografie.

De Magento-plugin

Magento bouwt URL's van productafbeeldingen in Magento\Catalog\Model\View\Asset\Image. Een afterGetUrl -plugin op die class kan de URL wisselen zonder ook maar één template aan te passen.

De plugin wordt gedeclareerd in de etc/frontend/di.xml:

<type name="Magento\Catalog\Model\View\Asset\Image">
    <plugin name="vendor_webp_image_url"
            type="Vendor\Webp\Plugin\ImageUrlPlugin"/>
</type>

De plugin zelf controleert alleen of de WebP-kopie bestaat:

public function afterGetUrl(Image $subject, string $result): string
{
    if (is_file($subject->getPath() . '.webp')) {
        return $result . '.webp';
    }
    return $result;
}

Heeft de cron een afbeelding nog niet omgezet, dan geeft de plugin de gewone JPG-URL terug. Er gaat niets kapot, en de eerste paginaweergave na de conversie krijgt het WebP-bestand.

Alle moderne browsers ondersteunen WebP, dus we serveren het aan iedereen en slaan de oude fallbacks met het picture-element over. Zo blijft de markup eenvoudig.

Heb je liever een kant-en-klare module, dan zijn er diverse WebP-extensies voor Magento. Controleer hoe ze zich gedragen achter je CDN voordat je erop vertrouwt, en zorg dat ze werken met Hyvä-templates. Ons team voor extensieontwikkeling kan dit voor je beoordelen of bouwen.

Thema-afbeeldingen en de CDN

Productafbeeldingen zijn maar een deel van het verhaal. Thema-afbeeldingen zoals de tegels op de homepage en de afbeelding op de inlogpagina zijn op onze demowebshop ook WebP, 720 pixels breed en met een kwaliteit van ongeveer 72.

De CDN zorgde nog voor één verrassing. Cloudflare had sommige afbeeldings-URL's al gecachet voordat de resize-cache bestond, en bleef het verkeerde antwoord serveren nadat de bestanden waren aangemaakt.

De oplossing is de CDN-cache voor de mediahostname te legen na een bulk-resize of conversie. Dat doen we nu als vaste stap na elke afbeeldingstaak.

Valkuilen op een rij

• WebP-uploads worden geweigerd door de GD-adapter van Magento, dus houd JPG als bron.
• Accept-header-negotiation werd genegeerd door de CDN-cache, dus geef WebP een eigen URL.
• Afbeeldingen die vóór het schalen al in de CDN zijn gecachet, moeten worden gepurged.
• Labtests kunnen valse resultaten geven als je server headless browsers blokkeert. Dat behandelen we in ons artikel over Lighthouse-tests.
• Het schijfgebruik groeit iets, omdat elke geschaalde afbeelding nu een WebP-tweeling heeft.

Veelgestelde vragen

Waarom niet naar AVIF omzetten?

AVIF kan nog kleiner zijn, maar coderen gaat trager en de ondersteuning door tools op servers is minder consistent. WebP gaf ons een grote winst met een eenvoudige, betrouwbare pipeline, dus daar zijn we mee begonnen.

Werkt dit ook op Luma-webshops?

Ja. De plugin werkt op de image-asset-class van Magento, niet op het thema, dus zowel Luma- als Hyvä-webshops profiteren. Hyvä heeft gewoon minder ander gewicht op de pagina, waardoor de winst door afbeeldingen meer opvalt.

Wat gebeurt er als een productafbeelding wordt vervangen?

Magento maakt nieuwe geschaalde bestanden met nieuwe paden aan, en de cron zet ze bij de volgende run om. Tot die tijd serveert de plugin de JPG, dus klanten zien altijd de juiste afbeelding.

Wil je lichtere productpagina's zonder je catalogus opnieuw op te bouwen? Bekijk hoe we Magento-snelheidsoptimalisatieaanpakken, of start een Hyvä-project met ons.