WebP en AVIF

WebP is een afbeeldingsformaat van Google dat zowel verliesgevende als verliesvrije compressie ondersteunt, inclusief transparantie. Het vervangt in de praktijk JPEG en PNG. AVIF is nieuwer en gebaseerd op de AV1-videocodec. Het comprimeert doorgaans nog beter, vooral bij foto's, maar het coderen kost meer rekenkracht.

Beide formaten worden ondersteund door de huidige versies van Chrome, Edge, Firefox en Safari. Google Search indexeert WebP al langer en kondigde in augustus 2024 aan dat ook AVIF wordt ondersteund voor Google Afbeeldingen en andere functies die afbeeldingen gebruiken.

Beide formaten ondersteunen ook transparantie en animatie. Daarmee vervangen ze naast JPEG en PNG ook de zware geanimeerde GIF. Voor logo's en iconen blijft SVG meestal de betere keuze, omdat die scherp schaalt en klein is.

Op de meeste productpagina's en categoriepagina's is een afbeelding het LCP-element. Hoe kleiner dat bestand, hoe sneller het binnen is. Een productfoto van enkele honderden kilobytes als JPEG kan als WebP of AVIF vaak een stuk kleiner, zonder zichtbaar kwaliteitsverlies. Hoeveel precies, hangt af van het beeld en de instellingen; test het op je eigen foto's.

Kleinere afbeeldingen betekenen ook minder dataverbruik op mobiel en minder belasting van je server of CDN. Voor Google Afbeeldingen maakt het formaat niet uit voor de ranking; daar tellen bestandsnaam, alt-tekst, de context op de pagina en de kwaliteit van het beeld.

Bij grote catalogi telt het op. Een categoriepagina met 36 productthumbnails laadt tientallen afbeeldingen. Elke kilobyte die je per afbeelding bespaart, vermenigvuldig je met dat aantal. Op mobiel met een wisselende verbinding merk je dat direct.

Shopify regelt het automatisch. Afbeeldingen via de image_url-filter worden in een modern formaat geleverd als de browser dat ondersteunt. Jij zorgt voor de juiste breedtes en een goed srcset met de image_tag-filter.

Magento converteert standaard niet naar WebP of AVIF. Je hebt drie routes: een extensie die geconverteerde kopieën maakt en een picture-element rendert, conversie in nginx op basis van de Accept-header, of beeldoptimalisatie in je CDN, zoals Fastly Image Optimizer op Adobe Commerce Cloud of de beeldopties van Cloudflare. In Hyvä pas je het picture-element in de templates aan. Houd de originele JPEG als fallback.

In Laravel gebruik je een bibliotheek als Intervention Image of Spatie's media library met conversies, of je laat een image-CDN het werk doen. Genereer meerdere breedtes en serveer ze via srcset en sizes.

Converteer bij voorkeur bij upload of bij de eerste aanvraag, en bewaar het resultaat. Elke keer opnieuw converteren bij een request belast je server, zeker bij AVIF dat meer rekenkracht kost. Een image-CDN of een vooraf gegenereerde set formaten voorkomt dat.

Alleen het formaat wijzigen en de afmetingen vergeten. Een 3000 pixels brede WebP voor een thumbnail van 300 pixels is nog steeds te groot. Ook fout: geen width en height op de img, waardoor de layout verspringt (CLS). En bij een migratie bestandsnamen of extensies wijzigen zonder redirects, waardoor je opgebouwde zichtbaarheid in Google Afbeeldingen wegvalt.

Controleer na de omzetting of de afbeeldingen in je productfeed nog kloppen. Merchant Center stelt eigen eisen aan afbeeldingen. Laat de feed bij twijfel naar de originele JPEG of PNG verwijzen.