Φανταστείτε αυτό: την καλύτερη μορφή εικόνας για τον Ιστό το 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 (Κόκκινο, Πράσινο και Μπλε) σε μία φωτεινότητα και δύο κανάλια χρωμάτων. Αυτό μας επιτρέπει να χρησιμοποιήσουμε το δείγμα χρωμάτων για να απορρίψουμε περισσότερες λεπτομέρειες μόνο στα κανάλια χρωμάτων. Αξίζει να σημειωθεί ότι το JPEG κωδικοποιεί εικόνες σε μπλοκ των 8x8 pixel.

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

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

PNG

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

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

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

Έτσι, το PNG συμπιέζει τις εικόνες χαρτογραφώντας μεγάλες ποσότητες pixel σε μια απλή διακριτή παλέτα και εξοικονομώντας πολλά bit ως αποτέλεσμα. Σε σύγκριση με το 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, πολλαπλές εστίασεις ή πολλαπλές προβολές.

Secondly, it supports many types of non-image data with a remarkable flexibility. Currently, most images using this container are compressed with a derivative for images from the H265/HEVC video codec, developed to efficiently cope with the 4k and 8k resolutions featured by the latest generation displays. HEVC coding involves more complex operations with fewer restrictions than JPEG. It achieves a much higher compression efficiency at the cost of slightly higher coding times — not a problem at all in web workflows.

Like H265, HEIC based on HEVC is backed by Apple. It has native support in iOS and macOS, but — mostly due to patent and licensing issues — it is not supported by the rest of platforms (Android, Windows). Even in macOS, Safari doesn't support it. iOS apps appear to be the only viable usecase for HEIC in the web.

So a big question arises: should we offer WEBP/HEIC alternatives and JPEG, with PNG versions as a fallback?

Let’s look at each case...

Should I serve WEBP derivatives?

Google claims that this format produces much lighter images than JPEG with comparable quality. However, independent tests have pointed that this result is not consistent across different measures of quality, and weight reduction is, in most cases, balanced by increasing blurriness.

In our own tests with ecommerce images, we saw file savings for WebP, but at the price of more blur and less detail. Although, we also saw less risk of ringing and blocking artifacts, which we’d consider more visually annoying than blur.

As WebP lacks support by Apple browsers and operative systems, we do not generally recommend serving WebP derivatives competing with JPEG. Such moves would increase media management complexity with limited benefits.

This situation would change if Apple started supporting WebP.

If this were the case, then the extended feature set of WebP and the lighter images produced may be worth its use, effectively simplifying image management workflows.

To try WebP yourself, a classic tool like ImageMagick is a good option. It makes easy-to-compare image versions with different settings of quality and resolution for both WebP and JPEG. Results can be viewed with Chrome.

# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webp

Different combinations of quality and resolution will have different effects in each case, as the compression algorithms work differently. So, check your relevant file sizes on several images to get a grasp of the potential savings and the best settings for a given use case.

Should I serve HEIC derivatives?

The advantage of HEIC (over JPEG) is clear. Weight reduction is consistently significant — about 50% — without loss of visual quality. The feature set supported is simply amazing.

The problem again is browser and operative system support.

Given the patent issues of HEVC and the hefty royalties associated, we can expect support to remain restricted to those in the Apple world. Since JPEG is already efficient in compressing images, the 50% of something small might not be worth enough to add complexity to our image processing workflow.

Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.

Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.

If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.

What about AVIF?

AVIF is the last of our contenders.

Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.

Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.

At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.

Summary

JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.

The reason? Universal support.

Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.

The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.

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

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

Φυσικά, η χρήση μιας υπηρεσίας cloud - μέσω ενός API βελτιστοποίησης εικόνας ή ενός πρόσθετου βελτιστοποίησης εικόνας - θα παραμείνει πάντα μια εύκολη και απλή εναλλακτική λύση για την ολοκλήρωση της εργασίας.