Εικόνα αυτό: η καλύτερη μορφή εικόνας για τον ιστό το 2019

JPEG, WEBP, HEIC, AVIF; Αυτός ο οδηγός θα σας βοηθήσει να επιλέξετε.

Μετά από δεκαετίες της ασυναγώνιστης κυριαρχίας του JPEG, τα τελευταία χρόνια έχουν δει την εμφάνιση νέων μορφών - WebP και HEIC - που προκαλούν αυτή τη θέση. Έχουν μόνο μερική αλλά σημαντική υποστήριξη από σημαντικούς παίκτες μεταξύ των προγραμμάτων περιήγησης ιστού και των λειτουργικών συστημάτων κινητής τηλεφωνίας. Μια άλλη νέα μορφή εικόνας - AVIF - αναμένεται να εισέλθει στη σκηνή το 2019 με την υπόσχεση της σάρωσης σε όλο τον ιστό.

Σε αυτό το άρθρο, θα ξεκινήσουμε με μια σύντομη αναθεώρηση των κλασικών μορφών, ακολουθούμενη από μια περιγραφή των WebP και HEIC / HEIF. Στη συνέχεια θα προχωρήσουμε στην εξερεύνηση του AVIF και θα τελειώσουμε με μια σύνοψη που θα συγκεντρώνει όλα τα κύρια σημεία.

Τα σχόλια σχετικά με τα πλεονεκτήματα και τα μειονεκτήματα βασίζονται τόσο στην ανασκόπηση των διαθέσιμων έγκυρων εκθέσεων όσο και στις παρατηρήσεις από πρώτο χέρι κατά την ανάπτυξη και ανάπτυξη εργαλείων για αγωγούς βελτιστοποίησης εικόνας στις ροές εργασιών ηλεκτρονικού εμπορίου.

Κλασικές μορφές εικόνας για τον ιστό με γενική υποστήριξη

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

GIF

Το GIF υποστηρίζει συμπίεση LZW χωρίς απώλειες και πολλαπλά πλαίσια που μας επιτρέπουν να παράγουμε απλά κινούμενα σχέδια.

Ο βασικός περιορισμός αυτής της μορφής είναι ότι περιορίζεται σε 256 χρώματα. Αυτό ήταν λογικό όταν δημιουργήθηκε στα τέλη της δεκαετίας του '80, αφού ο ίδιος περιορισμός εφαρμόστηκε στις υπάρχουσες οθόνες. Ωστόσο, με τη βελτίωση της τεχνολογίας απεικόνισης έγινε φανερό ότι δεν ήταν κατάλληλο να αναπαραχθούν ομαλές κλίσεις χρώματος, όπως αυτές που βρίσκονται σε φωτογραφικές εικόνες. Μπορούμε εύκολα να εντοπίσουμε την χρωματική ζώνη που παράγει.

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

JPEG

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

Με ένα συνηθισμένο βάθος 24 bit, παρέχει πολύ μεγαλύτερη ανάλυση χρώματος (δεν πρέπει να συγχέεται με το φάσμα ή τη γκάμα) από ό, τι το ανθρώπινο μάτι μπορεί να διακρίνει. Υποστηρίζει συμπίεση απώλειας με την εκμετάλλευση γνωστών μηχανισμών ανθρώπινης όρασης.

Τα μάτια μας είναι πιο ευαίσθητα σε μεσαίες κλίμακες παρά σε λεπτομερείς λεπτομέρειες. Κατά συνέπεια, το JPEG μας επιτρέπει να απορρίψουμε τις λεπτομερείς λεπτομέρειες (υψηλές χωρικές συχνότητες), από μια ποσότητα που ελέγχεται από έναν παράγοντα ποιότητας. Λιγότερη ποιότητα σημαίνει ότι διατηρούνται λιγότερες λεπτομέρειες. Εκτός αυτού, είμαστε πολύ πιο ευαίσθητοι σε λεπτομέρειες με υψηλή αντίθεση φωτεινότητας από τις λεπτομέρειες με μόνο χρωματική αντίθεση.

Έτσι, η JPEG εσωτερικά αναδημιουργεί εικόνες RGB (κόκκινη, πράσινη και μπλε) σε μία φωτεινότητα και δύο κανάλια χρωμάτων. Αυτό μας επιτρέπει να χρησιμοποιήσουμε υποδειγματογράφηση chroma για να απορρίψουμε περισσότερες λεπτομέρειες μόνο στα κανάλια chroma. Αξίζει να σημειωθεί ότι το JPEG κωδικοποιεί εικόνες σε μπλοκ των 8x8 εικονοστοιχείων.

Καθώς μειώνουμε τον παράγοντα ποιότητας και / ή εφαρμόζουμε πιο επιθετική υποδειγματοληψία χρωμάτων, αρχίζουμε να έχουμε αυξανόμενα αντικείμενα από χτυπήματα, φωτοστέφανα, φραγή ή θόλωση. Ένα ζήτημα με το JPEG είναι ότι ανάλογα με το περιεχόμενο της εικόνας, τα τεχνουργήματα μπορεί να εμφανίζονται σε διαφορετικές τιμές συντελεστή ποιότητας. Η πιο τρελή διαφορά εμφανίζεται όταν συγκρίνουμε τις επιδράσεις στη φυσική φωτογραφία με τις επιπτώσεις στα έργα τέχνης. Δεδομένου ότι τα έργα τέχνης (σχήματα, γραμματοσειρές) βασίζονται συνήθως σε αιχμηρές άκρες, αρχίζουν να παράγουν αντικείμενα ακόμα και για μικρές ποσότητες λεπτομερειών που απορρίπτονται.

Για τις φωτογραφίες, το JPEG προσφέρει εύκολα μείωση του βάρους του αρχείου κατά 10 φορές με ελάχιστα αξιοπρόσεχτα αντικείμενα, σε σύγκριση με τη συμπίεση χωρίς απώλειες.

PNG

Αυτή η μορφή απωλειών γραφικών αναπτύχθηκε για να αντικαταστήσει το GIF, αντιμετωπίζοντας τα ζητήματα χρώματος (και αδειοδότησης) χρώματος. Ήταν απαραίτητη για εικόνες με σημαντικό αριθμό έργων τέχνης, για τα οποία η JPEG παρήγαγε μεγάλα αντικείμενα ακόμα και με ελάχιστα ποσοστά συμπίεσης.

Υποστηρίζει διαφάνεια και βελτιωμένη συμπίεση σε σύγκριση με το GIF. Δεδομένου ότι δεν απορρίπτει πληροφορίες, το PNG δεν παράγει αντικείμενα. Φυσικά, αυτό είναι εις βάρος του βαρύτερου βάρους εικόνας παρουσία πολλών διαφορετικών διαβαθμίσεων χρώματος, σε σύγκριση με την απώλεια συμπίεσης.

Καταφέρνει να εκμεταλλευτεί ένα συνηθισμένο χαρακτηριστικό της τέχνης: Αντίθετα με τη φωτογραφία - που χαρακτηρίζεται από μια συνεχή ποικιλία χρωμάτων με λεπτές παραλλαγές - οι εικόνες έργων τέχνης συνήθως διαθέτουν λίγα καλά καθορισμένα χρώματα.

Έτσι, το PNG συμπιέζει τις εικόνες χαρτογράφοντας μεγάλες ποσότητες pixel σε μια απλή διακριτή παλέτα και εξοικονομώντας έτσι πολλά κομμάτια ως αποτέλεσμα. Σε σύγκριση με το GIF, παρέχει πολύ υψηλότερη ποιότητα με συνήθως πολύ λιγότερα byte.

Νέοι με μερική υποστήριξη: WEBP και HEIC με βάση HEVC

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

Η έκρηξη της κοινής χρήσης βίντεο - με τα κινητά δίκτυα στην καρδιά της - και η σταθερή αύξηση της ανάλυσης οθόνης οδήγησε τις προσπάθειες σε νέα πρότυπα κωδικοποίησης για την επίτευξη της υψηλότερης δυνατής απόδοσης στην συμπίεση.

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

WEBP

Η Google ανέπτυξε αυτή τη μορφή με στόχο την παροχή μιας ενιαίας μορφής εικόνας ικανής για την αντιμετώπιση των τυπικών περιπτώσεων χρήσης.

Είναι σημαντικό να επιδιωχθεί η επίτευξη ελαφρύτερων εικόνων από την JPEG, χωρίς ποινές στην οπτική ποιότητα. Χρησιμοποιεί πιο πολύπλοκες λειτουργίες - όπως η πρόβλεψη μπλοκ - και είναι παράγωγο του κωδικοποιητή βίντεο VP8. Υποστηρίζει συμπίεση χωρίς απώλειες και σε αντίθεση με την JPEG, επιτρέπει διαφάνεια και κινούμενα σχέδια που μπορούν να συνδυάσουν εικόνες κωδικοποιημένες τόσο με απώλεια όσο και απώλεια συμπίεσης.

Κατ 'αρχήν, θα πρέπει να χρησιμεύει ως αντικατάσταση των JPEG, PNG και GIF. Ένα σημαντικό μειονέκτημα ήταν η έλλειψη καθολικής υποστήριξης. Μέχρι πρόσφατα, το WebP είχε περιοριστεί στο λογισμικό που υποστηρίζεται από το Google, όπως το πρόγραμμα περιήγησης Chrome και οι μητρικές εφαρμογές Android.

Ωστόσο, με την ανακοίνωση ότι Edge και Firefox (εξαιρουμένου του iOS Firefox) πρόκειται να εισαγάγουν υποστήριξη WebP το 2019, είναι προφανώς κερδίζοντας έλξη. Αξίζει επίσης να σημειωθεί ότι η Apple - Safari και iOS - δεν υποστηρίζει ακόμα το WebP.

HEIC / HEIF

Αυτή η μορφή φέρνει μια σημαντική εξέλιξη σε δύο διαφορετικούς λόγους.

Πρώτον, το δοχείο αρχείων υποστηρίζει το μεγαλύτερο σύνολο χαρακτηριστικών μεταξύ των διαθέσιμων μορφών εικόνας. Υποστηρίζει, για παράδειγμα, εικόνες πολλαπλών καρέ με συμπίεση πολλαπλών καρέ - ένα βασικό χαρακτηριστικό για αποτελεσματικές εικόνες HDR, πολλαπλής εστίασης ή πολλαπλής προβολής.

Δεύτερον, υποστηρίζει πολλούς τύπους δεδομένων μη εικόνας με αξιοσημείωτη ευελιξία. Επί του παρόντος, οι περισσότερες εικόνες που χρησιμοποιούν αυτό το κοντέινερ είναι συμπιεσμένες με παράγωγο για εικόνες από τον κωδικοποιητή βίντεο H265 / HEVC, που έχουν αναπτυχθεί για να αντιμετωπίσουν αποτελεσματικά τις αναλύσεις των 4k και 8k που εμφανίζονται στις τελευταίες γενικές οθόνες. Η κωδικοποίηση HEVC περιλαμβάνει πιο σύνθετες λειτουργίες με λιγότερους περιορισμούς από την JPEG. Επιτυγχάνει μια πολύ υψηλότερη απόδοση συμπίεσης με το κόστος ελαφρώς υψηλότερων χρόνων κωδικοποίησης - δεν αποτελεί καθόλου πρόβλημα στις ροές εργασίας ιστού.

Όπως και το H265, η HEIC με βάση το HEVC υποστηρίζεται από την Apple. Διαθέτει εγγενή υποστήριξη στα iOS και macOS και υποστηρίζεται από προγράμματα περιήγησης Safari, αλλά - κυρίως λόγω προβλημάτων ευρεσιτεχνίας και αδειοδότησης - δεν υποστηρίζεται από τα υπόλοιπα (Android, Chrome, Firefox, Windows ή Edge).

Έτσι, τίθεται ένα μεγάλο ερώτημα: θα πρέπει να προσφέρουμε εναλλακτικές WEBP / HEIC και JPEG, με τις εκδόσεις PNG ως εναλλακτική λύση;

Ας εξετάσουμε κάθε περίπτωση ...

Πρέπει να εξυπηρετήσω τα παράγωγα WEBP;

Η Google υποστηρίζει ότι αυτή η μορφή παράγει πολύ ελαφρύτερες εικόνες από την JPEG με συγκρίσιμη ποιότητα. Ωστόσο, οι ανεξάρτητες δοκιμές έδειξαν ότι αυτό το αποτέλεσμα δεν είναι συνεπές σε διαφορετικά μέτρα ποιότητας και ότι η μείωση του βάρους στις περισσότερες περιπτώσεις αντισταθμίζεται από την αύξηση της θολότητας.

Στις δοκιμές μας με εικόνες ηλεκτρονικού εμπορίου, είδαμε εξοικονόμηση αρχείων για το WebP, αλλά με την τιμή περισσότερων θολών και λιγότερων λεπτομερειών. Παρόλο που παρατηρήσαμε επίσης μικρότερο κίνδυνο να χτυπήσουμε και να εμποδίσουμε τα τεχνουργήματα, τα οποία θεωρούσαμε πιο οπτικά ενοχλητικά από το θάμπωμα.

Καθώς το WebP στερείται υποστήριξης από προγράμματα περιήγησης και λειτουργικά συστήματα της Apple, δεν συνιστούμε γενικά την προβολή παραγώγων WebP που ανταγωνίζονται με το JPEG. Τέτοιες κινήσεις θα αυξήσουν την πολυπλοκότητα διαχείρισης των μέσων ενημέρωσης με περιορισμένα οφέλη.

Αυτή η κατάσταση θα αλλάξει εάν η Apple άρχισε να υποστηρίζει το WebP.

Εάν συνέβαινε αυτό, τότε το εκτεταμένο σύνολο χαρακτηριστικών του WebP και οι πιο φωτεινές εικόνες που παράχθηκαν ίσως αξίζει να το χρησιμοποιήσουν, απλοποιώντας αποτελεσματικά τις ροές εργασίας διαχείρισης εικόνας.

Για να δοκιμάσετε τον εαυτό σας WebP, ένα κλασικό εργαλείο όπως το ImageMagick είναι μια καλή επιλογή. Κάνει εύκολη τη σύγκριση των εκδόσεων εικόνας με διαφορετικές ρυθμίσεις ποιότητας και ανάλυσης τόσο για WebP όσο και για JPEG. Τα αποτελέσματα μπορούν να προβληθούν με το Chrome.

# Μετατροπή σε ποιότητα WEBP 60
μετατρέψτε input.jpg-ποιότητα 60 output_60.webp
# Μετατροπή σε ποιότητα JPEG 60
μετατρέψτε input.jpg - ποιότητα 60 output_60.jpg
# Μετατροπή σε ποιότητα WEBP 60 και πλάτος 450px
μετατρέψτε την είσοδο.jpg -αναπτύξτε 450 - ποιότητα 60 output_450_60.webp

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

Πρέπει να εξυπηρετήσω τα παράγωγα HEIC;

Το πλεονέκτημα του HEIC (πάνω από JPEG) είναι σαφές. Η μείωση του βάρους είναι σταθερά σημαντική - περίπου το 50% - χωρίς απώλεια οπτικής ποιότητας. Το σύνολο χαρακτηριστικών που υποστηρίζεται είναι απλά εκπληκτικό.

Το πρόβλημα είναι και πάλι η υποστήριξη προγράμματος περιήγησης και λειτουργικού συστήματος.

Δεδομένων των ζητημάτων σχετικά με τα διπλώματα ευρεσιτεχνίας του HEVC και των βαρέων δικαιωμάτων που συνδέονται με αυτά, μπορούμε να περιμένουμε ότι η υποστήριξη θα παραμείνει περιορισμένη σε εκείνες στον κόσμο της Apple. Δεδομένου ότι η JPEG είναι ήδη αποτελεσματική στη συμπίεση εικόνων, το 50% από κάτι μικρό μπορεί να μην αξίζει αρκετά για να προσθέσει πολυπλοκότητα στη ροή εργασιών επεξεργασίας εικόνας.

Ορισμένες περιπτώσεις που χρησιμοποιούν μεγάλες εικόνες, με μεγάλο ενδιαφέρον για την οπτική ποιότητα ΚΑΙ με ένα μεγάλο ποσοστό συσκευών της Apple στη βάση χρηστών τους, θα πρέπει να εξετάσουν το ενδεχόμενο να εξυπηρετήσουν αυτήν τη μορφή.

Η εκτέλεση δοκιμών με HEIC είναι πολύ εύκολη με ένα Mac. Η προεπισκόπηση μας επιτρέπει να εξάγουμε μια εικόνα σε HEIC και JPEG με διαφορετικές τιμές ποιότητας και διαφορετικές αναλύσεις. Δεν θα χρειαστεί να εκτελέσετε πολλές δοκιμές για να δείτε τη σαφή και συστηματική διαφορά μεταξύ τους.

Εξαγωγή σε HEIC στην προεπισκόπηση

Αν θέλετε να δοκιμάσετε κάτι πιο ευέλικτο που μπορεί να ενσωματωθεί σε μια ροή εργασίας επεξεργασίας εικόνας ιστού, το GPAC αξίζει μια ματιά.

Τι γίνεται με το AVIF;

Το AVIF είναι ο τελευταίος από τους υποψηφίους μας.

Όπως το WebP και το HEIC που βασίζονται στο HEVC, το AVIF είναι παράγωγο των τελευταίων προσπαθειών στα πρότυπα βίντεο. Χρησιμοποιεί επίσης δοχεία HEIC / HEIF και υποστηρίζει έτσι ένα πλήρες σύνολο χαρακτηριστικών, που περιλαμβάνει όλες τις διαθέσιμες βασικές μορφές. Παρέχει πολύ μεγαλύτερη απόδοση στη συμπίεση που κληρονόμησε από τη χρήση μηχανισμών κωδικοποίησης εντός πλαισίου AV1. Αυτά τα πλεονεκτήματα καθιστούν αυτή τη μορφή συναρπαστική.

Ένα άλλο σημαντικό πλεονέκτημα προέρχεται από τη συμμαχία για τα ανοικτά μέσα ενημέρωσης, τη μεγάλη κοινοπραξία πίσω από την ανάπτυξή της ως πλήρως ανοιχτή προσέγγιση, με ανοικτή άδεια, χωρίς δικαιώματα. Μεγάλοι παίκτες όπως το Google, το Netflix, το Adobe, το Mozilla, η Microsoft, το Facebook και το Amazon - οι κύριοι συντελεστές στον τομέα των γραφικών διαδικτύου και της βιντεοταινίας - υποστηρίζουν αυτή τη νέα μορφή και δημιουργούν μια υπόθεση για γρήγορη και ευρεία υιοθέτηση, τόσο στο λογισμικό όσο και στο υλικό. Ενώ η μορφή ροής ήταν κατεψυγμένη τον Μάρτιο του 2018 με διαθέσιμο κωδικό αναφοράς, οι πρώτες συσκευές με υποστήριξη υλικού για AV1 αναμένονται μέχρι το τέλος του 2019.

Τη στιγμή της σύνταξης αυτού του άρθρου, η υλοποίηση του AV1 με ανοιχτού κώδικα μπορεί να θεωρηθεί πειραματική και ακατάλληλη για παραγωγή.

Περίληψη

Το JPEG θα παραμείνει η βασική μορφή γενικών εικόνων για τον ιστό το 2019 και το PNG θα παραμείνει ως προεπιλεγμένη επιλογή για εικόνες με σημαντικά έργα τέχνης.

Ο λόγος? Καθολική υποστήριξη.

Οτιδήποτε ανοίγει μια εικόνα θα ανοίξει JPEG ή PNG το 2019, όπως και τα προηγούμενα χρόνια και δεκαετίες! Επομένως, καμία αμφιβολία ότι αυτές οι καθολικές μορφές θα παραμείνουν σε ισχύ εδώ και καιρό ακόμα.

Τα οφέλη του WebP παραμένουν αμφιλεγόμενα. Ένα σαφές πλεονέκτημα του WebP είναι η ικανότητά του να αντικαθιστά επίσης το PNG, ενδεχομένως απλοποιώντας τις ροές εργασίας επεξεργασίας εικόνας. Ωστόσο, χωρίς καθολική υποστήριξη, αυτό το πλεονέκτημα εξαφανίζεται. Αυτό μπορεί να αλλάξει μόνο αν η Apple αλλάξει το μυαλό τους και το WebP τελικά αποκτήσει καθολική έγκριση, τότε θα μπορούσε να χρησιμοποιηθεί ως αντικατάσταση για όλες τις εικόνες JPEG, PNG και GIF.
 
Αντίθετα, οι εικόνες HEIC που βασίζονται σε HEVC προσφέρουν σαφή πλεονεκτήματα, ειδικά για μεγάλες αναλύσεις. Εάν η επισκεψιμότητα των χρηστών iOS και macOS είναι σημαντική για έναν ιστότοπο με μεγάλες βαριές εικόνες, μπορεί να αξίζει να εξετάσετε εναλλακτικές λύσεις HEIC για αυτές, με πιθανές βελτιώσεις του UX, ειδικά για αργές συνδέσεις κινητής τηλεφωνίας. Εκτός από την επιτάχυνση, η HEIC διασφαλίζει την ποιότητα, σχεδόν απαλλαγμένη από τα ενοχλητικά αντικείμενα αποκλεισμού και κουδουνίσματος που πλήττουν τις επιθετικές πολιτικές JPEG.

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

Φυσικά, η χρήση μιας υπηρεσίας σύννεφο για βελτιστοποίηση εικόνας θα παραμείνει πάντα μια εύκολη και απλή εναλλακτική λύση για να γίνει η δουλειά.