Σημειώσεις από την ομάδα για την τέχνη, τις μορφές και τις μικρές αποφάσεις πίσω από ένα καλό αποτέλεσμα.
Πώς το WebP πετυχαίνει μικρότερα μεγέθη από το PNG
Το WebP χρησιμοποιεί δύο διακριτές λειτουργίες συμπίεσης. Η λειτουργία χωρίς απώλειες συνδυάζει χωρική και χρωματική πρόβλεψη με ένα στάδιο εντροπικής κωδικοποίησης πιο εξελιγμένο από το DEFLATE του PNG, πετυχαίνοντας αναλογίες συμπίεσης περίπου 26 τοις εκατό καλύτερες σε τυπικές εικόνες σύμφωνα με το δημοσιευμένο σημείο αναφοράς της Google. Η απωλεστική λειτουργία εφαρμόζει έναν μετασχηματισμό βασισμένο σε μπλοκ παρόμοιο με τη συμπίεση βίντεο, σχεδιασμένο να απορρίπτει αντιληπτικά ασήμαντη πληροφορία διατηρώντας ό,τι βλέπει πραγματικά το μάτι. Για εικόνες με κανάλι άλφα, το WebP χρησιμοποιεί ξεχωριστή υποσυμπίεση χωρίς απώλειες για τα δεδομένα άλφα ενώ εφαρμόζει απωλεστική συμπίεση στα δεδομένα RGB, και γι' αυτό το απωλεστικό WebP με διαφάνεια μπορεί να είναι περίπου τρεις φορές μικρότερο από ένα PNG σε ισοδύναμη οπτική ποιότητα. Το DEFLATE του PNG είναι μόνο χωρίς απώλειες και δεν μπορεί να εκμεταλλευτεί τον αντιληπτικό συμβιβασμό που αξιοποιεί η απωλεστική λειτουργία. Η διαφορά μορφής εξηγεί το χάσμα.
Το κανάλι άλφα λεπτομερώς
Τόσο το PNG όσο και το WebP υποστηρίζουν διαφάνεια άλφα 8 bit, που σημαίνει ότι κάθε pixel μπορεί να κρατά μια τιμή αδιαφάνειας από 0 (πλήρως διαφανές) έως 255 (πλήρως αδιαφανές). Όταν η μηχανή εικόνας της πλατφόρμας ξαναγράφει ένα PNG σε WebP, διαβάζει τις τιμές RGBA κάθε pixel και περνά τις τιμές άλφα απευθείας στο στάδιο συμπίεσης WebP, όπου διατηρούνται με συμπίεση χωρίς απώλειες ανεξάρτητα από το πώς κωδικοποιούνται τα δεδομένα RGB. Το αποτέλεσμα είναι ότι κάθε διαφανές pixel στο PNG με άλφα 0, κάθε ημιδιαφανές pixel μεταξύ 1 και 254, και κάθε αδιαφανές pixel στο 255 αντιστοιχίζεται στην ακριβώς ίδια κατάσταση στο WebP. Για ένα λογότυπο με απαλές σκιές ή κείμενο με εξομάλυνση ακμών σε διαφανές φόντο, η ομαλότητα των ακμών επιβιώνει άθικτη. Αυτό αντιπαραβάλλεται με το JPG, που δεν έχει πεδίο άλφα στην προδιαγραφή του και πρέπει να συνθέσει την εικόνα πάνω σε χρώμα φόντου πριν την κωδικοποίηση.
Core Web Vitals και επιλογή μορφής εικόνας
Το Largest Contentful Paint μετρά πόσο χρόνο χρειάζεται το μεγαλύτερο ορατό στοιχείο της σελίδας για να εμφανιστεί στο παράθυρο προβολής. Για τις περισσότερες σελίδες περιεχομένου, αυτό το στοιχείο είναι η κεντρική εικόνα, και η Google χρησιμοποιεί το LCP ως σήμα κατάταξης στην αξιολόγηση Core Web Vitals. Οι εικόνες PNG είναι μια σταθερή πηγή αποτυχιών LCP λόγω του μεγέθους τους, αφού ένα φωτογραφικό PNG σε ανάλυση 4K μπορεί να ζυγίζει αρκετά megabyte ενώ το ισοδύναμο WebP σε ποιότητα σχεδόν χωρίς απώλειες είναι συνήθως ένα κλάσμα αυτού. Το PageSpeed Insights το επισημαίνει συγκεκριμένα στο στοιχείο ελέγχου προβολής εικόνων σε μορφές νέας γενιάς, καταχωρώντας το PNG ως τη μορφή στόχο προς αντικατάσταση. Η μετατροπή των PNG που εμφανίζονται σε κρίσιμες διαδρομές απόδοσης σε WebP είναι μία από τις πιο αποδοτικές μεμονωμένες αλλαγές για τη βελτίωση της μετρούμενης απόδοσης σελίδας. Το χρονοδιάγραμμα υποστήριξης το κάνει ασφαλές, με το Chrome να προσθέτει WebP το 2011, το Firefox το 2019, το Safari το 2020, και το Edge από την ανακατασκευή του σε Chromium.
Απωλεστική έξοδος και η ρύθμιση σχεδόν χωρίς απώλειες
Η εγγραφή WebP προσφέρει μια παράμετρο ποιότητας από 0 έως 100, όπου οι υψηλότερες τιμές διατηρούν περισσότερη λεπτομέρεια με κόστος μεγαλύτερα αρχεία. Αυτό το εργαλείο γράφει σε μια σταθερή ρύθμιση σχεδόν χωρίς απώλειες, ρυθμισμένη να ισορροπεί την οπτική πιστότητα με το μέγεθος αρχείου για τις τυπικές κατηγορίες πόρων ιστού των φωτογραφιών, των γραφικών διεπαφής και των εικονιδίων. Σε αυτή τη ρύθμιση, η έξοδος είναι αντιληπτικά αδιάκριτη από το αρχικό PNG σε κανονικές αποστάσεις προβολής οθόνης. Τεχνικά, κάποια ακρίβεια σε επίπεδο bit χάνεται σε σχέση με μια αληθινή κωδικοποίηση χωρίς απώλειες, που σημαίνει ότι μια σύγκριση σε επίπεδο byte μεταξύ των αποκωδικοποιημένων pixel WebP και των αρχικών pixel PNG θα δείξει μικρές αριθμητικές διαφορές. Αυτές οι διαφορές είναι κάτω από το κατώφλι της ανθρώπινης αντίληψης για φωτογραφικό περιεχόμενο. Για ιατρική απεικόνιση, δορυφορική φωτογραφία ή αρχειακή ψηφιακή διατήρηση, όπου η πιστότητα χωρίς απώλειες είναι σκληρή απαίτηση, η σωστή προσέγγιση είναι να κρατήσετε το PNG και να χρησιμοποιήσετε το WebP μόνο ως εξαγωγή παράδοσης, όχι ως αντίγραφο εργασίας.
Συμπεριφορά μεταδεδομένων
Η διαδικασία που χρησιμοποιείται για τη μετατροπή PNG σε WebP αφαιρεί τα μεταδεδομένα EXIF, IPTC και XMP από την έξοδο. Αυτό ταιριάζει με τη συμπεριφορά που παρατηρείται και στις τρεις μεγάλες μηχανές περιηγητών. Τα χρωματικά προφίλ ICC χειρίζονται ασυνεπώς, όπου το Chrome και το Safari διατηρούν την ετικέτα προφίλ sRGB ICC στην έξοδο WebP ενώ το Firefox αφαιρεί όλα τα μεταδεδομένα μαζί με το προφίλ ICC. Το καθαρό αποτέλεσμα είναι ότι το μετατραπέν WebP είναι ασφαλές ως sRGB σε όλους τους περιηγητές, αλλά οποιαδήποτε ετικέτα ευρέος φάσματος όπως Display-P3, Adobe RGB ή ProPhoto RGB που υπάρχει στο αρχικό PNG δεν θα επιβιώσει στο Firefox. Για επαγγελματικές ροές με ευαισθησία στο χρώμα, αυτή η ασυνέπεια έχει σημασία, οπότε αν η τελική έξοδος χρειάζεται πιστότητα χρωματικού προφίλ, μετατρέψτε με ένα εργαλείο που γράφει ρητά δεδομένα ICC, ή εφαρμόστε την ετικέτα προφίλ ως βήμα μετεπεξεργασίας με έναν αφιερωμένο επεξεργαστή μεταδεδομένων εικόνας.
Πότε να κρατήσετε PNG και πότε αρκεί το WebP
Το πρακτικό δέντρο αποφάσεων είναι σύντομο. Αν ο τελικός προορισμός της εικόνας είναι μια ιστοσελίδα ή μια διαδικτυακή εφαρμογή, και το περιβάλλον απόδοσης είναι οποιοσδήποτε περιηγητής από το 2020 και μετά, το WebP είναι η σωστή μορφή εξαγωγής. Αν η εικόνα χρειάζεται να ανοίξει σε εφαρμογή σχεδίασης όπως Figma, Sketch ή Affinity Designer, επαληθεύστε την υποστήριξη WebP στη συγκεκριμένη έκδοση που χρησιμοποιείτε, αφού η υποστήριξη ποικίλλει. Αν η εικόνα θα χρησιμοποιηθεί σε ροή εκτύπωσης, προτιμάται το PNG ή το TIFF αφού οι περισσότεροι RIP εκτύπωσης δεν χειρίζονται το WebP. Αν η εικόνα θα σταλεί με email, το PNG είναι ασφαλέστερο αφού οι πελάτες email είναι περιβόητα ασυνεπείς με τις σύγχρονες μορφές. Αν η εικόνα θα χρησιμοποιηθεί ως αρχείο εργασίας που επεξεργάζεται και αποθηκεύεται ξανά πολλές φορές, κρατήστε το PNG ως πρωτότυπο. Το WebP σε ποιότητα σχεδόν χωρίς απώλειες είναι μια εξαιρετική μορφή παράδοσης, και το PNG είναι η καλύτερη μορφή αρχειοθέτησης και επεξεργασίας. Η ιδανική ροή κρατά το PNG ως πρωτότυπο και εξάγει σε WebP για παράδοση στον ιστό.
