Un ghid pentru începători pentru JPEG vs PNG (și cum să le folosiți pe ambele)

Ce ar fi web-ul cu imagini? În câteva decenii, internetul a trecut de la o imprimantă digitală cu matrice de puncte la un server dinamic de multimedia, inclusiv imagini, videoclipuri, animații și multe altele. Când vine vorba de fotografii digitale, totuși, poate exista confuzie între JPEG și PNG, în special când să le folosești pe fiecare.

Dacă ați privi o imagine JPEG alături de aceeași dar ca PNG, probabil că nu ați vedea nicio diferență. Acesta este ideal, deoarece ambele formate de imagine urmăresc să reproducă cea mai bună imagine posibilă pentru web. Cu toate acestea, există diferite cazuri de utilizare și tehnici de optimizare de care trebuie să fii atent.

În acest articol, vom compara JPEG cu PNG și vă vom spune când ar trebui să utilizați fiecare format de imagine. În primul rând, să vă prezentăm fiecare tip de fișier.

Diferența dintre JPEG și PNG

La suprafață (în sens literal), nu există nicio diferență între JPEG și PNG. Cu alte cuvinte, dacă punem două imagini și ți-am cere să alegi care dintre ele este JPEG și care este PNG, de cele mai multe ori nu ai putea spune. De exemplu, luați următoarea imagine:

Sunteți capabil să luați o decizie dacă acest fluture mormon stacojiu este o imagine JPEG sau PNG? Desigur, fără un cadru de referință nu poți face o comparație:

Există diferențe clare, deși nu va face o mare diferență în acest caz. În timp ce încercați să decideți (fără să aruncați o privire la instrumentele de dezvoltare ale browserului dvs.), există câteva detalii tehnice pe care le putem împărtăși:

• Formatul de fișier JPEG (Joint Photographic Experts Group) oferă compresie cu pierderi a imaginilor digitale. Aceasta înseamnă că calitatea imaginii este vizibilă dacă echilibrul dintre aceasta și dimensiunea fișierului variază prea mult. JPEG-urile sunt fișiere „plate”. Cu alte cuvinte, nu pot afișa transparență într-un fișier. În timp ce puteți regla nivelul de compresie, chiar și la cele mai bune setări, un JPEG va fi un fișier pe 8 biți, care afectează intervalul dinamic. În plus, un JPEG include adesea un profil de culoare, care le spune monitoarelor cum să afișeze culorile în interior.
• În schimb, imaginile Portable Network Graphics (PNG) sunt fișiere pregătite pentru web. Este un format mai dinamic decât JPEG, cu capacitatea de a scoate fișiere pe 24 de biți. Este, de asemenea, un format „fără pierderi”, ceea ce înseamnă că îl puteți duplica fără a degrada calitatea imaginii. Cu toate acestea, nu puteți ajusta compresia pentru fișierele PNG și nu există un profil de culoare. În ciuda acestui fapt, un PNG este perfect pentru web, pe baza specificațiilor sale tehnice.

Pare clar – PNG-urile se potrivesc web-ului, iar JPEG-urile nu. Ei bine, aceasta nu este povestea completă. Fiecare tip de fișier este excelent pentru anumite aplicații. În continuare, le vom discuta.

JPEG vs PNG: Când ar trebui să le folosiți pe fiecare

Web-ul obține cele mai bune rezultate atât din JPEG, cât și din PNG-uri. De fapt, se coadă de rândunică într-un mod frumos, fără prea multe încrucișări. Ca un sunet la îndemână, iată când ar trebui să utilizați JPEG vs PNG:

Dacă doriți să afișați o fotografie, utilizați JPEG. Pentru orice alt fișier – în special grafică digitală – utilizați PNG.

Cu toate acestea, acest sfat nu este valabil pentru fiecare situație (deși este relevant pentru aproape fiecare caz). De exemplu, dacă combinați desene digitale cu imagini stoc, atât JPEG, cât și PNG vor fi incorect din punct de vedere tehnic. Mai târziu, veți avea mai multe cunoștințe pentru a lua o decizie corectă, deși mai sunt câteva indicații de oferit.

De exemplu, dacă aveți în vedere copierea imaginilor, utilizați un alt format de fișier decât JPEG. Acest lucru se datorează faptului că formatele de compresie cu pierderi reconstruiesc doar o versiune aproximativă a fișierului. În schimb, PNG este o reproducere 1:1, deoarece oferă compresie fără pierderi.

De asemenea, dacă doriți să redimensionați imaginea după ce ați salvat-o, utilizați JPEG, deoarece se ocupă bine de scalare. PNG-urile folosesc o structură de codificare diferită, care se degradează odată ce modificați dimensiunile (sau alte atribute tehnice).

Alte formate de imagine despre care ar trebui să știți

Desigur, JPEG vs PNG nu este singura comparație de format de fișier imagine de luat în considerare. Există o mulțime de alte tipuri de fișiere care concurează pentru atenție și au alte cazuri de utilizare:

• Format de interfață grafică (GIF). Dacă postați un meme sau un videoclip cu reacție pe Twitter care se anime, este un GIF. De fapt, PNG a căutat să înlocuiască fișierele GIF în specificațiile sale originale și ambele oferă straturi de transparență.
• Format de fișier imagine etichetat (TIFF). Acest format de fișier bazat pe raster este excelent pentru imprimare datorită suportului său pentru spațiile de culoare CMYK.
• Format de imagine brută (RAW). Veți folosi acest lucru numai dacă sunteți fotograf și este exclusiv pentru camera pe care o utilizați. Deși puteți vizualiza fișiere RAW pe computer, aveți nevoie de un software dedicat pentru a le vizualiza. Dimensiunile fișierelor sunt astronomice, deoarece datele sunt complete. De fapt, formatele RAW nu sunt imagini, ci date care, atunci când sunt codificate, reprezintă imaginea.
• Fișier imagine de înaltă eficiență (HEIF). Acesta este formatul de fișier principal al dispozitivelor iOS. Oferă compresie și dimensiuni de fișiere mai bune decât JPEG și poate gestiona o mulțime de formate multimedia diferite.

În timp ce fiecare dintre aceste fișiere imagine va fi utilizată pe web (cu excepția fișierelor RAW în ceea ce privește afișarea), JPEG vs PNG încă domină. Ambele au cazuri de utilizare specifice pentru care avantajele și dezavantajele se echilibrează bine.

Cum să vă pregătiți imaginile pentru încărcare (în 3 moduri)

În ciuda faptului că JPEG vs PNG iese la egalitate în ceea ce privește calitatea finală a afișajului, trebuie să gestionați fiecare format într-un mod diferit pentru a obține cele mai bune rezultate. Există trei zone în care puteți afecta dimensiunea fișierului, calitatea și pregătirea generală a imaginilor dvs.:

• Asigurați-vă că dimensiunile țin cont de cazurile de utilizare relevante cu care vă veți întâlni.
• Alegeți o rezoluție pentru imaginea dvs. care este potrivită pentru web.
• Utilizați compresia „de bun gust” pentru a reduce și mai mult dimensiunea fișierului imaginilor dvs. fără a afecta prea mult calitatea.

După cum v-ați aștepta, există un echilibru bun aici. Să începem cu dimensiunile imaginii tale.

1. Setați dimensiunile dvs

Dimensiunile unei imagini sunt mai importante pentru utilizatorul final decât orice alt punct din lanț. Acest lucru se datorează faptului că browserul trebuie să încarce imaginea, iar un fișier mare va eroda experiența utilizatorului (UX). Cu toate acestea, aceasta nu este singura considerație. Desigur, și calitatea este cheia. Dacă decideți să faceți o imagine mică în dimensiune, aceasta va afecta calitatea finală a imaginii (mai mult pentru JPEG decât pentru PNG).

Răspunsul este să atingeți punctul favorabil în câteva zone, începând cu dimensiunile imaginii dvs. Ca regulă generală, doriți să vă faceți imaginile suficient de mari pentru a putea transmite detaliile de care aveți nevoie. Există un punct de exagerare undeva care este diferit în funcție de platforma țintă și de imaginea în sine.

Senzorul de decupare modern și camerele digitale full-frame pot produce imagini cu dimensiuni implicite de aproximativ 6.000 px x 3.000 px (deși există diferențe sălbatice între camere). În schimb, imaginile cu „marginea lungă” la aproximativ 2.000 de pixeli sunt comune pe rețelele sociale. Rețineți că acest lucru este pentru afișare în fereastra de vizualizare completă a unui dispozitiv.

Pentru imaginile de blog, această regulă de 2.000 de pixeli poate fi chiar și de până la 1.000 de pixeli. Acest lucru ia în considerare și imaginile de înaltă definiție sau „Retina”. De multe ori au nevoie de dimensiuni duble pentru a fi afișate la fel de clare pe ecranele de înaltă definiție. De fapt, rezoluția este un loc bun spre următorul.

2. Setați rezoluția corectă

Unul dintre elementele de bază ale ecranelor digitale sunt pixelii. Aceste puncte minuscule formează întregul afișaj, deși pixelii nu au o dimensiune uniformă. Din acest motiv, trebuie să luăm în considerare și rezoluția atunci când pregătim imaginile noastre JPEG și PNG.

Folosim Pixels Per Inch (PPI) pentru a discuta câți pixeli pot încăpea pe un ecran. Puteți exprima acest lucru și în centimetri sau sub formă de „puncte”. Acesta din urmă este pentru formate fizice de imprimare, iar cercurile de design grafic folosesc adesea DPI. Ca atare, îl vei auzi folosit într-un mod interschimbabil, deși PPI este termenul corect.

În timp ce specificația de imagine PNG folosește 72 PPI ca rezoluție optimă de design, aceasta nu ar ține cont de ecranele moderne de înaltă definiție. Deși puteți dubla dimensiunile unei imagini pentru a o reda clar pe toate ecranele, puteți face același lucru și cu rezoluția. De exemplu, luați această captură de ecran a desktopului macOS Big Sur:

Este un PNG, cu 1.000 de pixeli pe marginea lungă (sus și jos în acest caz). Cu toate acestea, folosește 144 PPI – deși există o „magie” de încărcare care convertește rezoluția la 72 PPI la încărcare pe WordPress.

Atât imaginile PNG, cât și JPEG pot folosi și PPI mult mai mari – rezoluțiile pregătite pentru imprimare sunt de aproximativ 300 DPI/PPI. În plus, o mulțime de imagini de pe site-uri de fotografii stoc, cum ar fi Pixabay, se vor descărca folosind 300 PPI:

Ca atare, reducerea acestui lucru vă va pregăti mai bine imaginile pentru web și diferitele sale afișaje.

3. Optimizați-vă imaginile utilizând compresia

Nu trebuie să vă spunem multe despre optimizarea imaginii. Este un subiect pe care îl puteți găsi în altă parte pe blog și aproape toți utilizatorii WordPress vor ști să optimizeze imaginile fie înainte, fie în timpul procesului de încărcare.

Conceptul general este că aplicați o compresie suplimentară imaginilor, adesea într-un mod cu pierderi. Acest lucru afectează calitatea imaginii și este vizibil dacă faceți modificări majore ale dimensiunilor și rezoluției înainte de a aplica compresie cu pierderi puternice.

Aceste artefacte trebuie să fie minime pentru a prezenta bine imaginile. Din acest motiv, există o mulțime de instrumente disponibile pentru a face treaba. Cel mai accesibil este TinyPNG, deși comprimă și JPEG-urile:

Cu toate acestea, compresia pe care o aplică este blândă pentru unele imagini, ceea ce ar putea să nu reducă suficient dimensiunea fișierului. Un serviciu precum ShortPixel are un format agresiv de compresie cu pierderi disponibil, în timp ce compresia lui Glossy face o treabă admirabilă în comparație cu TinyPNG.

Ideea aici este că trebuie să echilibrați nivelul de compresie atât cu dimensiunea fișierului, cât și cu toate celelalte elemente ale imaginii. În secțiunea următoare, vom discuta cea mai bună abordare de luat.

JPEG vs PNG: Cum să profitați la maximum de fiecare format

În ciuda diferențelor de formate de fișiere, natura navigării pe web înseamnă că vă puteți reduce pregătirea imaginilor la următoarele:

• Utilizați dimensiuni între 1.000 și 2.048 de pixeli pe marginea lungă.
• Setați o rezoluție de 144 PPI pentru toate imaginile dvs., pentru a vă asigura că acestea sunt clare și clare pe toate ecranele.
• Aplicați compresie subtilă prin optimizarea imaginii pentru a reduce dimensiunea fișierului. Luând în considerare totul, majoritatea imaginilor vor avea o dimensiune de aproximativ 100–200 kb.

Există puțin mai multe aici, bazate pe anumite formate de fișiere:

• Pentru fișierele PNG, reducerea dimensiunilor ar putea degrada prea mult calitatea imaginii. Ideea aici este de a menține rezoluția cât mai mare posibil pentru a atenua acești factori.
• Fișierele JPEG nu rezistă copierii, deoarece fiecare duplicare este mai degradată decât ultima. Dacă puteți controla de unde provine JPEG (de exemplu, dacă ați făcut fotografia), creați un JPEG dintr-un fișier TIFF sau RAW pentru a păstra calitatea imaginii.
• Din experiența noastră, JPEG-urile nu acceptă compresie, precum și alte formate de fișiere. Aceasta înseamnă că este important să pregătiți și să optimizați acele imagini înainte de a ajunge la etapa de compresie.

Până acum, ar trebui să aveți o înțelegere solidă a JPEG vs PNG, când să le utilizați și cum să vă pregătiți fișierele; iar dacă tot vrei să știi ce imagine a fost JPEG de la începutul articolului, este prima!

Încheierea

Se pare că imaginile rulează pe web. Din acest motiv, avem o serie de formate de fișiere care ne ajută să oferim calitatea potrivită la o dimensiune respectabilă a fișierului pentru aplicație. JPEG vs PNG este o comparație comună, deoarece nu este clar la ce sunt buni nici unul și sunt două formate de imagine populare.

Pe scurt, JPEG-urile sunt pentru fotografii, iar PNG-urile sunt pentru grafică. Pentru a vă pregăti fișierele, principala preocupare ar trebui să fie păstrarea calității imaginii ridicate, mai degrabă decât dimensiunea fișierului. Totuși, în timp ce ajustările rezoluției vă oferă cele mai mari schimbări, acest lucru are un impact mai mare asupra calității imaginii. Trucul este să echilibrați dimensiunile, rezoluția și compresia pentru a obține imaginea finală pregătită pentru web.

Vă pregătiți imagini pentru web, așa cum am subliniat aici, sau faceți ceva diferit? Anunțați-ne în secțiunea de comentarii de mai jos!

Credit imagine: minka2507, christels .