Σημειώσεις από την ομάδα για την τέχνη, τις μορφές και τις μικρές αποφάσεις πίσω από ένα καλό αποτέλεσμα.
Γιατί το AVIF νικά το PNG τόσο αποφασιστικά στο μέγεθος αρχείου
Το AVIF χτίζεται πάνω στο σύγχρονη μορφή εικόνας, σχεδιασμένο για αντιληπτική αποδοτικότητα παρά για πιστότητα χωρίς απώλειες. Το PNG χρησιμοποιεί DEFLATE σε ακατέργαστα δεδομένα εικονοστοιχείων, που είναι χωρίς απώλειες αλλά αφήνει τεράστιο πλεονασμό ανέπαφο σε φωτογραφικό περιεχόμενο. Το AVIF αντικαθιστά αυτόν τον πλεονασμό με πρόβλεψη μπλοκ δανεισμένη από το βίντεο, απορρίπτοντας πληροφορίες που το ανθρώπινο οπτικό σύστημα δεν παρατηρεί. Το αποτέλεσμα είναι δραματικό. Μια φωτογραφία 116 χιλιόμπαιτ μετατρέπεται σε περίπου 16 χιλιόμπαιτ ως AVIF σε ποιότητα 85, και ένα διαφανές PNG συνήθως συρρικνώνεται 30 έως 50 τοις εκατό έναντι ενός ισοδύναμου WebP. Το χάσμα διευρύνεται με φωτογραφίες υψηλής ανάλυσης και στενεύει σε απλά γραφικά. Για κάθε ιστότοπο που σερβίρει διαφανείς εικόνες σε σύγχρονο κοινό, η εξοικονόμηση εύρους ζώνης μεταφράζεται απευθείας σε ταχύτερες φορτώσεις και χαμηλότερο κόστος εξόδου.
Η ιστορία του καναλιού άλφα με λεπτομέρεια
Τόσο το PNG όσο και το AVIF αποθηκεύουν τη διαφάνεια ως ξεχωριστό επίπεδο άλφα δίπλα στα δεδομένα χρώματος. Όταν αυτό το ζεύγος επεξεργάζεται το PNG σας, ο αποκωδικοποιητής εξάγει τα εικονοστοιχεία χρώματος και τη μάσκα άλφα ανεξάρτητα. Έπειτα το στάδιο εγγραφής AVIF γράφει ένα νέο αρχείο με δικό του ίχνος άλφα, χρησιμοποιώντας κωδικοποίηση εντός καρέ της σύγχρονης μορφής για να συμπιέσει και τα δύο επίπεδα σε ποιότητα 85. Το άλφα δεν ψήνεται μέσα στο χρώμα και δεν αντικαθίσταται από γέμισμα φόντου. Απαλές σκιές, φτερωτές άκρες και μερικώς διαφανείς διαβαθμίσεις κωδικοποιούνται όλες πιστά. Η μία υποβάθμιση που προσθέτει το AVIF είναι η απωλεστική συμπίεση στο ίδιο το επίπεδο άλφα, που μπορεί να δημιουργήσει ελάχιστα αντιληπτό κροσσό γύρω από πολύ σκληρές άκρες σε ακραία μεγέθυνση. Σε κανονικά μεγέθη εμφάνισης και ποιότητα 85, η διαφορά δεν είναι ορατή. Για δουλειά εικονιδίων ακριβείας σε μικροσκοπικά μεγέθη, κρατήστε το PNG.
Ταχύτητα μετατροπής στην πράξη, ανά πρόγραμμα περιήγησης
Η ενότητα προετοιμασίας AVIF φορτώνεται μία φορά ανά συνεδρία προγράμματος περιήγησης, περίπου 800 χιλιοστά του δευτερολέπτου για ανάκτηση συν 300 για αρχικοποίηση, οπότε η πρώτη μετατροπή φέρει περίπου ένα δευτερόλεπτο προετοιμασίας. Οι θερμές μετατροπές το παρακάμπτουν εντελώς. Στον Chrome για υπολογιστή, τα 0.12 megapixel παίρνουν περίπου 40 χιλιοστά, το 1 megapixel γύρω στα 250 χιλιοστά, και τα 8 megapixel περίπου 2.8 δευτερόλεπτα. Ο Firefox είναι η εξαίρεση, τρέχοντας την ίδια μετατροπή περίπου τέσσερις φορές πιο αργά, οπότε μια φωτογραφία 4K μπορεί να πάρει 30 δευτερόλεπτα ή περισσότερο εκεί. Το WebKit στον Safari κάθεται ανάμεσα στα δύο, πιο κοντά στον Chrome. Σε μεσαίας κατηγορίας κινητό υλικό οι αριθμοί τρέχουν τρεις έως πέντε φορές χειρότερα από τον Chrome υπολογιστή. Αν μετατρέπετε μεγάλα αρχεία συχνά, ο Chrome σε υπολογιστή ή φορητό δίνει την καλύτερη απόδοση.
Πότε να κρατήσετε το PNG αντί να μετατρέψετε
Το PNG παραμένει η σωστή επιλογή σε αρκετές περιπτώσεις ακόμη και όταν το μέγεθος αρχείου μετρά. Πρώτον, γραφικά με αιχμηρό κείμενο σε μικρά μεγέθη, όπως ετικέτες, σήματα ή εικονίδια σε κλίμακα favicon, μπορεί να δείξουν τεχνουργήματα στο AVIF που είναι μη αποδεκτά σε τυπικές αποστάσεις θέασης. Δεύτερον, αρχεία πηγής αλήθειας που χρησιμοποιούνται για περαιτέρω επεξεργασία πρέπει να μείνουν PNG, αφού κάθε πέρασμα μέσα από απωλεστική μορφή συσσωρεύει απώλεια ποιότητας. Τρίτον, περιβάλλοντα που απορρίπτουν το AVIF, συμπεριλαμβανομένων ορισμένων επεξεργαστών εγγράφων, παλαιότερων εργαλείων σχεδίασης και προγραμμάτων email, χρειάζονται PNG για διαλειτουργικότητα. Τέλος, η κίνηση πέρα από το πρώτο καρέ δεν διατηρείται, αφού αυτό το ζεύγος χειρίζεται ένα μόνο καρέ. Για όλα τα άλλα, διαφανείς φωτογραφίες και γραφικά στοιχεία προς σύγχρονη παράδοση ιστού, το PNG σε AVIF είναι η σωστή ανταλλαγή.
Τα Core Web Vitals και το επιχείρημα του εύρους ζώνης
Το Largest Contentful Paint, η κύρια μετρική φόρτωσης, επηρεάζεται απευθείας από το μέγεθος της μεγαλύτερης εικόνας σε μια σελίδα. Η μείωση αυτής της εικόνας από 116 χιλιόμπαιτ σε 16 χιλιόμπαιτ, όπως μετρήθηκε σε φωτογραφία 4K στην ανάπτυξη, κόβει τον χρόνο μεταφοράς σε σύνδεση 10 Mbps από περίπου 93 χιλιοστά σε περίπου 13 για αυτό το στοιχείο μόνο. Πολλαπλασιάστε το σε ένα πλέγμα προϊόντων, ένα περιστρεφόμενο hero ή μια διεπαφή γεμάτη διαφανή εικονίδια και η σωρευτική εξοικονόμηση σπρώχνει το LCP πολύ κάτω από το όριο των 2.5 δευτερολέπτων που η Google θεωρεί καλό. Η υιοθέτηση του AVIF επιταχύνθηκε ακριβώς επειδή το επιχείρημα μπορεί να γίνει σε σκληρούς αριθμούς. Σε περίπου 94.3 τοις εκατό κάλυψη προγραμμάτων περιήγησης, η περίπτωση επιστροφής είναι αρκετά μικρή ώστε το κέρδος εύρους ζώνης να υπερτερεί του επιπλέον σήμανσης picture.
Σε τι διαφέρει από έναν συνηθισμένο διαδικτυακό μετατροπέα
Οι περισσότεροι διαδικτυακοί μετατροπείς AVIF ανεβάζουν το PNG σας σε μηχανές που δεν ελέγχετε, το επεξεργάζονται εκεί και το κρατούν υπό την πολιτική διατήρησης που ορίζει εκείνος ο πάροχος, συχνά ασαφή. Το RoundCut είναι ευθύ για τη ροή του. Επειδή το AVIF είναι βαρύ, η μετατροπή τρέχει στον διακομιστή μας για το καλύτερο αποτέλεσμα, με έναν κωδικοποιητή στο πρόγραμμα περιήγησης ως αυτόματη εφεδρεία όταν ο διακομιστής δεν είναι διαθέσιμος. Όταν το αρχείο σας σταλεί σε εμάς, μετατρέπεται και έπειτα αφαιρείται σε περίπου 2 ώρες, χωρίς καμία χρήση πέρα από τη μετατροπή. Δεν υπάρχει μόνιμη αποθήκευση ούτε κοινοποίηση της εικόνας σας. Για όσους δουλεύουν με έγγραφα πελατών, δική τους φωτογραφία προϊόντων ή περιεχόμενο χρηστών, η ειλικρινής εκδοχή της συναλλαγής είναι αυτή: το αρχείο μπορεί να περάσει από τον διακομιστή μας, αντιμετωπίζεται μόνο για να δημιουργηθεί το AVIF σας, και δεν μένει εκεί.
