LeanImg

PNG vs JPG: care ar trebui să salvezi de fapt?

Fără pierderi versus cu pierderi, canalul alfa pe care JPG nu-l are și subsamplingul cromatic care estompează textul, cu dimensiuni de fișiere măsurate din ambele formate.

PNG și JPG diferă în ceea ce privește o întrebare: își amintește fișierul fiecare pixel exact? PNG o face. JPG elimină detalii pe care vederea umană le percepe mai greu, și devine mult mai mic în schimb. Această divizare decide aproape fiecare caz pe care îl vei întâlni, și se aplică într-un mod pentru o fotografie de plajă și în alt mod pentru un screenshot al unui tabel.

Fiecare număr de mai jos provine din instrumentele LeanImg care rulează într-o filă de browser, pe două fișiere de test: texture.jpg la 3840x2160 și 538.6 KB, plus alpha.png la 900x606 și 942.4 KB cu un fundal transparent. Am construit aceste instrumente fără rute API și fără acțiuni pe server, astfel încât fișierul nu părăsește niciodată mașina ta. Cele mai multe site-uri din această categorie încarcă imaginea ta pe un server și apoi promit să o ștergă o oră mai târziu. Nu există nimic de șters aici, motiv pentru care pagina noastră de confidențialitate este scurtă.

Pe care ar trebui să o aleg, PNG sau JPG?

Fotografiile merg la JPG. Screenshots, logo-uri, grafice, artă liniară și orice are nevoie de transparență merg la PNG. Ghidul de formate MDN trasează aceeași linie. În modul inteligent, compresorul nostru a redus texture.jpg de la 538.6 KB la 286.1 KB folosind MozJPEG la calitatea 80, o reducere de 47%. Trage cursorul la 60 și aceeași fotografie ajunge la 212.4 KB. La 30 este 131 KB, o scădere de 76%.

Această divizare provine din modul în care fiecare format comprimă. Designul JPG-ului presupune că pixelii vecini se amestecă între ei, ceea ce se potrivește cu degradele și granulația filmului. Un screenshot încalcă această presupunere la fiecare margine de text. PNG prezice fiecare pixel din vecinii săi și apoi deflatează diferența, astfel încât își face cel mai bun lucru pe segmentele plate de culoare identică din care este formată o interfață utilizator.

Ce face de fapt compresia fără pierderi asupra dimensiunii fișierului?

Fără pierderi înseamnă că pixelii decodați revin bit cu bit identici, ceea ce specificația PNG cere. Nu înseamnă că fișierul nu poate să se micșoreze. Modul PNG al compresorului nostru rulează oxipng la nivelul 3, și a redus alpha.png de la 942.4 KB la 383.9 KB. Aceasta este o reducere de 59% cu fiecare valoare pixel păstrată.

Opțiunea PNG "dimensiune fișier mai mică" este un animal diferit. Aceasta rulează imagequant, care reduce imaginea la o paletă de culori înainte ca PNG-ul să fie scris, iar alpha.png a ieșit la 98.3 KB. Aceasta este o reducere de 90%. Este un rezultat cu pierderi, indiferent de ceea ce implică extensia .png, așa că păstrează originalul dacă acea imagine este o copie master.

Cardul de rezultate al compresorului LeanImg arătând alpha.png redus de la 942.4 KB la 98.3 KB folosind modul paletă
alpha.png la 900x606, cuantizat la o paletă: 942.4 KB redus la 98.3 KB, o reducere de 90%.

De ce estompează JPG textul colorat și liniile subțiri?

Pentru că JPG stochează culoarea la o rezoluție mai mică decât luminozitatea. Formatul păstrează luma separată de cele două canale cromatice, așa cum este specificat în ITU-T T.81, iar encoderii de obicei reduc cromatica astfel încât un eșantion de culoare să acopere un bloc de 2x2 pixeli. Pe o fotografie de 3840x2160 precum texture.jpg nu o vei observa. Pe o linie roșie de un pixel pe fundal alb, culoarea acelei linii este mediată cu trei vecini albi înainte ca orice setare de calitate să fie aplicată, iar nicio poziție a cursorului nu o readuce.

Screenshots sunt locul unde mușcă. Trecerea la WebP nu o ocolește, pentru că modul cu pierderi WebP este blocat la cromatica 4:2:0 și aplică aceeași mediere. PNG păstrează exact valoarea RGB a fiecărui pixel, motiv pentru care capturile UI, codurile QR și suprapunerile de text aparțin acolo. Dacă PNG-ul este încă prea greu, cuantizează-l și păstrează formatul.

Ce se întâmplă cu transparența când salvez ca JPG?

Se umple. JPEG nu transportă niciun canal alfa în niciun mod, așa că ceva trebuie să decidă ce se află în spatele pixelilor tăi transparenți. Converterul nostru PNG în JPG le compune pe un fundal alb înainte de codare, iar compresorul face același lucru ori de câte ori formatul țintă nu are alfa. Fără acel pas, acestea ar ieși negre, deoarece un pixel complet transparent transportă de obicei RGB 0,0,0 dedesubt.

Nu poți inversa acea călătorie. Întoarcerea prin JPG în PNG îți oferă un PNG cu un dreptunghi alb acolo unde era transparența, plus orice artefacte JPG pe care prima trecere le-a introdus. Compresia elimină de asemenea fiecare bucată de metadate: EXIF, GPS, profil ICC și miniatură încorporată dispar, deși orientarea supraviețuiește. Păstrează PNG-ul master; vei avea nevoie de el. Dacă tai un subiect dintr-o fotografie, instrumentul nostru de eliminare a fundalului scrie întotdeauna PNG cu alfa din acest motiv, ceea ce este de asemenea de ce un decupaj revine mai greu decât JPG-ul pe care l-ai introdus, iar generatorul de iconi își setează culoarea de fundal la #ffffff, astfel încât un logo transparent să ajungă pe un pătrat alb până când schimbi acel câmp.

De ce este PNG-ul meu atât de mult mai mare decât JPG-ul?

Zgomotul fotografic nu oferă predictorului PNG nimic cu ce să lucreze. Fiecare rând este ghicit din rândul de deasupra, iar diferența rămasă este deflatată, ceea ce este excelent pe un buton plat și aproape inutil pe granulație. Uită-te la cele două fișiere de test. alpha.png este 900x606 și a ajuns la 942.4 KB, în timp ce texture.jpg este 3840x2160, de peste cincisprezece ori numărul de pixeli, și a ajuns la 538.6 KB. Cuantizarea paletei este levierul care închide această diferență, și a redus alpha.png la 98.3 KB.

Ar trebui să salvez WebP sau AVIF și să sar peste întrebare?

Uneori, deși merită să măsori. Am rulat texture.jpg prin compresor la aceeași poziție a cursorului de 80 pentru toate cele trei formate, apoi din nou la 63.

Același sursă de două ori: texture.jpg, 3840x2160, 538.6 KB.
Format de ieșireCursor 80Cursor 63Timp de codare
JPEG (MozJPEG)286.1 KBnu a fost măsuratinstant
WebP290.3 KB200.6 KBinstant
AVIF312.7 KB186.9 KB10 până la 11 secunde

AVIF producând cel mai mare fișier la cursor 80 pare invers, iar cauza se află în codul nostru. Pentru o sursă JPEG, compresorul înmulțește cursorul tău cu calitatea pe care o citește din tabelele de cuantizare ale sursei, astfel încât o sursă estimată la 60 cu cursorul la 80 codifică de fapt la 48. WebP și AVIF iau 80 la valoarea nominală. La 63, care este valoarea implicită în modul inteligent pentru AVIF, ordonarea se inversează: AVIF este 186.9 KB și WebP este 200.6 KB față de acea sursă de 538.6 KB. AVIF a costat de asemenea 10 până la 11 secunde pe codare, în timp ce JPEG și WebP s-au terminat instantaneu, și merită să verifici suportul browserelor înainte de a te angaja. Am analizat acea comparație în detaliu în articolul despre dacă WebP bate cu adevărat JPG.

Ce ar trebui să fac cu fișierul din fața mea?

Deschide compresorul. Rulează fișierul tău de două ori. Dacă este o fotografie, ia mai întâi modul inteligent, apoi mută cursorul la 60 și compară cele două ieșiri la zoom maxim. Dacă are text sau transparență, rămâi pe PNG și încearcă ambele moduri PNG: fără pierderi a adus alpha.png la 383.9 KB și modul paletă l-a adus la 98.3 KB. Redimensionează mai întâi când imaginea se îndreaptă spre o coloană de 800px, deoarece redimensionatorul scrie PNG fără pierderi și re-codifică totul altceva la calitatea 90 în mod implicit. Și dacă destinația este un document, un JPG ajunge pe o pagină PDF re-codificat încă o dată la calitatea 92, ceea ce este o generație suplimentară de planificat.