WebP produceert bestanden 25 tot 35 procent kleiner dan PNG voor dezelfde afbeelding, en het behoudt de transparante achtergrond waar PNG bekend om staat. Dat ene feit verklaart waarom Google WebP heeft gebouwd en waarom de meeste moderne websites het nu aanbieden. Het tegenargument van PNG is bereik: het wordt geopend in elk programma dat ooit is geschreven, inclusief software die nog nooit van WebP heeft gehoord. De keuze gaat dus niet over welk formaat technisch superieur is, want WebP is dat duidelijk wel. Het gaat erom of je optimaliseert voor een moderne website of voor gegarandeerde compatibiliteit overal. Deze gids vergelijkt de twee diepgaand op het gebied van compressie, transparantie, kwaliteitsmodi, browserondersteuning, animatie en paginasnelheid, en geeft u vervolgens een duidelijke keuzeregel.

Wat WebP is en waarom Google het heeft gemaakt

WebP is een beeldformaat dat Google in 2010 heeft uitgebracht, gebouwd op compressietechnologie van de VP8-videocodec. Het doel was bot: webafbeeldingen kleiner maken, zodat pagina's sneller laden. Google beschikte over de gegevens om te weten dat afbeeldingen het paginagewicht domineren, en dat het schrappen van een derde van elke afbeelding het internet meetbaar zou versnellen. WebP is vanaf het begin ontworpen om drie formaten tegelijk te vervangen, passend bij elkaar De transparantie van PNG, de fotografische compressie van JPG en de animatie van GIF in één container. Die ambitie is de reden waarom het dingen kan doen die PNG niet kan.

Wat PNG is en waarom het blijft bestaan

PNG verscheen in 1996 als een patentvrije vervanging voor GIF, waarbij verliesloze DEFLATE-compressie werd gebruikt en een volledig alfakanaal werd toegevoegd. Het werd de standaard voor logo's, pictogrammen, schermafbeeldingen en andere afbeeldingen die een doorzichtige achtergrond nodig hadden. Bijna drie decennia van universele steun is de slotgracht. Elke browser, besturingssysteem, e-mailclient, kantoorsuite en afbeeldingseditor leest PNG zonder configuratie. Wanneer een afbeelding absoluut ergens onbekend moet worden geopend, is PNG het formaat dat nooit faalt.

Bestandsgrootte: WebP wint duidelijk

WebP comprimeert in vrijwel elk scenario beter dan PNG. Voor een typisch logo of UI-afbeelding met transparantie kunt u een Een reductie van 25 tot 35 procent zonder verlies van PNG naar WebP gaan. Als u de verliesgevende modus van WebP inschakelt, groeit de besparing dramatisch, vaak met 60 tot 70 procent, terwijl het alfakanaal behouden blijft. PNG heeft helemaal geen optie met verlies, dus het kan niet aan de lage kant concurreren. Op een site met tientallen afbeeldingsitems loopt dat verschil op tot honderden kilobytes per geladen pagina.

De kloof komt van slimmere compressie. Het DEFLATE-algoritme van PNG is een algemene methode die is ontleend aan ZIP en goed is in het vinden van letterlijke herhaling. WebP maakt gebruik van voorspellende codering die speciaal voor afbeeldingen is gebouwd, waarbij elk blok van de buren wordt geraden en alleen het verschil wordt opgeslagen. Die beeldbewuste aanpak levert besparingen op die DEFLATE niet kan zien, en daarom verslaat een format uit 2010 zo consistent een format uit 1996.

Transparantie: beide hebben het, WebP doet meer

In tegenstelling tot JPG hebben beide formaten een volledig alfakanaal, zodat een logo in beide formaten zichtbaar blijft. Maar WebP voegt iets toe dat PNG niet kan evenaren: transparantie in verliesgevende modus. De transparantie van PNG wordt alleen geleverd met verliesvrije compressie, dus een semi-transparante afbeelding moet met volledig verliesvrij gewicht worden opgeslagen. Met WebP kun je tegelijkertijd een transparante achtergrond en agressieve compressie hebben, en dat is precies wat een zwaar PNG-logo nodig heeft. Voor UI-middelen en productuitsparingen die transparant moeten blijven en minder moeten wegen, is deze combinatie het sterkste argument van WebP.

Kwaliteit: verliesloze en verliesgevende modi

WebP biedt beide modi, waardoor het flexibel is op een manier die PNG niet is:

Verliesloze WebP komt exact overeen met PNG, pixel voor pixel, terwijl een kleiner bestand wordt geproduceerd. Er is geen sprake van een kwaliteitsafweging, alleen van groottewinst.
Verliezende WebP negeert details zoals JPG dat doet, waardoor bestanden veel verder worden verkleind, en in tegenstelling tot JPG kan het nog steeds transparantie behouden.

PNG biedt alleen verliesvrij aan, daarom blijft het groot. Als u een perfecte kopie nodig heeft, geeft verliesloze WebP u deze kleiner. Als u onzichtbaar verlies kunt accepteren, geeft verliesgevende WebP u een fractie van de omvang. Hoe dan ook, er is een WebP-instelling die de PNG verslaat.

Browser- en software-ondersteuning

Dit is het enige echte voordeel van PNG, en het wordt kleiner. Elke moderne browser ondersteunt WebP, inclusief Chrome, Firefox, Safari en Edge, dus op het open web is de compatibiliteitsvraag in wezen opgelost. De gaten liggen elders: sommige oudere desktopsoftware, bepaalde e-mailclients, oudere Office-versies en oudere platforms wijzen WebP nog steeds af. Uploadformulieren zijn de andere valkuil, omdat velen alleen JPG en PNG accepteren en een WebP-bestand direct weigeren.

De eerlijke samenvatting is dus dat WebP veilig is voor uw website en riskant voor bestanden die u aan onbekende systemen overhandigt. PNG blijft de universele reserve voor alles wat buiten uw controle valt.

Animatie: WebP vervangt ook GIF

Eén mogelijkheid die PNG eenvoudigweg mist, is animatie. Standaard PNG bevat één frame, en hoewel de APNG-extensie bestaat, is de ondersteuning altijd inconsistent geweest. WebP ondersteunt animatie native met volledige alpha, waardoor bestanden worden geproduceerd die veel kleiner zijn dan de equivalente GIF, terwijl miljoenen kleuren worden weergegeven in plaats van de 256 van GIF. Als je kiest tussen formaten voor een korte looping-afbeelding, verslaat WebP zowel PNG als GIF op beslissende wijze.

Waarom WebP websites versnelt

Het paginagewicht wordt rechtstreeks ingevoerd Grootste inhoudsvolle verf, een van Google's Core Web Vitals en een bevestigd rankingsignaal. Afbeeldingen zijn meestal het zwaarste op een pagina, dus het met een derde inkorten heeft een meetbaar effect op de laadtijd, op de LCP-score en op het bouncepercentage. Snellere pagina's converteren ook beter, en daarom loont prestatiewerk twee keer.

Het praktische patroon dat de meeste sites gebruiken is progressief: WebP aanbieden aan browsers die dit ondersteunen en voor de rest terugvallen op PNG of JPG. Moderne HTML regelt dit automatisch met het afbeeldingselement, en de meeste contentmanagementsystemen en beelddiensten doen dit voor u. U krijgt de snelheidswinst zonder iets kapot te maken voor oudere klanten.

Wanneer elk formaat gebruiken?

Gebruik WebP voor website-afbeeldingen, vooral logo's en pictogrammen met transparantie, waarbij kleinere bestanden snellere pagina's betekenen.
Gebruik WebP wanneer u transparantie en een klein formaat nodig heeft, aangezien dit het enige gangbare formaat is dat beide biedt.
Gebruik PNG wanneer de afbeelding in welk programma dan ook moet worden geopend, inclusief oude software en e-mailclients.
Gebruik PNG voor uploadformulieren en systemen die expliciet geaccepteerde formaten vermelden en WebP weglaten.
Gebruik PNG als uw archiefmeester, aangezien universele ondersteuning belangrijker is dan de grootte van een bestand dat u voor altijd bewaart.

Hoe PNG naar WebP te converteren

Voor het converteren is geen installatie nodig. Open onze omvormer, voeg uw PNG toe en kies de optie die de transparantie behoudt, die WebP exporteert. De verwerking verloopt lokaal via de HTML5 Canvas API, zodat er niets wordt geüpload en u meerdere bestanden tegelijk kunt batchen. De transparante achtergrond blijft intact terwijl het bestand aanzienlijk lichter wordt. De volledige walkthrough staat in de PNG naar WebP-handleiding.

Hoe zit het met AVIF?

Nuttig om te weten voor de context: AVIF is een nieuwer formaat dat zelfs beter comprimeert dan WebP, vaak nog eens 20 procent kleiner, en het ondersteunt ook transparantie en animatie. Browserondersteuning is nu goed, maar iets achter bij WebP, en softwareondersteuning blijft nog verder achter. Voor de meeste sites is WebP tegenwoordig de pragmatische keuze met de beste balans tussen besparingen en ondersteuning, waarbij AVIF het bekijken waard is naarmate de adoptie groeit. PNG blijft de fallback onder beide.

Het vonnis

WebP wint ruimschoots op de technische voordelen: kleinere bestanden, transparantie in zowel lossless als lossy modi, animatie en volledige moderne browserondersteuning. PNG wint op één ding dat er nog steeds toe doet, namelijk absoluut overal zonder twijfel openen. Gebruik WebP voor uw website en PNG voor alles wat u naar het onbekende verzendt, en serveer WebP met een PNG-fallback wanneer u beide wilt. Voor het bredere formaat beeld, de PNG versus JPG-gids covers waar foto's in passen.

Voorbeelden van werkelijke afmetingen

Abstracte percentages helpen minder dan werkelijke cijfers, dus hier ziet u hoe het verschil eruit ziet bij typische activa:

EEN Logo van 500 bij 500 pixels met transparantie: ongeveer 45 KB als PNG-24, ongeveer 30 KB als verliesvrije WebP en minder dan 12 KB als verliesgevende WebP met het alfakanaal intact.
EEN heldenafbeelding over de volledige breedte met zachte schaduwen: vaak 400 KB of meer als PNG, ongeveer 260 KB als verliesvrije WebP en ruim onder de 100 KB als verliesvrije WebP.
EEN UI-pictogramserie van twintig kleine afbeeldingen: de hele set kan zonder verlies van ongeveer 200 KB naar 130 KB dalen, vóór enige afstemming met verlies.

Vermenigvuldig het heldenvoorbeeld over een tiental pagina's en de besparing wordt seconden laadtijd op een langzame verbinding, wat precies het soort verschil is dat Core Web Vitals meet.

Een bestaande PNG-bibliotheek converteren

De meeste sites beginnen niet schoon; ze hebben al honderden PNG's geïmplementeerd. Drie benaderingen werken, afhankelijk van uw opstelling. Als uw site op een modern framework of CMS draait, wordt de beeldpijplijn waarschijnlijk automatisch geconverteerd en WebP weergegeven, zodat u een instelling wijzigt in plaats van bestanden. Als u een CDN- of beeldservice gebruikt, bieden de meeste dit aan automatische formaatonderhandeling, waarbij WebP wordt geleverd aan browsers die dit accepteren en PNG aan browsers die dat niet doen, vanuit hetzelfde bronbestand. En als u bestanden handmatig beheert, werkt het batchgewijs converteren van de assets en het bijwerken van de referenties, ook al is dit het meeste werk.

Welke route u ook neemt, bewaar de originele PNG's. Ze zijn uw meesters en u hebt ze mogelijk nodig voor een systeem dat WebP later afwijst.

Veelvoorkomende WebP-fouten die u moet vermijden

Een paar valkuilen zorgen ervoor dat mensen naar WebP verhuizen:

Uw archiefmasters converteren: converteer kopieën voor bezorging en bewaar de PNG-originelen, aangezien WebP-ondersteuning beperkter is in desktopsoftware.
Lossy WebP gebruiken op tekstafbeeldingen: compressie met verlies vervaagt scherpe letters, net zoals JPG dat doet. Gebruik verliesvrije WebP voor schermafbeeldingen en afbeeldingen met veel tekst.
De terugval overslaan: Het aanbieden van WebP zonder PNG- of JPG-alternatief verbreekt het imago voor oudere clients en sommige e-mailcontexten.
WebP verzenden om formulieren te uploaden: velen accepteren alleen JPG en PNG en zullen het bestand ronduit afwijzen.

Geen van deze zijn redenen om WebP te vermijden. Het zijn redenen om het te gebruiken waar het thuishoort, namelijk levering aan moderne browsers, terwijl PNG behouden blijft voor masters en voor alles wat buiten uw controle valt.

Hoe browsers het formaat daadwerkelijk kiezen

Het serveren van twee formaten klinkt ingewikkeld, maar het mechanisme is eenvoudig en automatisch. Elke browser verzendt bij elk beeldverzoek een Accept-header, waarin de formaten worden vermeld die hij begrijpt. Een server of CDN leest die header en stuurt WebP terug naar een browser die ondersteuning adverteert, of de PNG naar een browser die dat niet doet, vanaf dezelfde URL. In HTML kun je hetzelfde expliciet doen met het picture-element, waarbij je eerst een WebP-bron vermeldt en als tweede een PNG-fallback; de browser kiest de eerste die hij kan lezen en negeert de rest. Hoe dan ook, geen enkele bezoeker ziet ooit een gebroken beeld, en moderne browsers krijgen stilletjes het kleinere bestand, terwijl oudere browsers het compatibele bestand krijgen.

Veelgestelde vragen

Is WebP beter dan PNG?

Technisch gezien wel. WebP-bestanden zijn 25 tot 35 procent kleiner, behoud de transparantie en voeg lossy- en animatiemodi toe die PNG mist. PNG wint alleen op het gebied van universele compatibiliteit.

Ondersteunt WebP transparantie zoals PNG?

Ja, en verder. WebP houdt een alfakanaal bij in zowel verliesloze als verliesgevende modi, terwijl PNG alleen transparantie biedt met verliesloze compressie.

Hoeveel kleiner is WebP dan PNG?

Typisch 25 tot 35 procent verliesvrij kleiner, en 60 tot 70 procent kleiner in de verliesgevende modus, terwijl de transparantie nog steeds behouden blijft.

Ondersteunen alle browsers WebP?

Elke moderne browser ondersteunt WebP, inclusief Chrome, Firefox, Safari en Edge. Sommige oudere desktopsoftware en uploadformulieren wijzen dit nog steeds af.

Welke formaten ondersteunen transparantie en animatie?

WebP doet beide. PNG heeft transparantie maar geen betrouwbare animatie, en GIF animeert maar is beperkt tot 256 kleuren met grove transparantie.

Is WebP of PNG beter voor een website?

WebP, voor snelheid. Kleinere bestanden verbeteren de grootste inhoudsvolle verf, een Core Web Vitals-rangschikkingssignaal. Serveer een PNG-fallback voor oudere klanten.

Moet ik WebP of AVIF gebruiken?

WebP, voorlopig. AVIF comprimeert ongeveer 20 procent beter, maar heeft een smallere ondersteuning, dus WebP is vandaag de dag de pragmatische balans tussen besparingen en compatibiliteit.

Kan ik een WebP-bestand naar een formulier uploaden?

Vaak niet. Veel uploadformulieren accepteren alleen JPG en PNG, dus converteer naar een van die formaten wanneer een systeem de geaccepteerde formaten vermeldt en WebP weglaat.

Moet ik mijn bestaande PNG-bestanden naar WebP converteren?

Converteer kopieën voor bezorging, niet uw masters. Bewaar de originele PNG's, omdat WebP-ondersteuning beperkter is in desktopsoftware en uploadformulieren.

Is lossy WebP goed voor schermafbeeldingen met tekst?

Nee. Compressie met verlies vervaagt scherpe letters, precies zoals JPG dat doet. Gebruik verliesvrije WebP voor afbeeldingen met veel tekst en schermafbeeldingen.

Heb ik nog steeds een PNG-fallback nodig met WebP?

Voor maximale veiligheid ja. Moderne browsers lezen allemaal WebP, maar oudere desktopsoftware, sommige e-mailclients en veel uploadformulieren doen dat nog steeds niet.

Hoe weet een browser of WebP of PNG moet worden geladen?

Via de Accepteer de header die bij elk verzoek wordt verzonden, waarin de ondersteunde formaten worden vermeld. Servers en CDN's lezen het en retourneren automatisch WebP of de PNG-fallback.