Η επιλογή μορφής εικόνας ήταν κάποτε απλή: JPEG για φωτογραφίες, PNG για γραφικά, τέλος. Σήμερα η εικόνα είναι πιο σύνθετη — και πιο ανταποδοτική. Σύγχρονες μορφές όπως οι WebP και AVIF μπορούν να μειώσουν το βάρος μιας εικόνας κατά το ήμισυ ή και περισσότερο χωρίς ορατή απώλεια ποιότητας, κάτι που βελτιώνει άμεσα την ταχύτητα της σελίδας, την απόδοση στις αναζητήσεις και την εμπειρία όλων όσοι έχουν αργή σύνδεση.
Αυτός ο οδηγός εξηγεί πώς λειτουργεί στην πράξη κάθε βασική μορφή εικόνας για το web, πού υπερτερεί η καθεμία και πώς να επιλέγετε με σιγουριά. Απευθύνεται σε όποιον δημοσιεύει εικόνες στο web — προγραμματιστές, σχεδιαστές, marketers και ιδιοκτήτες καταστημάτων — και εστιάζει σε πρακτικές αποφάσεις αντί για θεωρία.
Ξεκινήστε με Δύο Ερωτήσεις
Σχεδόν κάθε απόφαση για τη μορφή καταλήγει σε δύο ιδιότητες της εικόνας σας.
**Είναι φωτογραφία ή γραφικό;** Οι φωτογραφίες (συνεχείς τόνοι, διαβαθμίσεις, απαλά περιγράμματα) συμπιέζονται καλά με μορφές *lossy* που απορρίπτουν λεπτομέρειες τις οποίες το μάτι μόλις που αντιλαμβάνεται. Τα γραφικά με αιχμηρά περιγράμματα, επίπεδα χρώματα και κείμενο — λογότυπα, εικονίδια, στιγμιότυπα οθόνης, διαγράμματα — χρειάζονται συμπίεση *lossless* ή διανυσματική μορφή για να παραμένουν ευκρινή.
**Χρειάζεστε διαφάνεια ή κίνηση;** Ένα λογότυπο που τοποθετείται πάνω σε διαφορετικά φόντα χρειάζεται κανάλι alpha. Ένα σύντομο κλιπ που επαναλαμβάνεται χρειάζεται υποστήριξη κίνησης. Αυτές οι απαιτήσεις αποκλείουν ή επιλέγουν μορφές πριν καν μπει στη συζήτηση το μέγεθος του αρχείου.
Κρατήστε στο μυαλό σας αυτές τις δύο απαντήσεις καθώς εξετάζουμε τις μορφές.
Οι Μορφές Εικόνας του Web με μια Ματιά
| Μορφή | Συμπίεση | Διαφάνεια | Κίνηση | Υποστήριξη browser | Ιδανική για |
|---|---|---|---|---|---|
| JPEG (JPG) | Lossy | Όχι | Όχι | Καθολική | Φωτογραφίες όπου μετράει η συμβατότητα |
| PNG | Lossless | Ναι (alpha) | Όχι | Καθολική | Λογότυπα, εικονίδια, στιγμιότυπα, επίπεδα γραφικά |
| WebP | Lossy + lossless | Ναι (alpha) | Ναι | Όλα τα σύγχρονα browser | Σύγχρονη προεπιλογή για φωτογραφίες και γραφικά |
| AVIF | Lossy + lossless | Ναι (alpha) | Ναι | Τα περισσότερα σύγχρονα browser | Μέγιστη αποδοτικότητα για φωτογραφίες και hero images |
| SVG | Διανυσματική (lossless) | Ναι | Ναι | Καθολική | Λογότυπα, εικονίδια, εικονογραφήσεις που πρέπει να κλιμακώνονται |
| GIF | Lossless, 256 χρώματα | 1-bit | Ναι | Καθολική | Παλαιού τύπου απλά animations |
JPEG (JPG): Η Καθολική Μορφή Φωτογραφίας
Η JPEG υπήρξε η προεπιλεγμένη φωτογραφική μορφή για τρεις δεκαετίες, και το μεγαλύτερο δυνατό σημείο της είναι η καθολική συμβατότητα. Κάθε browser, λειτουργικό σύστημα, κάμερα και εργαλείο επεξεργασίας τη διαβάζει χωρίς ερωτήσεις.
Η JPEG χρησιμοποιεί συμπίεση lossy: απορρίπτει τη λεπτομέρεια υψηλών συχνοτήτων στην οποία η ανθρώπινη όραση είναι λιγότερο ευαίσθητη και αποθηκεύει τα υπόλοιπα συμπαγώς. Σε ρυθμίσεις υψηλής ποιότητας η απώλεια είναι αόρατη· αν πιέσετε υπερβολικά τη συμπίεση, εμφανίζονται μπλοκ artifacts και φωτοστέφανα γύρω από τα περιγράμματα.
Οι περιορισμοί της μετράνε όσο και η εμβέλειά της. Η JPEG δεν έχει διαφάνεια, οπότε κάθε διαφανής περιοχή γίνεται συμπαγές φόντο, και δυσκολεύεται με τα αιχμηρά περιγράμματα και το κείμενο. Χρησιμοποιήστε JPEG όταν μια φωτογραφία πρέπει να ανοίγει παντού χωρίς κανέναν κίνδυνο συμβατότητας. Αν έχετε γραφικά ή χρειάζεστε διαφάνεια, μετατρέψτε JPG σε PNG αντί γι' αυτό.
PNG: Όταν Χρειάζεστε Διαφάνεια ή Τέλεια Λεπτομέρεια στο Pixel
Η PNG είναι lossless: αναπαράγει κάθε pixel ακριβώς όπως αποθηκεύτηκε, χωρίς artifacts συμπίεσης. Αυτό την κάνει το σωστό εργαλείο για λογότυπα, εικονίδια, στιγμιότυπα οθόνης, διαγράμματα και κάθε γραφικό με ευκρινή περιγράμματα ή μεγάλες περιοχές επίπεδου χρώματος. Υποστηρίζει επίσης πλήρη διαφάνεια alpha, ώστε οι εικόνες να κάθονται καθαρά πάνω σε οποιοδήποτε φόντο.
Το αντιστάθμισμα είναι το μέγεθος του αρχείου. Για φωτογραφίες, ένα PNG μπορεί να είναι αρκετές φορές μεγαλύτερο από ένα ισοδύναμο JPEG υψηλής ποιότητας. Ο εμπειρικός κανόνας είναι απλός: PNG για γραφικά και διαφάνεια, όχι για φωτογραφίες. Όταν μια φωτογραφία PNG επιβραδύνει μια σελίδα, μετατρέψτε PNG σε JPG ή, καλύτερα για το web, μετατρέψτε PNG σε WebP. Για πιο εμπεριστατωμένη ματιά, δείτε JPG vs PNG.
WebP: Η Πρακτική Σύγχρονη Προεπιλογή
Η WebP, που αναπτύχθηκε από την Google, είναι η μορφή στην οποία θα έπρεπε να καταφεύγουν πρώτα τα περισσότερα site σήμερα. Υποστηρίζει τόσο lossy όσο και lossless συμπίεση, πλήρη διαφάνεια alpha και κίνηση — καλύπτοντας σχεδόν κάθε χρήση σε μία μόνο μορφή. Η Google αναφέρει ότι οι εικόνες lossy WebP είναι συνήθως 25 έως 34 τοις εκατό μικρότερες από συγκρίσιμα JPEG, και η lossless WebP είναι συνήθως περίπου 26 τοις εκατό μικρότερη από PNG.
Η υποστήριξη δεν αποτελεί πια εμπόδιο: η WebP λειτουργεί σε κάθε τρέχον μεγάλο browser, συμπεριλαμβανομένου του Safari από την έκδοση 14. Για τη συντριπτική πλειονότητα των επισκεπτών μπορείτε να σερβίρετε WebP απευθείας, γι' αυτό και αποτελεί λογική προεπιλογή τόσο για φωτογραφίες όσο και για γραφικά. Για να την υιοθετήσετε, μετατρέψτε JPG σε WebP ή μετατρέψτε PNG σε WebP. Για πληρέστερη επεξήγηση, διαβάστε Τι Είναι το WebP.
AVIF: Η Πιο Αποδοτική, με Μερικά Αντισταθμίσματα
Η AVIF είναι η νεότερη mainstream μορφή, χτισμένη πάνω στον codec βίντεο AV1 από την Alliance for Open Media. Είναι η πρωταθλήτρια της αποδοτικότητας: σε συγκρίσιμη οπτική ποιότητα, τα αρχεία AVIF είναι συχνά περίπου στο μισό μέγεθος των JPEG και αισθητά μικρότερα από τα WebP. Διαχειρίζεται επίσης υψηλό δυναμικό εύρος (HDR), ευρεία χρωματικά γκάμα, διαφάνεια και κίνηση.
Υπάρχουν δύο πρακτικά αντισταθμίσματα. Η κωδικοποίηση είναι πιο αργή και πιο απαιτητική από αυτήν της JPEG ή της WebP, κάτι που έχει σημασία για μεγάλες παρτίδες. Και παρότι η υποστήριξη είναι πλέον ευρεία — Chrome, Firefox, Edge και Safari 16.4 και νεότερα — παραμένει ελαφρώς πίσω από τη WebP, οπότε ένα εφεδρικό σχέδιο (fallback) είναι συνετό. Η AVIF λάμπει σε μεγάλες hero images και σελίδες με πολλές φωτογραφίες, όπου κάθε kilobyte μετράει. Δοκιμάστε την μετατρέποντας JPG σε AVIF ή PNG σε AVIF, και δείτε Τι Είναι το AVIF για λεπτομέρειες.
SVG: Για Οτιδήποτε Πρέπει να Κλιμακώνεται
Η SVG είναι θεμελιωδώς διαφορετική: είναι διανυσματική μορφή, που περιγράφει σχήματα με μαθηματικά αντί για ένα πλέγμα από pixel. Ένα SVG παραμένει απόλυτα ευκρινές σε οποιοδήποτε μέγεθος, από ένα favicon έως μια διαφημιστική πινακίδα, ενώ παραμένει μικροσκοπικό για απλά γραφικά. Είναι η σωστή επιλογή για λογότυπα, εικονίδια και εικονογραφήσεις φτιαγμένες από συμπαγή σχήματα και γραμμές.
Η SVG δεν είναι κατάλληλη για φωτογραφίες, οι οποίες δεν έχουν καθαρή γεωμετρία προς περιγραφή. Όμως για εικονίδια διεπαφής και στοιχεία επωνυμίας, τίποτα δεν ξεπερνά την κλιμακωσιμότητα και την ευκρίνειά της. Μάθετε περισσότερα στο Τι Είναι ένα Αρχείο SVG.
Ένα Απλό Πλαίσιο Απόφασης
Όταν δεν είστε σίγουροι, ακολουθήστε με τη σειρά τα παρακάτω:
- **Είναι λογότυπο, εικονίδιο ή επίπεδη εικονογράφηση;** Χρησιμοποιήστε SVG.
- **Είναι γραφικό ή στιγμιότυπο οθόνης, ή χρειάζεται διαφάνεια ή τέλεια περιγράμματα στο pixel;** Χρησιμοποιήστε PNG, ή lossless WebP για μικρότερα αρχεία.
- **Είναι φωτογραφία για σύγχρονο κοινό;** Χρησιμοποιήστε AVIF για το μικρότερο μέγεθος, WebP για την καλύτερη ισορροπία μεγέθους και εμβέλειας.
- **Πρέπει να ανοίγει κυριολεκτικά παντού, ακόμη και σε παλιό λογισμικό;** Χρησιμοποιήστε JPEG.
- **Είναι κινούμενη;** Χρησιμοποιήστε WebP ή, καλύτερα, μια πραγματική μορφή βίντεο όπως το MP4 — όχι GIF.
Σερβίροντας Σύγχρονες Μορφές με Ασφάλεια
Δεν χρειάζεται να επιλέξετε μία μορφή για όλους. Το στοιχείο picture της HTML επιτρέπει στον browser να διαλέξει την καλύτερη μορφή που υποστηρίζει: βάλτε πρώτα AVIF, μετά WebP, και έπειτα ένα εφεδρικό JPEG ή PNG, και κάθε επισκέπτης κατεβάζει μόνο ένα αρχείο. Οι σύγχρονοι browser παίρνουν την αποδοτική έκδοση και οι παλαιότεροι παίρνουν ένα εγγυημένο fallback, χωρίς να απαιτείται JavaScript.
Αυτό έχει σημασία πέρα από την αισθητική. Οι εικόνες αποτελούν συνήθως το μεγαλύτερο μέρος μιας σελίδας, οπότε η επιλογή μορφής έχει άμεση επίδραση στο Largest Contentful Paint, ένα από τα Core Web Vitals της Google, και επομένως τόσο στην εμπειρία χρήστη όσο και στην απόδοση στις αναζητήσεις. Οι μικρότερες, καλά επιλεγμένες εικόνες είναι από τις πιο αποδοτικές βελτιώσεις ταχύτητας που υπάρχουν.
Πώς να Μετατρέψετε τις Υπάρχουσες Εικόνες σας
Σπάνια χρειάζεται να κάνετε εκ νέου εξαγωγή από την αρχή. Για να εκσυγχρονίσετε μια υπάρχουσα βιβλιοθήκη, μετατρέψτε επιτόπου: JPG σε WebP, PNG σε WebP, JPG σε AVIF, ή PNG σε JPG για μέγιστη συμβατότητα. Κρατήστε τα πρωτότυπα masters υψηλής ποιότητας και δημιουργήστε σύγχρονες μορφές από αυτά όποτε χρειάζεται.