PNG naar WebP, kleinere bestanden die transparantie behouden

Ruil een log PNG in voor een slanke WebP die zijn transparantie behoudt en sneller laadt.

of sleep de afbeelding hierheen

Hoe je PNG naar WebP omzet

Hoe je PNG naar WebP omzet

Trek een PNG in het neerzetgebied of klik om er een te zoeken. Het werk schiet los op het moment dat het bestand landt, zonder ergens een Omzetten-knop, en voor een alledaagse afbeelding is het in ruim minder dan een seconde rond. Een Downloaden-knop slaat de WebP dan op onder de bronnaam met een nieuwe uitgang. Zet er één om en hij draait in je browser, geef er meerdere en ze gaan samen omhoog naar onze server. Hetzelfde pad bedient telefoons en desktops, geen installatie vereist. Voor nog een sleep je gewoon de volgende PNG erin. Geef het een geanimeerde PNG en alleen het eerste frame overleeft, want de WebP die het hier maakt is een enkel stilstaand beeld in plaats van een bewegende reeks.

Transparante pixels gaan rechtstreeks over naar WebP

Transparante pixels gaan rechtstreeks over naar WebP

Een 8-bits alfakanaal woont in WebP, dus elke transparante pixel in je PNG landt net zo transparant in de WebP. Niets wordt wit, geen rand omringt een uitsnede, en achteraf is geen opruimen in een editor nodig. Dit is de echte reden om WebP boven JPG te verkiezen wanneer je PNG transparantie draagt, want JPG bezit geen alfa en moet heldere pixels inruilen voor een effen kleur. Logo's, pictogrammen, uitgesneden productfoto's, interface-mockups, schermafbeeldingen met afgeronde hoeken, alles wat op een doorzichtige achtergrond rust, gaat er onaangeroerd overheen. Er valt geen schakelaar hiervoor om te zetten, het gebeurt gewoon, omdat alfa dragen deel is van waarvoor WebP gebouwd werd.

Redenen om van PNG naar WebP over te stappen

Redenen om van PNG naar WebP over te stappen

Voornamelijk krijg je een veel lichter bestand terwijl transparantie en visuele kwaliteit standhouden. Googles officiële WebP-cijfers tonen lossless WebP ruwweg 26 procent onder een gelijk PNG, en lossy WebP met alfa dicht bij een derde van de grootte van een vergelijkbaar. Lichtere afbeeldingen komen sneller aan, wat rechtstreeks doorwerkt in Largest Contentful Paint, een van Googles Core Web Vitals en een bekende rangschikkingsfactor. PageSpeed Insights noemt PNG zelfs onder zijn suggestie voor nieuwe-generatieformaten, en overstappen op WebP wist die vlag. Ook de ondersteuning vormt geen obstakel, want Chrome, Firefox, Safari en Edge lezen WebP allemaal native.

Kwaliteitsinstelling en de lossy afweging

Kwaliteitsinstelling en de lossy afweging

Araluma schrijft de WebP op een instelling dicht bij lossless, afgestemd op zowel foto's als grafische beelden, zodat het er bij gewone weergavegroottes hetzelfde uitziet als het PNG waar het uit kwam. Op dit niveau gehouden is WebP technisch lossy, wat betekent dat een beetje bitprecisie wordt prijsgegeven tegenover een vlekkeloze lossless kopie. Voor bijna al het webwerk, logo's, pictogrammen, interface-elementen, foto's, is die kloof onzichtbaar. Wanneer de klus pixel-exact is, zoals medische scans of archiefmasters, houd het PNG en laat de WebP de export zijn. Op foto's mag je meestal een daling van 50 tot 70 procent in grootte verwachten, gelegd boven op het structurele voordeel dat WebP al heeft over PNG.

Waar de PNG echt wordt omgezet

Waar de PNG echt wordt omgezet

Dit splitst zich op naar hoeveel je geeft. Zet een PNG alleen om en de hele taak gebeurt in het tabblad, op de beeldengine van de browser zelf, op je apparaat, zonder dat er iets omhooggaat en zonder dat er iets over het bestand wordt genoteerd. Controleer het zelf, open DevTools, laat het Netwerk-paneel open terwijl je die ene foto omzet en tel nul uitgaande verzoeken die hem dragen. Zet er een handvol samen om en ze gaan omhoog naar onze server, die ze allemaal doorloopt en één download teruggeeft. Die download wordt binnen ongeveer 2 uur van onze server opgeruimd, en je kunt hem wissen op het moment dat je opslaat. Zo verlaat een afbeelding nooit de browser, en blijft een batch alleen zo lang op onze server als nodig is om samen te stellen wat je meeneemt.

Wanneer de originele PNG nog de juiste keuze is

Wanneer de originele PNG nog de juiste keuze is

Hoe ver WebP ook komt, een paar plekken blijven voor hem gesloten. Een handvol ontwerpprogramma's, drukkerijen en bedrijfseigen redactiesystemen staan nog altijd op PNG, en terwijl je besturingssysteem een PNG via slepen zonder morren slikt, vraagt het bij WebP graag om een uitbreiding. Vandaar de simpele vuistregel voor bewaren: wat je in een desktop-programma keer op keer aanraakt en opnieuw veiligstelt, houd je het best als lossless PNG, anders stapelen zich met elke ronde van uitpakken en herschrijven kleine verliezen op. Stuur WebP het web in en laat het PNG thuis als bron rusten. Heb je ooit de tegengestelde richting nodig en wil je van een WebP weer een PNG maken, dan staat de tool webp-to-png daarvoor klaar.

Hoe het werkt

  1. Geef een PNG aan

    Schuif de PNG op de pagina, of zoek hem in de kiezer. De doorzichtige delen gaan mee. Zet er één om en hij blijft op je machine, laat er meerdere vallen en ze gaan omhoog naar onze server om samen behandeld te worden.

  2. Leun achterover

    Je doet niets meer. Een typische afbeelding wordt ongeveer zo snel een WebP als je vinger zich licht, zonder Omzetten-stap en zonder draaitol onderweg.

  3. Zie het krimpen

    Het resultaat meldt hoe groot het uitkwam. Heldere plekken blijven helder, en de WebP zou zichtbaar minder moeten wegen dan het PNG waar je mee begon.

  4. Houd je WebP

    Eén tik op Downloaden schrijft het uit, oude naam, frisse .webp-uitgang. Meer in de rij? Gooi elk op de pagina en ze gaan één voor één door.

Veelgestelde vragen

Blijft de transparantie behouden bij het omzetten van PNG naar WebP?

Dat klopt. Omdat WebP een volledig alfakanaal houdt, blijft elke heldere plek van je PNG helder zodra het een WebP is. Juist dat ene feit is waarom WebP JPG verslaat als doel telkens wanneer je met een transparant PNG begint, want JPG bezit geen alfa en moet de heldere plekken een effen kleur schilderen, terwijl WebP de uitsnede precies laat zoals het hem aantrof. Logo's, pictogrammen, productopnames, interface-stukken op doorzichtige achtergronden, ze gaan allemaal heel over en vragen niets extra van je.

Waarom PNG naar WebP omzetten?

Voor een slanker bestand dat zowel zijn transparantie als zijn uiterlijk behoudt. Volgens Googles WebP-cijfers draait de lossless smaak ruwweg 26 procent onder een gelijk PNG, en de lossy smaak met alfa landt dicht bij een derde ervan. Een slankere afbeelding komt eerder aan, wat Largest Contentful Paint helpt, een Core Web Vitals-maat die Google in de rangschikking weegt. PageSpeed Insights wijst zelfs op PNG als nieuwe-generatieformaatkans in zijn afbeeldingscontrole. Bovendien leest elke grote browser, van Chrome en Firefox tot Safari en Edge, WebP zonder hulp.

Verliest het omzetten van PNG naar WebP kwaliteit?

Bij de instelling dicht bij lossless die Araluma gebruikt, zien foto's en grafische beelden er hetzelfde uit als het bron-PNG bij gewone weergavegroottes. Hier gehouden WebP is technisch lossy, dus een sliver bitprecisie gaat naar een kleiner bestand. Voor alledaags webgebruik, logo's, pictogrammen, foto's, is die kloof onzichtbaar. Voor pixel-exact of archiefwerk houd het PNG en behandel de WebP als de leveringskopie. De omzetting laat je PNG onaangeroerd, het zit precies zo op je apparaat als het was.

Hoeveel kleiner is WebP dan PNG?

Googles officiële WebP-cijfers zetten lossless WebP rond 26 procent onder een gelijk PNG, en lossy WebP met alfa op ruwweg een derde van de grootte van een vergelijkbaar. De exacte verhouding rijdt op de inhoud, waarbij grafische beelden met brede heldere gebieden en effen kleurblokken het meest winnen, terwijl drukke, gedetailleerde foto's een kleinere maar nog steeds nuttige daling zien. Hoe dan ook komt de WebP lichter uit en overleeft de transparantie.

Is het veilig om hier PNG naar WebP om te zetten?

Het hangt ervan af of je één foto of meerdere omzet. Een PNG alleen wordt direct in de browser opnieuw opgebouwd, dus dat bestand gaat niet weg, en je kunt het controleren door DevTools te openen en midden in de omzetting het Netwerk-paneel te bekijken, waar geen uitgaand beeldverzoek verschijnt. Zet er meerdere in één keer om en ze gaan omhoog naar onze server om samen behandeld te worden, daarna wordt die download binnen ongeveer 2 uur opgeruimd, en je kunt hem zelf weghalen zodra je opslaat. Hoe dan ook blijft er niets van je afbeelding buiten het samenstellen van je download.

Werkt WebP in alle browsers?

Het werkt, voor alle praktische doeleinden. Het native lezen kwam overal aan zodra Safari 14 in 2020 verscheen en zich voegde bij Chrome, Edge en Firefox, die samen bijna elke browser uitmaken die mensen echt draaien. De uitzonderingen zijn de werkelijk oude en sommige ingebedde webviews, en voor een publiek dat die kan omvatten blijft PNG de voorzichtige keuze. Iedereen op een browser van de afgelopen vijf jaar krijgt WebP zonder moeite. Als je een specifiek geval wilt bevestigen, legt de WebP-vermelding op caniuse.com de ondersteuning uit.

De details

Notities van het team over vakmanschap, formaten en de kleine beslissingen achter een goede ronde uitsnede.

Hoe WebP kleinere groottes haalt dan PNG
WebP draait in twee aparte modi. Zijn lossless modus paart ruimtelijke en kleurvoorspelling met een entropiestap die PNG's DEFLATE overtreft, en landt volgens Googles gepubliceerde cijfers op ruwweg 26 procent betere compressie op typische afbeeldingen. Zijn lossy modus leent een blokgebaseerde transformatie uit videowerk, gebouwd om detail te laten vallen dat het oog amper opmerkt terwijl het behoudt wat het wel ziet. Draagt een afbeelding alfa, dan comprimeert WebP dat alfa lossless op zijn eigen spoor terwijl het de RGB-gegevens lossy behandelt, en zo kan lossy WebP met transparantie bij overeenkomende visuele kwaliteit dicht bij een derde van de grootte van een PNG binnenkomen. PNG's DEFLATE kent alleen lossless en kan de perceptuele koopje die de lossy spoor sluit nooit aanboren. Die structurele splitsing is de hele reden voor de groottekloof.
Het alfakanaal in detail
Allebei houden PNG en WebP 8-bits alfa vast, zodat iedere pixel een dekking mag noemen van 0 voor volkomen helder tot 255 voor volkomen vol. Bouwt de bildmotor van het platform een PNG om naar WebP, dan haalt hij van elke pixel de RGBA op en schuift het alfa meteen de WebP-codeerstap in, die het onder lossless compressie bewaart, hoe het RGB verderop ook behandeld wordt. Zo komt een volkomen heldere pixel op 0, een half-heldere ergens tussen 1 en 254 en een volle op 255 telkens op precies dezelfde stand in de WebP terecht. Bij een logo met een zachte slagschaduw of anti-aliased letters op een heldere ondergrond rijdt die fijne randzachtheid er ongeschonden doorheen. JPG redt dit niet: zijn container kent geen alfaveld en perst de afbeelding eerst op een achtergrondkleur voordat er ook maar iets gecodeerd wordt.
Core Web Vitals en de keuze van het afbeeldingsformaat
Largest Contentful Paint klokt hoe lang het grootste zichtbare element op een pagina erover doet om in het kijkvenster op te duiken, en op de meeste contentpagina's is dat element de hero-afbeelding. Google vouwt LCP in zijn Core Web Vitals-rangschikkingssignaal, en PNG is een herhaaldelijke overtreder bij LCP door puur gewicht, waar een fotografische 4K-PNG meerdere megabytes kan draaien terwijl dezelfde afbeelding als WebP dicht bij lossless een fractie daarvan is. PageSpeed Insights noemt dit direct onder zijn punt voor nieuwe-generatieformaten en wijst PNG aan als het formaat om in te ruilen. De PNG's die op het kritieke renderpad van een pagina zitten naar WebP verwandelen is een van de meest renderende enkele zetten voor gemeten snelheid. De tijdlijn houdt het veilig, met WebP in Chrome vanaf 2011, Firefox vanaf 2019, Safari vanaf 2020 en Edge sinds zijn Chromium-herbouw.
Lossy uitvoer en de instelling dicht bij lossless
WebP legt een kwaliteitsknop bloot van 0 tot 100, waar hogere getallen meer detail houden en meer bytes kosten. Araluma zet die knop vast op een punt dicht bij lossless, gekozen om getrouwheid en grootte in balans te brengen over de gebruikelijke webcategorieën foto's, interface-grafiek en pictogrammen. Op dat punt leest de uitvoer als niet te onderscheiden van het bron-PNG op normale schermafstanden. Strikt glijdt een beetje bitprecisie weg tegenover een echte lossless codering, wat betekent dat een controle byte voor byte tussen de gedecodeerde WebP en het originele PNG kleine numerieke kloven aan het licht zou brengen, alle onder de drempel van menselijk zicht op fotografisch materiaal. Voor medische scans, satellietbeelden of archiefbewaring waar lossless een harde regel is, is de juiste zet om het PNG te houden en de WebP puur als leveringsexport te behandelen in plaats van als werkkopie.
Gedrag van metadata
Een PNG in een WebP verwandelen veegt de EXIF-, IPTC- en XMP-velden van de uitvoer, wat elk van de drie grote browser-engines doet. Bij de kleurprofielen gaan de engines uiteenlopende wegen. Chrome en Safari houden de sRGB-tag op de WebP, terwijl Firefox de hele zaak wist, het ICC-profiel en al. Dus de WebP leest overal als sRGB-veilig, maar een breed-gamuttag, Display-P3, Adobe RGB, ProPhoto RGB, dat op het bron-PNG zit, houdt niet stand door Firefox. Die kloof bijt in kleurkritiek professioneel werk, dus wanneer echte kleurgetrouwheid moet meereizen, kies een omzetter die ICC-gegevens bewust wegschrijft, of druk het profieltag er nadien weer op met een metadata-editor die voor de klus gebouwd is.
Wanneer PNG houden en wanneer WebP volstaat
De afweging gaat snel. Is de afbeelding uiteindelijk bestemd voor een webpagina of webapp en de kijker een willekeurige browser vanaf 2020, dan is WebP de juiste export. Moet het openen in een ontwerp-app als Figma, Sketch of Affinity Designer, controleer dan eerst de WebP-ondersteuning in jouw exacte versie, want die varieert. Gaat het de druk in, leun dan op PNG of TIFF, aangezien de meeste druk-RIP's WebP negeren. Gaat het per e-mail uit, dan is PNG de veiligere gok, gezien hoe grillig e-mailclients met moderne formaten omgaan. En is het een werkbestand dat je keer op keer bewerkt en opnieuw opslaat, houd dan het PNG als master. WebP dicht bij lossless geeft een prima leveringsformaat af, terwijl PNG het betere blijft om te archiveren en te bewerken. De schone werkstroom houdt het PNG als origineel en stuurt WebP naar het web.