De meest gebruikte afbeeldingsformaten zijn JPG en PNG. WebP is in opkomst, een formaat dat sterk wordt aanbevolen door Google. Het WebP (weppie) formaat is goed in het verder comprimeren van foto’s.
Inhoudsopgave
AVIF, is veel nieuwer en eigenlijk een afgeleide van video formaten. AVIF produceert ook veel kleinere bestanden zonder merkbaar kwaliteitsverlies.
Kortom, zowel WebP als AVIF zijn initiatieven om de verouderde JPG te vervangen. Het blijkt echter dat oude en goed ondersteunde formaten niet zo gemakkelijk worden verdrongen. Dit is vooral te wijten aan het gebrek aan ondersteuning voor deze afbeeldingen door de belangrijkste browsers. Safari heeft bijvoorbeeld lange tijd geen ondersteuning geboden voor WebP, maar dat is aan het veranderen.
Er is nu beperkte ondersteuning voor AVIF, maar je kunt ze bekijken met Chrome voor Desktop. Naast browsers zullen ook applicaties voor het bouwen en onderhouden van websites deze formaten moeten ondersteunen, en dat is zeker nog niet het geval.
Controleer ondersteuning browservoor WebP en AVIF
Hier is een eenvoudige HTML-pagina die controleert of uw browser WebP en/of AVIF ondersteunt:
Ondersteunt mijn browser WebP en/of AVIF?
WebP
De eerste afbeelding op de testpagina moet WebP zijn. Als uw browser dit niet ondersteunt, staat er JPG op de afbeelding.
De afbeelding is 768 bij 1008 pixels groot. In JPG weegt de afbeelding 333 KB’s en in WebP 171 KB’s. Een besparing van bijna 50%.
De hier gebruikte HTML-code is standaard HTML5. De code controleert of een bepaald formaat wordt ondersteund en valt anders terug op iets bekends:
<afbeelding> <source srcset="Amsterdam-WebP.webp" type="image/webp"> <source srcset="Amsterdam-JPG.jpg" type="image/jpeg"> <img src="Amsterdam-JPG.jpg" alt="Amsterdam"> <afbeelding>
AVIF
En dezelfde test voor het veel nieuwere AVIF-formaat. De AVIF-afbeelding is nog eens 12% lichter dan de WebP.
JPG
Als je browser zowel WebP als AVIF ondersteunt (zoals de laatste versie van Chrome) kun je hier de JPG bekijken om de kwaliteit te vergelijken:
Ondersteuning voor AVIF in toepassingen
De browsers zijn een goede afspiegeling van hoe ver de acceptatie van een nieuw bestand is. Maar ook de applicaties die met afbeeldingen werken. Ik heb een test gedaan met Squarespace, de online webbouwer, en met Pinterest en beide ondersteunen op dit moment nog niet eens WebP, laat staan AVIF.
Verwante links
Als je zelf wilt experimenteren met WebP of AVIF, is Squoosh een handige site.
Conversie tools
Van AVIF en WebP naar JPG, of van JPG naar AVIF en WebP.