1. Αρχική
2. Μορφές εικόνας

Σύγκριση μορφών: JPEG, PNG, WebP και AVIF

Οι τέσσερις αυτές μορφές καλύπτουν πάνω από το 99% των εικόνων στο σύγχρονο web. Κάνουν πολύ διαφορετικές επιλογές μεταξύ συμπίεσης, διαφάνειας, animation και υποστήριξης σε περιηγητές. Παρακάτω ένας πρακτικός οδηγός για τη σωστή επιλογή.

Σύγκριση δίπλα-δίπλα

Γρήγορη επισκόπηση· η πλήρης ανάλυση ανά μορφή ακολουθεί.

JPEG — η καθολική βάση

Πώς λειτουργεί

Το JPEG (Joint Photographic Experts Group) τυποποιήθηκε το 1992 και είναι η παλαιότερη από τις τέσσερις μορφές. Χρησιμοποιεί απωλεστικό μετασχηματισμό συνημιτόνων σε μπλοκ 8×8, μετά κβάντιση και εντροπική κωδικοποίηση. Η ποιότητα ελέγχεται με αριθμό 1–100. Σύγχρονοι encoders όπως το MozJPEG εξάγουν 10–20% περισσότερο από τη μορφή χωρίς να αλλάζουν το bitstream, ώστε κάθε αποκωδικοποιητής JPEG να τα διαβάζει.

Καλή για

Φωτογραφικό περιεχόμενο με ομαλούς τόνους και πολλή λεπτομέρεια — πορτρέτα, τοπία, φωτογραφίες προϊόντων, κεντρικές εικόνες (hero).

Πλεονεκτήματα

• Υποστηρίζεται από κάθε προβολέα εικόνων.
• Αποκωδικοποίηση με επιτάχυνση υλικού σχεδόν παντού.
• Ώριμο οικοσύστημα βελτιστοποιητών (MozJPEG, jpegli).

Μειονεκτήματα

• Χωρίς κανάλι άλφα — τα φόντα πρέπει να ενοποιηθούν.
• Τεχνουργήματα μπλοκ σε κείμενο, γραμμική τέχνη και αιχμηρές άκρες.
• Μόνο 8 bit ανά κανάλι.

PNG — χωρίς απώλειες και διαφανές

Πώς λειτουργεί

Το PNG (Portable Network Graphics) δημιουργήθηκε στα μέσα της δεκαετίας του ’90 ως ελεύθερη, χωρίς διπλώματα αντικατάσταση του GIF. Είναι αυστηρά χωρίς απώλειες: συμπίεση DEFLATE πάνω σε φίλτρα ανά γραμμή εικονοστοιχείων. Βελτιστοποιητές όπως το oxipng (Rust port του optipng) δοκιμάζουν συνδυασμούς φίλτρου/συμπίεσης για το μικρότερο μέγεθος χωρίς να αλλάξει ένα εικονοστοιχείο.

Καλή για

Γραφικά UI, εικονίδια, στιγμιότυπα, διαγράμματα, γραμμική τέχνη, λογότυπα με επίπεδα χρώματα και οτιδήποτε χρειάζεται πραγματικό κανάλι άλφα.

Πλεονεκτήματα

• Χωρίς απώλειες — τα εικονοστοιχεία επιβιώνουν του round-trip ανέπαφα.
• Πλήρες 8-bit άλφα, έως 16 bit ανά κανάλι.
• Καθολική υποστήριξη.

Μειονεκτήματα

• Μεγάλο σε φωτογραφίες — συχνά πολλαπλάσιο του JPEG/WebP/AVIF.
• Χωρίς animation στην αρχική προδιαγραφή (το APNG είναι μεταγενέστερη επέκταση).

WebP — η μορφή «web-first» της Google

Πώς λειτουργεί

Το WebP κυκλοφόρησε από την Google το 2010, βασισμένο στο codec βίντεο VP8 και αργότερα επεκτάθηκε με ξεχωριστή λειτουργία χωρίς απώλειες. Υποστηρίζει συμπίεση με και χωρίς απώλειες στο ίδιο container, με προαιρετικό άλφα και animation. Σε λειτουργία με απώλειες συνήθως νικά το JPEG κατά 25–35% στην ίδια ποιότητα. Σε λειτουργία χωρίς απώλειες συχνά νικά το PNG κατά 20–30%.

Καλή για

Γενική χρήση στο web όταν το AVIF δεν είναι ακόμη ασφαλές — φωτογραφίες, sprites UI με διαφάνεια, αντικαταστάσεις animated GIF και επίπεδο εφεδρικής μορφής κάτω από το AVIF.

Πλεονεκτήματα

• Μία μορφή για φωτογραφίες, γραφικά, άλφα και animation.
• Σημαντικά μικρότερο από JPEG και PNG για συγκρίσιμη ποιότητα.
• Ευρεία υποστήριξη: όλοι οι σύγχρονοι περιηγητές από το 2020.

Μειονεκτήματα

• 8 bit ανά κανάλι — όχι HDR σε αυτή την έννοια.
• Αποκωδικοποίηση μερικές φορές πιο αργή από JPEG σε ασθενείς συσκευές.

AVIF — η τρέχουσα κορυφή στη συμπίεση

Πώς λειτουργεί

Το AVIF (AV1 Image File Format) είναι στατικό προφίλ εικόνας του codec βίντεο AV1, από το 2019 (Alliance for Open Media). Υποστηρίζει έως 12-bit χρώμα, πλήρες άλφα, HDR, ευρεία γκάμα και σύνθεση κόκκου φιλμ (film grain). Ο αναφορικός encoder (aom-av1 μέσω libavif) είναι αργός αλλά εξάγει την καλύτερη πρακτική συμπίεση σήμερα για πραγματικές φωτογραφίες.

Καλή για

Κεντρικές εικόνες (hero), φωτογραφικές συλλογές και όπου η εξοικονόμηση στο δίκτυο έχει μεγαλύτερη σημασία από τον χρόνο του επεξεργαστή. Λειτουργεί καλά ως ανώτερο επίπεδο σε στοιχείο <picture>.

Πλεονεκτήματα

• Κορυφαία συμπίεση — συχνά 40–60% κάτω από JPEG.
• Υποστηρίζει άλφα, animation, HDR, ευρεία γκάμα και βάθος 10/12 bit.
• Χωρίς royalties, ανοιχτό.

Μειονεκτήματα

• Αργή κωδικοποίηση — σχεδιάστε build-time ή ασύγχρονη κωδικοποίηση.
• Το Safari πρόσθεσε υποστήριξη στην έκδοση 16 (2022).
• Λιγότερο κομψό για συνθετικά γραφικά από WebP χωρίς απώλειες ή PNG.

Ποια μορφή να χρησιμοποιήσω;

• Φωτογραφίες, κεντρικές εικόνες (hero) πλήρους πλάτους: AVIF ως κύρια μορφή, WebP και JPEG ως εφεδρικές μορφές μέσω <picture>.
• Γραφικά UI με διαφάνεια (εικονίδια, λογότυπα): PNG για μέγιστη συμβατότητα, WebP χωρίς απώλειες για ελαφρύτερα αρχεία.
• Γραμμική τέχνη, στιγμιότυπα, διαγράμματα: PNG (ή WebP χωρίς απώλειες) — JPEG/AVIF αφήνουν τεχνουργήματα σε αιχμηρές άκρες.
• Αντικατάσταση animated GIF: WebP ή AVIF — δραματικά μικρότερα, με πραγματικό άλφα.
• Μία μορφή για κάθε περιηγητή σήμερα: JPEG για φωτογραφίες, PNG για γραφικά. Όχι η μικρότερη επιλογή, αλλά μηδενικό χρέος συμβατότητας.

Στην πράξη δεν χρειάζεται να διαλέξετε μία: σερβίρετε AVIF πρώτα, WebP δεύτερο και JPEG ή PNG τελευταία μέσα σε <picture> — κάθε περιηγητή παίρνει τη μικρότερη έκδοση που μπορεί να αποκωδικοποιήσει.