PNG na WebP-omskakelaar

Maak die PNG-skermkiekies, logo's en produkuitsnysels op u webwerf kleiner as WebP-lêers wat hul deursigtige rande behou en in 'n fraksie van die tyd laai. Kies verliesend of verliesvry, skakel om en laai die resultate na u CMS op.

of los JPG, JPEG, JPE …-lêers hier ·

Maks. 95 MB per lêer· Tot 20 lêers· Uitgevee na 30 minute

Uitvoer

Skakel om na

Lêers word op ons bedieners verwerk en na 30 minute uitgevee.

Hoe om hierdie nutsding te gebruik

1
Sleep die PNG-lêers in
Sleep tot 20 PNG's na die oplaaigebied of kies hulle uit 'n vouer. Elke lêer kan tot 95 MB groot wees, wat selfs baie groot uitgevoerde modelle dek.
2
Kies verliesend of verliesvry
Die bladsy begin by Kwaliteit 80 in verlieslydende modus, 'n goeie balans vir foto's en illustrasies op die web. Merk Verliesloos onder Gevorderde instellings vir ikone, pikselkuns of UI-skermkiekies wat pikselpresies moet bly.
3
Skakel om en vervang
Druk Skakel om na WebP en laai die lêers een vir een af, of as 'n ZIP.

Antwoord

Is dit die moeite werd om PNG na WebP om te skakel?

Vir beelde op 'n webwerf, amper altyd. Dieselfde prent, met sy deursigtigheid, word gewoonlik baie kleiner, en elke huidige blaaier vertoon dit. Hou PNG vir lêers wat jy nog wysig of stuur aan mense wat hulle in rekenaarsagteware oopmaak.

Hoekom webontwikkelaars PNG met WebP vervang

PNG is ontwerp om verliesloos te wees: dit is in 1996 deur die W3C gestandaardiseer as 'n patentvrye plaasvervanger vir GIF en gooi nooit pikseldata weg nie. Dit is perfek vir 'n meesterlêer en vermorsend op 'n webbladsy, waar 'n 1600 px-heldillustrasie wat as PNG gestoor is, meer kan weeg as al die skrifte op die bladsy saam.

Google het WebP in 2010 bekendgestel om daardie gaping te sluit. Dit bied twee enjins in een houer: 'n verliesloze modus wat volgens Google se eie gepubliseerde vergelyking ongeveer 26% kleiner as PNG is, en 'n verlieslyende modus gebaseer op die VP8-videokodek wat nog kleiner is. Albei modusse dra 'n volle alfakanaal, die kenmerk wat logo's en uitgeknipte produkfoto's op gekleurde agtergronde bruikbaar hou.

Bladsyspoedgereedskap soos PageSpeed Insights wys al lank na te groot PNG- en JPEG-lêers as 'n maklike besparing, en 'n omgeskakelde beeldstel is dikwels die vinnigste verbetering wat jy aan Largest Contentful Paint kan maak. As die beelde ook nuwe afmetings nodig het, stuur hulle eers deur die beeldgrootteverander-hulpmiddel, en skakel dan om.

Hoeveel kleiner 'n WebP is in vergelyking met PNG

PNG-oorspronklike

1,2 MB

1600 × 900 · 24-bis met alfa, produkuitknipsel

gewoonlik 80–85% kleiner

WebP, kwaliteit 80

190 KB

1600 × 900 · verlieslyend met alfakanaal behou

PNG

Portable Network Graphics

PNG is 'n verliesvrye rasterformaat wat in 1996 deur die PNG Development Group gepubliseer en later deur die W3C en ISO gestandaardiseer is. Dit behou elke pixel presies, ondersteun volle alfa-deursigtigheid en hanteer teks, skerp rande en egte kleure sonder artefakte. Daardie akkuraatheid maak dit ideaal vir skermkiekies, logo's, ikone en koppelvlakgrafika. Die ruil is grootte: foto's wat as PNG gestoor is, is dikwels etlike kere groter as dieselfde foto as JPEG of WebP. Alle blaaiers, bedryfstelsels en redigeerders maak PNG-lêers oop.

Kompressie: Verliesloos
Deursigtigheid: Ja
Animasie: Nee
Bekendgestel: 1996 · PNG Development Group

PNG-omskakelaar

WEBP

WebP-beeld

WebP is 'n beeldformaat wat Google in 2010 vrygestel het om webbladsye vinniger te laat laai. Dit ondersteun beide verlieslike en verlieslose kompressie, alfadeursigtigheid en animasie in een formaat. Verlieslike WebP-lêers is gewoonlik 25–35% kleiner as JPEG's van soortgelyke visuele gehalte, en verlieslose WebP is gewoonlik kleiner as PNG. Elke huidige blaaier ondersteun dit, maar sommige ouer rekenaarsagteware, drukdienste en oplaaivorms weier dit steeds. Windows, macOS en die meeste moderne beeldredigeerders kan WebP-lêers oopmaak.

Kompressie: Met verlies of verliesloos
Deursigtigheid: Ja
Animasie: Ja
Bekendgestel: 2010 · Google

WEBP-omskakelaar

Webwerfeienaars skakel PNG na WebP om om bladsygewig te verminder terwyl deursigtigheid behoue bly; om van WebP terug na PNG te gaan, gaan daaroor om 'n lêer te wysig of oop te maak in sagteware wat nie WebP lees nie.

Die syfers hierbo is 'n tipiese resultaat vir 'n fotografiese uitknipsel, nie 'n belofte nie. Plat grafika krimp minder in verlieslyende modus en soms meer in verliesloze modus. Skermkiekies vol teks is die enigste geval waar verlieslyende WebP letterrande kan vervaag; merk Verliesloos vir daardie en jy spaar steeds spasie sonder enige verandering aan die piksels.

Afmetings, kleur en deursigtigheid word onveranderd oorgedra, en Verwyder metadata (by verstek aan) laat wysigingsgeskiedenis val wat 'n blaaier nooit nodig het nie.

Voordat u die WebP-lêers na u webwerf oplaai

Hou die oorspronklike PNG's in 'n aparte vouer; WebP is 'n afleweringskopie, nie 'n wysigingsmeester nie.
Kontroleer dat jou CMS .webp-oplaaie aanvaar (WordPress doen dit vanaf weergawe 5.8).
Kyk na een deursigtige beeld op sowel 'n wit as 'n donker agtergrond om te bevestig dat die rande skoon is.
Werk beeldverwysings in jou HTML of CSS op van .png na .webp, of laat jou CMS die kleinkiekies hergenereer.
Vergelyk bladsygewig voor en na in jou blaaier se netwerkpaneel sodat jy weet wat jy gespaar het.

Vrae oor PNG na WebP

Behou WebP die deursigtige agtergrond van my PNG?

Ja. WebP stoor 'n alfakanaal in sowel sy verlieslyende as verliesloze modus, so uitgeknipte produkfoto's en logo's bly deursigtig. In verlieslyende modus word die randpiksels effens saamgepers; as jy 'n flou halo om fyn hare of teks sien, laat loop die lêer weer met Verliesloos gemerk. Het jy later die omgekeerde nodig? WebP na PNG herstel 'n wysigbare PNG.

Moet ek verliesende of verliesvrye WebP vir 'n PNG kies?

Verliesloos wanneer die PNG 'n plat UI, 'n diagram, 'n logo of pikselkuns is, omdat elke piksel presies bly soos dit was en die lêer gewoonlik steeds kleiner word. Verlieslyend teen kwaliteit 75 tot 85 wanneer die PNG eintlik 'n foto of 'n sagte illustrasie is, want dit is waar die groot besparings is.

Watter blaaiers kan WebP-beelde vertoon?

Chrome, Edge, Firefox en Opera wys al jare lank WebP, en Safari het in 2020 met weergawe 14 bygekom (op macOS Big Sur of nuuier en iOS 14). In die praktyk vertoon elke blaaier wat tans in gebruik is dit, so 'n gewone img-etiket wat na 'n .webp-lêer wys, is genoeg vir die meeste werwe.

Aanvaar WordPress WebP-oplaaie?

WordPress 5.8, wat in Julie 2021 vrygestel is, het WebP by die toegelate oplaaityppes van die media-biblioteek gevoeg. Ouer installasies weier die lêer tensy 'n inprop die MIME-tipe byvoeg, so kontroleer jou weergawe voordat jy 'n hele vouer omskakel.

Hoekom is my WebP groter as die oorspronklike PNG?

Dit gebeur met klein PNG's wat 'n geïndekseerde palet van 'n paar kleure gebruik, soos 'n ikoon met 8 kleure, omdat PNG daar reeds baie doeltreffend is. Probeer Verliesloos vir daardie lêers, en as die resultaat steeds groter is, hou die PNG; die besparings kom van groter, kleurryker beelde.

Kan ek 'n hele vouer PNG's gelyktydig na WebP omskakel?

Tot 20 lêers gaan in een keer deur, elk tot 95 MB, en hulle kom saam in 'n ZIP terug. Vir 'n groter vouer, herhaal in groepe van 20; daar is geen daaglikse limiet nie en die oplaaie word na 30 minute outomaties uitgevee.