PNG vs WebP

WebP weegt vrijwel altijd minder; PNG is het bestand dat je zonder nadenken verstuurt.

Kies PNG wanneer

PNG als het bestand bij iemand anders belandt van wie je de programma’s niet kent. Hij gaat al decennia overal open.

Kies WebP wanneer

WebP voor je eigen website. Hij doet hetzelfde als PNG, doorzichtigheid inbegrepen, en neemt flink minder ruimte in.

Het detail waar mensen op stuklopen

Elke moderne browser begrijpt WebP, maar niet elke afbeeldingsviewer en niet oude software. Wie een bestand mailt weet niet waarmee het geopend wordt.

Van PNG naar WebP overstappen

Wat verloren gaat

PNG bewaart tot 16 bits per kanaal en WebP houdt er 8 over. Die extra precisie is wat stevige correcties zonder banden doorstaat: zet dus liever om ná het bewerken dan ervoor.

Wat behouden blijft

Er gaat niets verloren. PNG en WebP bewaren hun inhoud verliesvrij: de omzetting wisselt de verpakking, niet de kwaliteit, en je kunt haar herhalen zonder dat schade zich opstapelt.

De transparantie blijft. PNG en WebP bewaren allebei een alfakanaal: een uitsnede blijft uitgesneden en erachter wordt niets opgevuld.

Wat het doelformaat erbij kan

WebP kan animatie dragen; een PNG-bestand is één frame. Eruit komt een bestand met één beeld in een formaat dat er meer aan zou kunnen.

Het resultaat openen

Adobe Photoshop en GIMP lezen zowel PNG als WebP, dus je kunt het resultaat naast het origineel leggen zonder een tweede programma.

Waarvoor elk formaat bedoeld is

PNG is het formaat van PNG Development Group, verschenen in 1996. Er wordt met 16 bits per kanaal vastgelegd.

WebP komt van Google en stamt uit 2010, vastgelegd in RFC 9649. Adobe Photoshop, GIMP en Squoosh lezen het formaat.

Van WebP naar PNG overstappen

Wat verloren gaat

PNG bevat één stilstaand beeld. Van een geanimeerd WebP-bestand blijft het eerste frame over en de rest vervalt: de omzetting haalt er een beeld uit, ze neemt de beweging niet mee.

Wat behouden blijft

Er gaat niets verloren. WebP en PNG bewaren hun inhoud verliesvrij: de omzetting wisselt de verpakking, niet de kwaliteit, en je kunt haar herhalen zonder dat schade zich opstapelt.

De transparantie blijft. WebP en PNG bewaren allebei een alfakanaal: een uitsnede blijft uitgesneden en erachter wordt niets opgevuld.

Het resultaat openen

Adobe Photoshop en GIMP lezen zowel WebP als PNG, dus je kunt het resultaat naast het origineel leggen zonder een tweede programma.

Waarvoor elk formaat bedoeld is

WebP is het formaat van Google, verschenen in 2010. Er wordt met 8 bits per kanaal vastgelegd.

PNG komt van PNG Development Group en stamt uit 1996, vastgelegd in ISO/IEC 15948. Adobe Photoshop, GIMP en Paint.NET lezen het formaat.

Wat de omzetting van PNG naar WebP werkelijk doet

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as PNG.

PNG139 KB

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as WebP.

WebP14 KB9.7× kleiner

Een fotografisch tafereel — zachte overgangen, vage randen, korrel. Dit is het geval waarvoor WebP is bedacht, of waartegen, en de cijfers laten zien welke van de twee. Beide afbeeldingen worden door code getekend en gecodeerd door dezelfde omzetter die op deze pagina draait, dus de groottes zijn de uitvoer van de site zelf.
A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as PNG.

PNG7 KB

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as WebP.

WebP4 KB38% kleiner

Een doorzichtige achtergrond en een verloop dwars door de vorm. WebP houdt beide, of één van beide, of vult de doorzichtigheid met een effen kleur — en juist dat verschil overvalt mensen. Beide afbeeldingen worden door code getekend en gecodeerd door dezelfde omzetter die op deze pagina draait, dus de groottes zijn de uitvoer van de site zelf.
A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as PNG.

PNG3 KB

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as WebP.

WebP11 KB4.2× groter

Vlakke kleur en harde randen, zoals in een interface, een diagram of een logo. Gedraagt zich heel anders dan de foto hierboven, en dat is waarom het antwoord «het hangt ervan af wat er in het bestand zit» is. Beide afbeeldingen worden door code getekend en gecodeerd door dezelfde omzetter die op deze pagina draait, dus de groottes zijn de uitvoer van de site zelf.

Naast elkaar

PNG en WebP regel voor regel vergeleken: wat elk bewaart en wat dat kost.
PNGWebP
Full namePortable Network GraphicsWebP Image
Extensie.png.webp
Mediatypeimage/pngimage/webp
CompressieZonder verlies — er gaat niets wegHet een of het ander, afhankelijk van de instelling
Deze site kan het schrijvenJaJa

Waar deze cijfers vandaan komen

Wat deze pagina over PNG and WebP beweert, is na te gaan, en dit zijn de documenten die de zaak beslechten.