AVIF of WebP: welk beeldformaat past bij je website?

AVIF en WebP: de belangrijke verschillen

Beide kunnen de hoeveelheid beelddata voor bezoekers verminderen. Geen van beide garandeert voor elk beeld het kleinste bestand. Een gedetailleerd landschap, eenvoudige tekening en vrijstaand product reageren verschillend op compressie. Bron, instellingen en weergavegrootte tellen evenzeer als de extensie.

Dit zijn formaatmogelijkheden, geen functies van iedere converter. De formaatgids van MDN bespreekt AVIF. Googles WebP-documentatie beschrijft compressie en transparantie. Lees voor de bredere keuze, inclusief JPG, PNG en afbeeldingen met tekst, de gids over afbeeldingsformaten voor websites.

Is AVIF altijd kleiner dan WebP?

Nee. De schuifvergelijking hieronder toont twee echte Pixilo-exports uit dezelfde JPG van 1920 × 1440 pixels: een WebP van 299,0 kB met kwaliteit 80 en een AVIF van 275,7 kB met de vaste kwaliteitsinstelling 65. De AVIF bespaart 23,3 kB, ongeveer 8% ten opzichte van de WebP. Dat is de relevante vergelijking als je deze WebP vervangt, ook al bespaart AVIF ongeveer 33% ten opzichte van de bron-JPG van 413,1 kB.

Beide versies zijn rechtstreeks uit die JPG gemaakt, zonder de afmetingen te wijzigen. Dit zijn volledige bestandsgroottes met verschillende, formaatspecifieke kwaliteitsinstellingen; ze zijn niet afgestemd op gelijke zichtbare kwaliteit. De bron was al gecomprimeerd, dus geen van beide exports kan verloren details herstellen. Het resultaat beschrijft deze bestanden en instellingen, geen gegarandeerde AVIF-besparing.

Versleep de scheidingslijn over de rotsstructuur, de bergkam en de egale lucht. Zoek in de detailweergave naar zachtere texturen, lichte randjes en kleurbanden. Ga daarna terug naar het hele beeld om te beoordelen of het verschil op het beoogde formaat uitmaakt. Als het uiterlijk van een versie niet voldoet, vergelijk dan een andere export voordat je op bestandsgrootte kiest.

Pixilo-WebPPixilo-AVIF

Wanneer is AVIF een goede keuze?

Test AVIF bij foto’s die merkbaar bijdragen aan de download van een pagina: grote productweergaven, redactionele foto’s en banners. Beoordeel de besparing in bytes én procenten. De bovenstaande 23,3 kB is voor één beeld een bescheiden vermindering; de praktische waarde hangt af van hoe vaak het beeld wordt geladen en hoeveel werk de alternatieve versie aan je publicatieproces toevoegt.

Probeer vóór het omzetten van een hele bibliotheek een representatieve groep: fijne stof of haar, donkere delen en vloeiende verlopen. Houd de afmetingen gelijk en verwerp versies die belangrijke details verliezen. AVIF is een nuttige vervanging als de resterende besparing ertoe doet en je website het formaat betrouwbaar levert. Behoud WebP voor beelden waarbij die afweging niet gunstig uitvalt.

HDR-ondersteuning van het formaat maakt gewone conversie geen HDR-proces. Pixilo maakt momenteel een 8-bits AVIF met verlies uit door de browser gedecodeerde pixels. Het biedt geen HDR-behoud of verliesvrije schakelaar. Bewaar het origineel voor archivering, drukwerk of nauwkeurig kleurwerk.

Wanneer kun je beter WebP behouden?

Behoud WebP als het goed oogt, de grootte geschikt is en je website het betrouwbaar toont. Alleen wisselen omdat een formaat nieuwer is kost werk zonder gegarandeerde winst. Je CMS, beeldservice of editor kan WebP ook eenvoudiger verwerken.

Controleer tekst en scherpe randen zorgvuldig. Als compressie kleine labels of lijnen beschadigt, kies eventueel een tool voor verliesvrije WebP of behoud PNG. Pixilo heeft geen aparte verliesvrije WebP-modus. Lees PNG of WebP voor meer afwegingen.

Vraagt een ontvanger of formulier JPG of PNG, voldoe daar eerst aan. Een goed webformaat kan elders worden afgewezen. Het paginabeeld en een download hoeven niet hetzelfde formaat te hebben.

AVIF en WebP vergelijken met Pixilo

1. Begin bij het origineel. Gebruik JPG, PNG of WebP als bron en bewaar die apart. Maak geen testexport uit een andere gecomprimeerde testexport.
2. Bepaal eerst de afmetingen. Maak zo nodig een gemeenschappelijke bron met de afbeeldingsverkleiner. Houd voor deze vergelijking de langste zijde maximaal 4000 pixels.
3. Maak de AVIF-versie. Gebruik JPG → AVIF / PNG → AVIF / WebP → AVIF. De huidige tool gebruikt een vaste instelling met verlies en kwaliteit 65 en behoudt de pixelafmetingen van de bron; er is geen AVIF-kwaliteitsschuif.
4. Maak WebP uit dezelfde bron. Gebruik JPG naar WebP of PNG naar WebP. Pas de WebP-kwaliteit aan terwijl je het resultaat bekijkt. Deze converters bieden een standaard ingeschakelde limiet van 4000 pixels aan de langste zijde. Controleer dat de afmetingen niet bij slechts één versie zijn gewijzigd.
5. Controleer beide downloads. Kijk eerst naar afmetingen en zichtbare kwaliteit. Deel daarna het verschil in bytes door de WebP-bestandsgrootte om de besparing bij vervanging te berekenen. Behoud WebP als de AVIF groter is of als de kleinere versie noodzakelijke details verliest.
6. Test de website. Controleer op telefoon en computer, inclusief uitsnede en weergavegrootte. Bewaar de oude versie tot de controle klaar is.

Kwaliteitsgetallen zijn geen gezamenlijke schaal voor formaten of encoders. AVIF op 65 en WebP op 65 hoeven niet gelijk te zijn. Pixilo verwerkt beelden lokaal in je browser. De AVIF-encoder wordt indien nodig gedownload; dat hoort bij de eerste conversie.

Wat controleer je naast bestandsgrootte?

Fijne details en tekst

Bekijk haar, gras, stof en kleine letters op 100%, daarna op echte weergavegrootte. Zoom onthult veranderingen; normale grootte helpt hun belang beoordelen. Voor screenshots is leesbaarheid meestal belangrijker dan de kleinste download.

Verlopen en donkere delen

Zoek zichtbare kleurbanden in lucht, studioachtergronden en schaduwen. Donkere delen moeten details houden, geen vlakke vlekken worden. Kies minder compressie of een ander formaat als de versie slecht oogt.

Transparantie en randen

Bekijk transparante beelden op lichte en donkere achtergronden. Een lichte rand rond een product kan verdwijnen op wit en opvallen op zwart. Lees de gids over zwarte of witte achtergronden bij transparantie.

Kleur, animatie en origineel

Een converter bewaart niet automatisch iedere formaatfunctie. Pixilo tekent het gedecodeerde beeld opnieuw voor export en is niet bedoeld voor behoud van animatie, HDR of alle metadata. Controleer het resultaat en bewaar de bron als dit telt.

100% betekent hier de werkelijke pixelgrootte in een afbeeldingsviewer: één afbeeldingspixel wordt als één schermpixel getoond. De paginazoom van de browser is een aparte instelling.

AVIF aanbieden met WebP of JPG als alternatief

Actuele grote browsers ondersteunen beide, maar oudere browsers en sommige ingebouwde viewers kunnen een alternatief nodig hebben. Gebruik in eigen HTML picture. De namen zijn voorbeelden: maak en publiceer de echte bestanden eerst.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.jpg" width="1200" height="800"
       alt="Groene jas van voren gezien">
</picture>

De browser kiest de eerste geschikte ondersteunde bron, niet alle drie om groottes te vergelijken. Zet AVIF eerst als ondersteunende browsers dat moeten gebruiken. img levert alternatief, afmetingen en alt-tekst. Kies PNG als transparantie behouden moet blijven. Zie MDN over picture.

Controleer in een CMS wat de beeldservice of plug-in echt maakt en levert. Een AVIF-upload maakt niet vanzelf responsieve versies of reservebestanden. Bekijk beeldverzoeken na publicatie, vooral als cache of CDN oudere bestanden kan leveren.

Verbetert AVIF snelheid en SEO?

Een kleinere afbeelding kan overdracht verkorten, maar de extensie garandeert geen snellere pagina. Afmetingen, responsieve keuze, cache en het ontdekkingsmoment tellen mee. Een te groot AVIF kan slechter zijn dan een passend WebP.

Houd exporttijd en aflevertijd uit elkaar. We hebben de coderingssnelheid van de sliderbestanden niet gemeten. Meet voor je eigen werkwijze een representatieve batch op je apparaat en noteer de eerste conversie apart: Pixilo laadt de AVIF-encoder wanneer dat nodig is. Bij vooraf gemaakte bestanden wachten bezoekers niet op deze exportstap. Een dienst die varianten op aanvraag maakt, moet ook verwerking en caching meerekenen. Instellingen en implementatie beïnvloeden die kosten, zoals web.dev over AVIF-codering uitlegt.

Google Afbeeldingen ondersteunt beide. Formaatwissel vervangt geen nuttige inhoud, beschrijvende alt-tekst of bereikbare URL. Behoud img met src in picture en gebruik juiste extensies. Zie Googles beeldrichtlijnen.

Meet de pagina in plaats van betere posities uit een bestandswissel af te leiden. Voor laadprioriteiten en stabiliteit lees afbeeldingen en Core Web Vitals.

Veelgestelde vragen

Moet ik alle WebP-bestanden omzetten?

Nee. Test een klein representatief aantal. Vervang waar het helpt en de levering het ondersteunt. Behoud WebP waar het beter past.

Waarom is mijn AVIF groter dan mijn WebP?

Controleer afmetingen en zichtbare kwaliteit. Instellingen kunnen verschillen of WebP past beter bij dit beeld. Een groter AVIF rechtvaardigt geen vervanging van goed WebP.

Herstelt JPG naar AVIF verloren kwaliteit?

Nee. Verloren JPEG-details komen niet terug. Gebruik de beste bron en beoordeel uiterlijk en grootte van de kopie.

Kan ik .webp hernoemen naar .avif?

Nee. De naam verandert, niet de codering. Converteer en lever met juiste extensie en inhoudstype.

Wat als AVIF slechter oogt in Pixilo?

De AVIF-instelling is vast. Probeer WebP met aangepaste kwaliteit, behoud het origineel of gebruik een encoder met meer instellingen. Dit resultaat staat niet voor alle mogelijke AVIF-exports.

Samenvatten metChatGPT (opent in een nieuw tabblad)Grok (opent in een nieuw tabblad)Google (opent in een nieuw tabblad)Perplexity (opent in een nieuw tabblad)Claude (opent in een nieuw tabblad)