PNG a WebP, fitxers més petits que mantenen la transparència

Canvia un PNG feixuc per un WebP esvelt que manté la seva transparència i carrega més de pressa.

o deixa-hi anar la imatge

Com convertir PNG a WebP

Com convertir PNG a WebP

Estira un PNG cap a l'àrea on es deixa anar o fes clic per buscar-ne un. La feina arrenca a l'instant que el fitxer aterra, sense cap botó Converteix enlloc, i per a una imatge de cada dia s'enllesteix en força menys d'un segon. Després un botó Baixa desa el WebP sota el nom de l'origen amb una terminació nova. Converteix-ne un i va al teu navegador, dona'n diversos i pugen junts al nostre servidor. El mateix camí serveix telèfons i ordinadors, sense que calgui instal·lar res. Per tractar-ne un altre, simplement deixa anar el PNG següent. Dóna-li un PNG animat i només sobreviu el primer fotograma, ja que el WebP que fa aquí és una sola imatge fixa i no pas una seqüència en moviment.

Els píxels transparents passen intactes al WebP

Els píxels transparents passen intactes al WebP

Dins del WebP hi viu un canal alfa de 8 bits, així que cada píxel transparent del teu PNG aterra igual de transparent al WebP. Res no es torna blanc, cap halo no envolta una retallada, i després no cal cap neteja en un editor. Aquesta mateixa és la raó per afavorir el WebP davant del JPG quan el teu PNG duu transparència, ja que el JPG no posseeix alfa i ha de bescanviar els píxels nets per un color sòlid. Logotips, icones, retallades de producte, maquetes d'interfície, captures de pantalla amb cantonades arrodonides, tot el que descansa sobre un fons que es veu a través, tot plegat travessa a l'altra banda intacte. No hi ha cap interruptor per activar per a això, simplement passa, perquè dur alfa forma part del que el WebP es va construir per fer.

Motius per passar de PNG a WebP

Motius per passar de PNG a WebP

Principalment, obtens un fitxer molt més lleuger mentre la transparència i l'aspecte aguanten. Les xifres oficials de WebP de Google mostren el WebP sense pèrdua aproximadament un 26 per cent per sota d'un PNG igual, i el WebP amb pèrdua amb alfa a prop d'un terç de la mida d'un de comparable. Les imatges més lleugeres arriben més aviat, cosa que alimenta de dret el Largest Contentful Paint, un dels Core Web Vitals de Google i un factor de posicionament conegut. PageSpeed Insights fins i tot crida el PNG sota el seu suggeriment de formats de nova generació, i moure's cap a WebP neteja aquell senyal. El suport tampoc no és cap obstacle, ja que Chrome, Firefox, Safari i Edge tots llegeixen WebP de manera nativa.

Configuració de qualitat i el compromís amb pèrdua

Configuració de qualitat i el compromís amb pèrdua

Araluma escriu el WebP en una configuració propera a la sense pèrdua, afinada tant per a fotografies com per a gràfics, així que a mides de visualització ordinàries es veu igual que el PNG d'on va venir. Mantingut en aquest nivell, el WebP és tècnicament amb pèrdua, cosa que vol dir que una mica de precisió a escala de bit es lliura a canvi d'una còpia impecable sense pèrdua. Per a gairebé tota la feina a la web, logotips, icones, elements d'interfície, fotografies, aquell buit és invisible. Quan la tasca és exacta al píxel, com escàners mèdics o originals d'arxiu, conserva el PNG i deixa que el WebP sigui l'exportació. En fotografies normalment pots esperar una caiguda de mida del 50 al 70 per cent, sobreposada al avantatge estructural que el WebP ja manté davant del PNG.

On es converteix de debò el PNG

On es converteix de debò el PNG

Això es divideix segons quantes dones. Converteix un PNG sol i tota la tasca passa a la pestanya, al motor d'imatge del navegador mateix, al teu dispositiu, sense que res pugi i sense que res s'anoti sobre el fitxer. Comprova-ho tu mateix, obre DevTools, deixa el panell de Xarxa obert mentre converteixes aquesta foto única i compta zero sol·licituds sortints que la portin. Converteix-ne un grapat juntes i pugen al nostre servidor, que les recorre totes i retorna una sola baixada. Aquella baixada es neteja del nostre servidor en unes 2 hores, i la pots esborrar en l'instant que deses. Així una imatge no deixa mai el navegador, i un lot es queda al nostre servidor només el temps de muntar el que t'emportes.

Quan el PNG original encara és l'opció encertada

Quan el PNG original encara és l'opció encertada

El WebP arriba lluny, però no a tot arreu. Un grapat de programes de disseny, línies d'impressió i sistemes interns de contingut encara reclamen PNG. Hi ha sistemes operatius que arrosseguen un PNG sense pensar-s'ho però demanen un connector per al WebP. Per a un fitxer de feina que obriràs i retocaràs un cop rere l'altre en una aplicació d'escriptori, mantenir el PNG sense pèrdua com a mestre t'estalvia tota l'acumulació de rondes seguides de descodificar i refer. Reserva el WebP com a exportació per a la web i conserva el PNG com a font. I el dia que hagis d'anar en sentit invers i tornar un WebP a PNG, l'eina webp-to-png s'ocupa d'aquell trajecte.

Com funciona

  1. Lliura un PNG

    Llisca el PNG a la pàgina, o cerca'l al selector. Les parts transparents vénen amb ell. Converteix-ne una i es queda a la teva màquina, deixa'n caure diverses i pugen al nostre servidor per tractar-les juntes.

  2. Recolza't enrere

    No fas res més. Una imatge típica es torna WebP més o menys tan ràpid com s'aixeca el teu dit, sense pas de Converteix i sense cap roda d'espera pel camí.

  3. Mira com s'encongeix

    El resultat informa de com de gran ha sortit. Els punts nets es mantenen nets, i el WebP hauria de pesar visiblement menys que el PNG amb què vas començar.

  4. Guarda el teu WebP

    Un toc a Baixa l'escriu cap a fora, nom vell, terminació .webp fresca. En tens més a la cua? Llança cadascun sobre la pàgina i passen un per un.

Preguntes freqüents

Es conservarà la transparència en convertir PNG a WebP?

Es conserva. Com que el WebP manté un canal alfa complet, cada pegat net del teu PNG es manté net un cop és WebP. Aquest sol fet és per què el WebP guanya el JPG com a destí sempre que comences amb un PNG transparent, ja que el JPG no posseeix alfa i ha de pintar els punts nets d'un color sòlid mentre que el WebP deixa la retallada exactament com la va trobar. Logotips, icones, fotos de producte, peces d'interfície que descansen sobre fons que es veuen a través, tots ells travessen sencers, sense demanar-te res més.

Per què convertir PNG a WebP?

Per a un fitxer més esvelt que manté tant la seva transparència com el seu aspecte. Segons les xifres de WebP de Google, la varietat sense pèrdua va aproximadament un 26 per cent per sota d'un PNG igual, i la varietat amb pèrdua amb alfa aterra a prop d'un terç d'un. Una imatge més esvelta arriba abans, cosa que ajuda el Largest Contentful Paint, una mesura de Core Web Vitals que Google sospesa en el posicionament. PageSpeed Insights fins i tot assenyala el PNG com una oportunitat de format de nova generació dins de la seva auditoria d'imatges. A sobre, tots els grans navegadors, de Chrome i Firefox a Safari i Edge, llegeixen WebP sense ajuda.

La conversió de PNG a WebP perd qualitat?

En la configuració propera a la sense pèrdua que Araluma fa servir, les fotografies i els gràfics es veuen igual que el PNG d'origen a mides de visualització ordinàries. El WebP mantingut aquí és tècnicament amb pèrdua, així que una engruna de precisió a escala de bit va cap a un fitxer més petit. Per a l'ús quotidià a la web, logotips, icones, fotografies, aquell buit és invisible. Per a feina exacta al píxel o d'arxiu, conserva el PNG i tracta el WebP com la còpia de lliurament. La conversió deixa el teu PNG intacte, assegut al teu dispositiu tal com estava.

Quant més petit és el WebP que el PNG?

Les xifres oficials de WebP de Google situen el WebP sense pèrdua al voltant d'un 26 per cent per sota d'un PNG igual, i el WebP amb pèrdua amb alfa a aproximadament un terç de la mida d'un de comparable. La proporció exacta cavalca el contingut, amb gràfics que tenen àmplies zones netes i blocs de color sòlid guanyant-hi més, mentre que les fotografies atrafegades i detallades veuen una caiguda més petita però encara útil. Sigui com sigui, el WebP surt més lleuger i la transparència sobreviu.

És segur convertir PNG a WebP aquí?

Depèn de si converteixes una foto o diverses. Un PNG sol es reconstrueix directament al navegador, així que aquell fitxer no s'envia, i ho pots comprovar obrint DevTools i mirant a mitja conversió el panell de Xarxa, on no apareix cap sol·licitud d'imatge sortint. Converteix-ne diverses alhora i pugen al nostre servidor per tractar-les juntes, després aquella baixada es neteja en unes 2 hores, i la pots treure tu mateix tan bon punt deses. Sigui com sigui, no queda res de la teva imatge més enllà de muntar la teva baixada.

El WebP funciona a tots els navegadors?

Funciona, a tots els efectes pràctics. La lectura nativa va arribar arreu tan bon punt va sortir Safari 14 el 2020, unint-se a Chrome, Edge i Firefox, que junts compten gairebé tots els navegadors que la gent fa córrer de debò. Les excepcions són els sincerament antics i alguns webviews incrustats, i per a un públic que pugui incloure'ls, el PNG segueix sent l'opció prudent. Qualsevol en un navegador dels darrers cinc anys obté WebP sense problema. Si vols confirmar un cas concret, l'entrada de WebP a caniuse.com desplega el suport.

Els detalls

Notes de l'equip sobre artesania, formats i les petites decisions darrere d'un bon retall rodó.

Com el WebP aconsegueix mides més petites que el PNG
El WebP corre en dos modes separats. El seu mode sense pèrdua aparella la predicció espacial i de color amb una etapa d'entropia que supera el DEFLATE del PNG, aterrant aproximadament un 26 per cent de millor compressió en imatges típiques segons les xifres publicades de Google. El seu mode amb pèrdua manlleva una transformació basada en blocs de la feina de vídeo, construïda per deixar caure detall que l'ull amb prou feines nota mentre manté el que sí que nota. Quan una imatge duu alfa, el WebP comprimeix aquella alfa sense pèrdua per la seva pròpia via mentre tracta les dades RGB amb pèrdua, i així el WebP amb pèrdua amb transparència pot sortir a prop d'un terç de la mida d'un PNG a igualtat de qualitat visual. El DEFLATE del PNG només sap sense pèrdua i mai no pot tocar el tracte perceptiu que fa la via amb pèrdua. Aquell esquinç estructural és tota la raó del desnivell de mida.
El canal alfa en detall
Tots dos formats, el PNG i el WebP, porten alfa de 8 bits, de manera que qualsevol píxel pot fixar una opacitat des de 0, del tot net, fins a 255, del tot massís. Quan el motor d'imatge de la plataforma refà un PNG en WebP, repassa els valors RGBA píxel a píxel i encamina l'alfa directament cap a l'etapa de compressió del WebP, on queda sota compressió sense pèrdua sigui quin sigui el tracte del RGB. D'aquesta manera un píxel del tot net a 0, un de mig net en qualsevol punt entre 1 i 254, i un de massís a 255 troben cadascun el mateix estat dins del WebP. En una emblema amb ombra tènue o text de vores polides sobre un fons net, aquella finor de la vora arriba sencera a l'altra banda. El JPG en queda incapaç, perquè el seu contenidor no allotja cap camp alfa i ha d'encaixar la imatge sobre un to de fons abans de codificar res.
Core Web Vitals i l'elecció del format d'imatge
El Largest Contentful Paint pren el temps que tarda l'element visible més gran d'una pàgina a sortir a la finestra, i en la majoria de pàgines de contingut aquell element és la imatge principal. Google encabeix aquesta mètrica dins el seu senyal de posicionament Core Web Vitals. El PNG hi ensopega sovint pel seu pes brut, ja que un PNG fotogràfic en 4K pot arribar a uns quants megabytes mentre que el mateix fotograma servit com a WebP proper a la sense pèrdua baixa a una fracció d'allò. PageSpeed Insights ho assenyala de ple dins el seu suggeriment de formats de nova generació i apunta el PNG com el candidat a substituir. Passar a WebP els PNG que cauen al camí crític de pintat figura entre les jugades soltes més rendibles per a la velocitat mesurada, i la llarga història de suport ho deixa tranquil.
Sortida amb pèrdua i la configuració propera a la sense pèrdua
El WebP exposa un botó de qualitat de 0 a 100, on els números més alts mantenen més detall i costen més bytes. Araluma clava aquell botó en un punt proper a la sense pèrdua, escollit per equilibrar la fidelitat contra la mida en les categories habituals de web de fotografies, gràfics d'interfície i icones. En aquest punt la sortida es llegeix com a indistingible del PNG d'origen a distàncies normals de pantalla. Estrictament, una mica de precisió a escala de bit rellisca contra una codificació realment sense pèrdua, així que una comprovació byte a byte entre el WebP descodificat i el PNG original trauria a la superfície minúscules diferències numèriques, totes assegudes per sota del llindar de la visió humana en material fotogràfic. Per a escàners mèdics, imatges per satèl·lit o preservació d'arxiu on la sense pèrdua és una regla estricta, la jugada correcta és retenir el PNG i tractar el WebP purament com a exportació de lliurament en lloc de còpia de treball.
Comportament de les metadades
Girar un PNG en WebP escombra els camps EXIF, IPTC i XMP de la sortida, cosa que fa cadascun dels tres grans motors de navegador. Els perfils de color són on els motors separen camins. Chrome i Safari mantenen l'etiqueta sRGB cavalcant sobre el WebP, mentre que Firefox neteja tot plegat, el perfil ICC i la resta. Així el WebP es llegeix com a segur de sRGB arreu, i tot i així una etiqueta de gamma ampla, Display-P3, Adobe RGB, ProPhoto RGB, asseguda sobre el PNG d'origen, no aguantarà a través de Firefox. Aquell buit mossega en feina sensible al color, així que quan la fidelitat de color de debò ha de cavalcar al costat, tria un convertidor que escrigui dades ICC a posta, o prem l'etiqueta del perfil de nou a sobre després fent servir un editor de metadades fet per a la tasca.
Quan retenir PNG i quan el WebP ja n'hi ha prou
La tria, a la pràctica, és lleugera. Si la parada final és una pàgina o una aplicació web i qui l'obre és un navegador del 2020 ençà, el WebP és l'exportació justa. Si la imatge s'ha d'obrir dins de Figma, Sketch o Affinity Designer, assegura't primer que la teva versió concreta reconeix el WebP, perquè canvia. Si tira cap a la impressió, decanta't per PNG o TIFF, ja que la majoria de processadors d'impressió passen de llarg del WebP. Si surt per correu, el PNG és l'aposta més segura, atès que els clients de correu ensopeguen amb els formats nous. I si és un fitxer de feina que obriràs i tornaràs a desar sovint, reté el PNG com a original. En resum, el WebP encaixa amb el lliurament i el PNG amb l'arxiu i l'edició, de manera que el flux net deixa el PNG original i envia WebP cap a la web.