PNG vs JPG: ποιο από τα δύο πρέπει να αποθηκεύσετε;

Απώλεια χωρίς απώλεια σε σύγκριση με απώλεια, το κανάλι άλφα που δεν έχει το JPG και η χρωματική υποδειγματοληψία που θολώνει το κείμενο, με μετρημένα μεγέθη αρχείων και από τους δύο τύπους.

August 9, 2026

PNG και JPG διαφέρουν σε μία ερώτηση: θυμάται το αρχείο κάθε pixel ακριβώς; Το PNG το κάνει. Το JPG απορρίπτει λεπτομέρειες που η ανθρώπινη όραση δεν πιάνει καλά, και επιστρέφει πολύ μικρότερο μέγεθος. Αυτή η μοναδική διαφορά αποφασίζει σχεδόν κάθε περίπτωση που θα συναντήσετε, και ισχύει με έναν τρόπο για μια φωτογραφία παραλίας και με τον άλλο τρόπο για ένα στιγμιότυπο οθόνης ενός υπολογιστικού φύλλου.

Κάθε αριθμός παρακάτω προήλθε από τα εργαλεία της LeanImg που λειτουργούσαν σε μια καρτέλα του προγράμματος περιήγησης, σε δύο δοκιμαστικά αρχεία: texture.jpg σε 3840x2160 και 538,6 KB, συν alpha.png σε 900x606 και 942,4 KB με διαφανές φόντο. Δημιουργήσαμε αυτά τα εργαλεία χωρίς διαδρομές API και χωρίς ενέργειες διακομιστή, οπότε το αρχείο δεν φεύγει ποτέ από τη μηχανή σας. Οι περισσότερες ιστοσελίδες σε αυτή την κατηγορία ανεβάζουν την εικόνα σας σε έναν διακομιστή και στη συνέχεια υπόσχονται να την διαγράψουν μία ώρα αργότερα. Δεν υπάρχει τίποτα εδώ για να διαγραφεί, γι' αυτό και η σελίδα απορρήτου μας είναι σύντομη.

Ποιο από τα δύο πρέπει να επιλέξω, PNG ή JPG;

Οι φωτογραφίες πηγαίνουν σε JPG. Τα στιγμιότυπα οθόνης, τα λογότυπα, τα διαγράμματα, η γραφική τέχνη και οτιδήποτε χρειάζεται διαφάνεια πηγαίνουν σε PNG. Ο οδηγός μορφών του MDN σχεδιάζει την ίδια γραμμή. Σε έξυπνη λειτουργία, ο συμπιεστής μας πήρε το texture.jpg από 538,6 KB σε 286,1 KB με MozJPEG σε ποιότητα 80, μείωση 47%. Σύρετε τον ρυθμιστή στο 60 και η ίδια φωτογραφία θα είναι 212,4 KB. Στο 30 είναι 131 KB, μείωση 76%.

Αυτή η διαφορά προέρχεται από το πώς συμπιέζει κάθε μορφή. Ο σχεδιασμός του JPG υποθέτει ότι τα γειτονικά pixels συγχωνεύονται το ένα με το άλλο, κάτι που ταιριάζει σε κλίσεις και κόκκους φιλμ. Ένα στιγμιότυπο οθόνης σπάει αυτή την υπόθεση σε κάθε άκρη κειμένου. Το PNG προβλέπει κάθε pixel από τους γείτονές του και στη συνέχεια αποσυμπιέζει τη διαφορά, έτσι κάνει την καλύτερη δουλειά του στις επίπεδες περιοχές ομοιόμορφου χρώματος που αποτελείται από μια διεπαφή χρήστη.

Τι κάνει η συμπίεση χωρίς απώλεια στην πραγματικότητα στο μέγεθος του αρχείου;

Η συμπίεση χωρίς απώλεια σημαίνει ότι τα αποκωδικοποιημένα pixels επιστρέφουν ακριβώς όπως ήταν, κάτι που απαιτεί η προδιαγραφή PNG. Δεν σημαίνει ότι το αρχείο δεν μπορεί να συρρικνωθεί. Η λειτουργία PNG του συμπιεστή μας τρέχει το oxipng σε επίπεδο 3, και πήρε το alpha.png από 942,4 KB σε 383,9 KB. Αυτό είναι 59% με κάθε τιμή pixel διατηρημένη.

Η επιλογή PNG με "μικρότερο μέγεθος αρχείου" είναι ένα διαφορετικό ζώο. Τρέχει το imagequant, το οποίο μειώνει την εικόνα σε μια παλέτα χρωμάτων πριν γραφτεί το PNG, και το alpha.png βγήκε στα 98,3 KB. Αυτό είναι 90% λιγότερο. Είναι ένα αποτέλεσμα με απώλεια ανεξάρτητα από το τι υποδηλώνει η επέκταση .png, οπότε κρατήστε το πρωτότυπο αν αυτή η εικόνα είναι ένα κύριο αντίγραφο.

Γιατί το JPG θολώνει το χρωματιστό κείμενο και τις λεπτές γραμμές;

Επειδή το JPG αποθηκεύει το χρώμα σε χαμηλότερη ανάλυση από τη φωτεινότητα. Η μορφή διατηρεί τη λούμα ξεχωριστή από τα δύο κανάλια χρωμάτων, όπως ορίζεται στο ITU-T T.81, και οι κωδικοποιητές συνήθως υποδειγματοληπτούν το χρώμα έτσι ώστε ένα δείγμα χρώματος να καλύπτει ένα μπλοκ 2x2 pixels. Σε μια φωτογραφία 3840x2160 όπως το texture.jpg δεν θα το παρατηρήσετε. Σε μια κόκκινη γραμμή ενός pixel σε λευκό, το χρώμα αυτής της γραμμής μέσου με τρεις λευκούς γείτονες πριν εφαρμοστεί οποιαδήποτε ρύθμιση ποιότητας, και καμία θέση ρυθμιστή δεν το επαναφέρει.

Τα στιγμιότυπα οθόνης είναι όπου χτυπά. Η μετάβαση σε WebP δεν το αποφεύγει, επειδή η λειτουργία απώλειας του WebP είναι κλειδωμένη σε 4:2:0 χρώμα και εφαρμόζει την ίδια μέση τιμή. Το PNG διατηρεί την ακριβή τιμή RGB κάθε pixel, γι' αυτό τα UI captures, τα QR codes και οι επικαλύψεις κειμένου ανήκουν εκεί. Αν το PNG είναι ακόμα πολύ βαρύ, ποσοτικοποιήστε το και κρατήστε τη μορφή.

Τι συμβαίνει με τη διαφάνεια όταν αποθηκεύω ως JPG;

Γεμίζει. Το JPEG δεν μεταφέρει κανένα κανάλι άλφα σε καμία λειτουργία, οπότε κάτι πρέπει να αποφασίσει τι βρίσκεται πίσω από τα διαφανή pixels σας. Ο μετατροπέας PNG σε JPG μας τα συνδυάζει σε λευκό πριν από την κωδικοποίηση, και ο συμπιεστής κάνει το ίδιο όποτε η στοχευμένη μορφή δεν έχει άλφα. Χωρίς αυτό το βήμα θα βγουν μαύρα, επειδή ένα πλήρως διαφανές pixel συνήθως έχει RGB 0,0,0 από κάτω.

Δεν μπορείτε να αντιστρέψετε αυτή τη διαδρομή. Η επιστροφή μέσω JPG σε PNG σας δίνει ένα PNG με ένα λευκό ορθογώνιο όπου ήταν η διαφάνεια, συν όποια JPG artifacts ενσωματώθηκαν στην πρώτη διαδρομή. Η συμπίεση αφαιρεί επίσης κάθε κομμάτι μεταδεδομένων: EXIF, GPS, ICC profile και ενσωματωμένη μικρογραφία χάνονται όλα, αν και η προσανατολισμός επιβιώνει. Κρατήστε το κύριο PNG; θα το χρειαστείτε. Αν κόβετε ένα θέμα από μια φωτογραφία, ο αφαιρέτης φόντου μας πάντα γράφει PNG με άλφα για αυτόν τον λόγο, που είναι επίσης γιατί μια κοπή επιστρέφει πιο βαριά από το JPG που εισάγατε, και ο γεννήτρια εικονιδίων προεπιλέγει το χρώμα φόντου σε #ffffff, έτσι ένα διαφανές λογότυπο προσγειώνεται σε ένα λευκό τετράγωνο μέχρι να αλλάξετε αυτό το πεδίο.

Γιατί το PNG μου είναι τόσο μεγαλύτερο από το JPG;

Ο φωτογραφικός θόρυβος δεν δίνει στον προβλεπτή του PNG τίποτα να δουλέψει. Κάθε σειρά μαντεύεται από την προηγούμενη σειρά και η υπόλοιπη διαφορά αποσυμπιέζεται, το οποίο είναι εξαιρετικό σε ένα επίπεδο κουμπί και σχεδόν άχρηστο σε κόκκους. Κοιτάξτε τα δύο δοκιμαστικά αρχεία. Το alpha.png είναι 900x606 και έφτασε τα 942,4 KB, ενώ το texture.jpg είναι 3840x2160, περισσότερες από δεκαπέντε φορές ο αριθμός των pixels, και έφτασε τα 538,6 KB. Η ποσοτικοποίηση παλέτας είναι ο μοχλός που κλείνει αυτή τη διαφορά, και πήρε το alpha.png στα 98,3 KB.

Πρέπει να αποθηκεύσω WebP ή AVIF και να παραλείψω την ερώτηση;

Κάποιες φορές, αν και αξίζει να μετρηθεί. Τρέξαμε το texture.jpg μέσω του συμπιεστή με την ίδια θέση ρυθμιστή 80 για και τους τρεις τύπους, και πάλι στο 63.

Το AVIF που παράγει το μεγαλύτερο αρχείο με ρυθμιστή 80 φαίνεται αντιφατικό, και η αιτία βρίσκεται στον δικό μας κώδικα. Για μια πηγή JPEG, ο συμπιεστής πολλαπλασιάζει τον ρυθμιστή σας με την ποιότητα που διαβάζει από τους πίνακες ποσοτικοποίησης της πηγής, έτσι μια πηγή που εκτιμάται σε 60 με τον ρυθμιστή στο 80 κωδικοποιεί στην πραγματικότητα σε 48. Το WebP και το AVIF παίρνουν το 80 κατά πρόσωπο. Στο 63, που είναι η προεπιλεγμένη έξυπνη λειτουργία για το AVIF, η σειρά αντιστρέφεται: το AVIF είναι 186,9 KB και το WebP είναι 200,6 KB σε σχέση με αυτή την πηγή 538,6 KB. Το AVIF χρειάστηκε επίσης 10 έως 11 δευτερόλεπτα ανά κωδικοποίηση ενώ το JPEG και το WebP ολοκληρώθηκαν άμεσα, και αξίζει να ελέγξετε την υποστήριξη προγράμματος περιήγησης πριν δεσμευτείτε. Αναλύσαμε αυτή τη σύγκριση εκτενώς στο κομμάτι σχετικά με το αν το WebP πραγματικά νικά το JPG.

Τι πρέπει να κάνω με το αρχείο μπροστά μου;

Ανοίξτε τον συμπιεστή. Τρέξτε το αρχείο σας δύο φορές. Αν είναι φωτογραφία, πάρτε πρώτα την έξυπνη λειτουργία, στη συνέχεια σπρώξτε τον ρυθμιστή στο 60 και συγκρίνετε τις δύο εξόδους σε πλήρη ζουμ. Αν έχει κείμενο ή διαφάνεια, μείνετε στο PNG και δοκιμάστε και τις δύο λειτουργίες PNG: η χωρίς απώλεια πήρε το alpha.png στα 383,9 KB και η λειτουργία παλέτας το πήρε στα 98,3 KB. Αλλάξτε πρώτα το μέγεθος όταν η εικόνα προορίζεται για στήλη 800px, καθώς ο μετατροπέας γράφει PNG χωρίς απώλεια και επανακωδικοποιεί τα πάντα άλλο με ποιότητα 90 από προεπιλογή. Και αν ο προορισμός είναι ένα έγγραφο, ένα JPG προσγειώνεται σε μια σελίδα PDF επανακωδικοποιημένο ξανά με ποιότητα 92, που είναι μια επιπλέον γενιά για να προγραμματίσετε γύρω από.