Η μορφή εικόνας AVIF για ιστότοπους βελτιώνει το SEO, την ταχύτητα φόρτωσης και την εμπειρία χρήστη.

Λιγότερο από το 0,1 % όλων των ιστότοπων χρησιμοποιούν τη μορφή AVIF και εκμεταλλεύονται την καλύτερη ευκαιρία για μορφές εικόνων να βελτιώσουν μετρήσιμα την ταχύτητα του ιστότοπου , την εμπειρία του χρήστη και την online ορατότητα στη Google. Όλοι οι υπόλοιποι φορείς εκμετάλλευσης ιστοτόπων δεν αξιοποιούν ακόμη τις δυνατότητες που προσφέρει το AVIF ως μορφή εικόνας. Αυτό το άρθρο έχει ως στόχο να αποτελέσει μια λύση και να σας ενθαρρύνει να εξετάσετε σοβαρά τη μορφή AVIF και, ιδανικά, να τη χρησιμοποιήσετε για τις εικόνες σας στον ιστότοπό σας.

Έχετε δοκιμάσει ποτέ τη διεύθυνση URL του ιστοτόπου σας με το Google PageSpeed Insights για να δείτε πώς αποδίδει; Αν όχι, κάντε το άμεσα με τον δικό σας ιστότοπο.

Επιτρέψτε μου να μαντέψω, δεν βλέπετε επί του παρόντος αυτή την τιμή στον ιστότοπό σας, έτσι δεν είναι;

Όσο χαμηλότερη είναι η βαθμολογία σας, τόσο περισσότερη βελτιστοποίηση χρειάζεται ο ιστότοπός σας προκειμένου να βελτιωθεί η PageSpeed σας. Αν ανοίξετε τις συστάσεις για τη βελτίωση της ταχύτητας σελίδας σας από τη Google πιο κάτω στη σελίδα του εργαλείου δοκιμής, μπορεί να είναι πολύ πιθανό ένα σημείο να περιλαμβάνει σύγχρονες μορφές εικόνας - αν εξακολουθείτε να χρησιμοποιείτε μορφές αρχείων JPG ή PNG για τις εικόνες σας.

Αυτός είναι ένας από τους πολλούς λόγους για τους οποίους δεν επιτυγχάνετε ακόμη κορυφαίες βαθμολογίες με τον ιστότοπό σας στο PageSpeed Insights και πιθανώς δεν περνάτε ούτε το Core Web Vitals.

Τόσο οι εικόνες στον ιστότοπο του πρακτορείου μας 4eck-media.de όσο και εδώ στο ίδιο το TutKit.com φορτώνονται σε μορφή αρχείου AVIF - εξαιρετικά γρήγορη, εξαιρετικά μικρή και σε πειστική ποιότητα. Και το AVIF μας βοηθά να επιτύχουμε την υψηλότερη δυνατή ταχύτητα PageSpeed.

Η σχετικά νέα μορφή αρχείου για εικόνες ιστού είναι ελάχιστα γνωστή σε κανέναν, γι' αυτό και ήρθε η ώρα να παρουσιάσουμε τη σύγχρονη μορφή εικόνας AVIF για ιστότοπους με όλα τα πλεονεκτήματά της για το SEO, το PageSpeed και την εμπειρία του χρήστη.

Ο πίνακας περιεχομένων για το άρθρο AVIF:

Τι είναι ο μορφότυπος εικόνας AVIF;

Το AVIF είναι ένας νέος μορφότυπος εικόνας που δημοσιεύτηκε το 2020 από τη Συμμαχία για τα Ανοικτά Μέσα (AOMedia). Ο μορφότυπος βασίζεται στον αλγόριθμο συμπίεσης χωρίς απώλειες AV1 και προσφέρει μια σειρά πλεονεκτημάτων σε σχέση με άλλους κοινούς μορφότυπους εικόνας, όπως το JPEG και το PNG, καθώς και τον μορφότυπο WebP.

Οι εικόνες AVIF είναι σημαντικά μικρότερες από τις εικόνες JPEG με την ίδια ποιότητα εικόνας. Αυτό οφείλεται στο γεγονός ότι ο AV1 προσφέρει σημαντικά πιο αποτελεσματική συμπίεση. Μια εικόνα AVIF με την ίδια ποιότητα εικόνας όπως μια εικόνα JPEG μπορεί συχνά να είναι έως και 50 % μικρότερη.

Οι εικόνες AVIF προσφέρουν επίσης μεγαλύτερο βάθος χρώματος από τις εικόνες JPEG. Οι εικόνες AVIF μπορούν να αποθηκεύσουν βάθος χρώματος έως και 12 bit, ενώ οι εικόνες JPEG υποστηρίζουν μόνο βάθος χρώματος 8 bit. Αυτό έχει ως αποτέλεσμα μια ευρύτερη γκάμα χρωμάτων και πιο ρεαλιστικά χρώματα στις εικόνες AVIF.

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

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

Ακολουθούν ορισμένα από τα πλεονεκτήματα του AVIF έναντι άλλων δημοφιλών μορφών εικόνας:

• Καλύτερα ποσοστά συμπίεσης: Οι εικόνες AVIF είναι σημαντικά μικρότερες από τις εικόνες JPEG και PNG με την ίδια ποιότητα εικόνας.
• Υψηλότερο βάθος χρώματος: Οι εικόνες AVIF υποστηρίζουν βάθος χρώματος έως και 12 bit, ενώ οι εικόνες JPEG και PNG υποστηρίζουν μόνο βάθος χρώματος 8 bit.
• Υποστήριξη καναλιών άλφα: Οι εικόνες AVIF μπορούν να αποθηκεύουν διαφάνεια, οπότε αντικαθιστούν επίσης τον λόγο για τον οποίο οι εικόνες PNG ή ακόμη και WebP χρησιμοποιούνται ακόμη και σήμερα σε ιστότοπους.
• Μορφή ανοικτού κώδικα: Η AVIF είναι μορφή ανοικτού κώδικα και υποστηρίζεται από μεγάλο αριθμό παρόχων λογισμικού και υλικού.
• Το AVIF είναι μια πειστική μορφή εικόνας για ιστότοπους που προσφέρει πολλά πλεονεκτήματα σε σχέση με άλλες κοινές μορφές (συμπεριλαμβανομένου του WEBP).

Είναι προβλέψιμο ότι το AVIF θα διαδραματίζει όλο και πιο σημαντικό ρόλο στην αποθήκευση και την εμφάνιση εικόνων σε ιστότοπους στο μέλλον - ιδίως επειδή η Google έχει τοποθετήσει τη χρήση του απευθείας στις συστάσεις στα αποτελέσματα του PageSpeed Insights και όλα τα κοινά προγράμματα περιήγησης υποστηρίζουν πλέον το AVIF στις νεότερες εκδόσεις.

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

Γιατί το AVIF προσφέρει πλεονεκτήματα για το SEO, την ταχύτητα σελίδας και την εμπειρία χρήστη;

Το μεγαλύτερο πλεονέκτημα γίνεται πιο ορατό όταν συγκρίνουμε τις εικόνες στην προβολή. Ως παράδειγμα, έχω δημιουργήσει μέσω του Midjourney μια εικόνα ενός κοπαδιού ψαριών κλόουν με ανάλυση 1024x1024 σε μορφή PNG.

• Αρχικό PNG: 1,43 MB
• Βελτιστοποιημένη μέσω TinyPNG: 393 KB - 73 % εξοικονόμηση

Στη συνέχεια μετέτρεψα το αρχικό αρχείο PNG μέσω του squoosh.app με το εξής αποτέλεσμα:

• Βελτιστοποιημένο ως WebP μέσω Squoosh: 84 kb - 94 % εξοικονόμηση
• Βελτιστοποίηση ως AVIF μέσω Squoosh: 42 kb - 97 % εξοικονόμηση

Ως αποτέλεσμα, η εικόνα AVIF έχει μόνο το μισό μέγεθος της εικόνας WebP με την ίδια οπτική ποιότητα. Πολλές άλλες δοκιμές έχουν δείξει ότι τα τεχνουργήματα συμπίεσης, τα οποία εμφανίζονται όταν τα αρχεία JPG συμπιέζονται υπερβολικά, γίνονται ελαφρώς ορατά μόνο όταν η ποιότητα ρυθμίζεται κάτω από 30 προς 20 ή χαμηλότερα. Στην ποιότητα 30, ακόμη και τα στοιχεία κειμένου στα γραφικά pixel παραμένουν ακόμα όμορφα ευκρινή χωρίς τεχνουργήματα συμπίεσης.

Αυτή η εξοικονόμηση πόρων σε ιστότοπους με μεγάλο όγκο εικόνων δεν μπορεί να υπερτονιστεί.

AVIF για καλύτερες τιμές SEO, ταχύτητα σελίδας και εμπειρία χρήστη

Η Google έχει ήδη αναγάγει τις ζωτικές βασικές αξίες (Core Web Vitals) ενός ιστότοπου σε παράγοντα κατάταξης το 2021. Αυτές περιλαμβάνουν, για παράδειγμα, την ταχύτητα φόρτωσης, δηλαδή πόσο γρήγορα εμφανίζεται το κύριο περιεχόμενο στον χρήστη σας. Η Google ορίζει χρόνους έως 2,5 δευτερόλεπτα ως καλή τιμή που πρέπει να επιδιώκουν οι διαχειριστές ιστότοπων για τους χρήστες τους.

Τα μεγαλύτερα δεδομένα εικόνας προκαλούν μεγαλύτερους χρόνους φόρτωσης. Τα Core Web Vitals θεωρούνται τότε ότι έχουν αποτύχει.

Υπάρχει επίσης ένα δεύτερο πρόβλημα. Εάν στον ιστότοπο τοποθετηθούν μεγαλύτερα δεδομένα εικόνας που βασίζονται σε PNG ή JPEG, για παράδειγμα, είναι πιθανό να έχει ήδη φορτωθεί το περιεχόμενο κειμένου, ενώ η φόρτωση μιας εικόνας διαρκεί περισσότερο. Αυτό μπορεί να οδηγήσει στις λεγόμενες σωρευτικές αλλαγές διάταξης, δηλαδή σε μικρές μετατοπίσεις που σπρώχνουν τις χαμηλότερες περιοχές του ιστοτόπου προς τα κάτω όταν εμφανίζεται μια εικόνα, όπου ανήκουν. Στη Google δεν αρέσουν τέτοιες σωρευτικές αλλαγές διάταξης και τις αναφέρει ως σφάλματα CLS, τα οποία έχουν ως αποτέλεσμα να μην περνούν τα Core Web Vitals.

Επιπλέον, είναι μεγάλη αίσθηση για κάθε επισκέπτη του ιστότοπου όταν οι σελίδες λειτουργούν ομαλά και το περιεχόμενο είναι άμεσα διαθέσιμο με ένα κλικ. Μπορείτε επίσης να τοποθετήσετε εικόνες καλύτερης ποιότητας στον ιστότοπο χωρίς να τις συμπιέσετε τόσο πολύ ώστε να είναι ορατά τα τεχνουργήματα συμπίεσης. Το μέγεθος του αρχείου παραμένει μικρό σε σύγκριση με το PNG ή το JPEG, ακόμη και με μετατροπή χωρίς απώλειες ή κανονική συμπίεση. Συνεπώς, η μορφή AVIF βελτιώνει την εμπειρία χρήσης για κάθε χρήστη με διάφορους τρόπους. Περνώντας τα Core Web Vitals, η Google μας αναγκάζει να κάνουμε κάτι για τους επισκέπτες μας, ώστε να μην απογοητεύονται όταν επισκέπτονται τον ιστότοπό μας.

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

Υποστήριξη προγράμματος περιήγησης για εικόνες AVIF

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

Στην περίπτωση του μορφότυπου εικόνας AVIF , ο καθοριστικός παράγοντας είναι το κατά πόσον τα τρέχοντα προγράμματα περιήγησης υποστηρίζουν πλέον τον μορφότυπο. Ο δικτυακός τόπος caniuse.com παρέχει σχετικές πληροφορίες: https://caniuse.com/avif

Το AVIF υποστηρίζεται ήδη από σχεδόν το 85 % των προγραμμάτων περιήγησης παγκοσμίως. Στη Γερμανία, το ποσοστό εξακολουθεί να είναι 80,33% στις 2 Σεπτεμβρίου ... λοιπόν, στη Γερμανία, όπου τα κενά στο δίκτυο κινητής τηλεφωνίας εξακολουθούν να αποτελούν μέρος της καθημερινότητας και ορισμένες περιοχές εξακολουθούν να υποφέρουν από κουτσό Διαδίκτυο (συμπεριλαμβανομένης της περιοχής μου: ενώ ταξιδεύω με gigabit στο γραφείο, στο γραφείο του σπιτιού μου έχω μόνο 9 MBit/sec).

Έτσι, μπορείτε να δείτε ότι το AVIF υποστηρίζεται από τα πιο σημαντικά προγράμματα περιήγησης εδώ και αρκετό καιρό.

Πόσοι ιστότοποι χρησιμοποιούν ήδη τη μορφή AVIF;

Παρόμοια με το caniuse.com, το w3tech.com σας παρέχει στατιστικές πληροφορίες σχετικά με τη χρήση ορισμένων τεχνολογιών. Αυτό ισχύει και για τις μορφές εικόνας που χρησιμοποιούνται σε ιστότοπους.

Αυτό είναι το ποσοστό όλων των ιστότοπων που χρησιμοποιούν (από τον Σεπτέμβριο του 2023)

• PNG: 82,1%
• JPEG: 78 %
• SVG: 55,2 %
• GIF: 21,7
• WebP: 9,2 %
• ICO και BMP: 0,2 % το καθένα
• AVIF: 0,1 % (στρογγυλοποιημένο προς τα πάνω)
  

Αυτό σημαίνει ότι λιγότερο από το 0,07 % όλων των ιστότοπων χρησιμοποιούν σήμερα τη μορφή AVIF. Τι; Αυτό εξακολουθεί να είναι εξωφρενικά χαμηλό. Αλλά ε, είναι μια ευκαιρία για εσάς να γίνετε τεχνολογική αιχμή του δόρατος στη χρήση σύγχρονων μορφών εικόνας. Η καμπύλη στη δεξιά εικόνα δείχνει ξεκάθαρα ότι η χρήση αυξάνεται μήνα με το μήνα ... εξακολουθεί να κυμαίνεται στο χιλιοστό. Αυτό σίγουρα θα επιταχυνθεί σύντομα.

Είναι ενδιαφέρον να σημειωθεί ότι ούτε το 10% όλων των ιστότοπων δεν ακολουθεί τη σύσταση της Google για σύγχρονες μορφές ιστοσελίδων. Όλοι οι υπόλοιποι κάνουν περικοπές στο PageSpeed και την εμπειρία χρήστη και πιθανώς περνούν και τα Core Web Vitals, τα οποία έχουν αρνητικό αντίκτυπο στην online ορατότητα ως παράγοντα κατάταξης.

AVIF vs. WebP - ποιο είναι καλύτερο για τον ιστότοπό σας;

Ας κάνουμε ένα άλλο άμεσο τεστ για να το καταδείξουμε αυτό. Η εικόνα στα δεξιά από το τμήμα κεφαλίδας του TutKit.com είχε πάνω από 600 KB πριν από τη μετατροπή σε AVIF ως αρχείο PNG λόγω των διαφανειών.

Τώρα εξάγεται από το σύστημα ως αρχείο WebP με 159 KB (η εφεδρική μας λύση!). Ακόμη και αν αυτό βελτιστοποιηθεί τώρα με τη χρήση ενός εργαλείου όπως το TINYPNG, το οποίο μπορεί επίσης να μειώσει τα αρχεία WebP, μας μένουν 128 KB. Εξακολουθεί να αποτελεί μείωση κατά 20 τοις εκατό.

Ως αρχείο AVIF , το οποίο εμφανίζεται από προεπιλογή, η εικόνα έχει μόνο 94 KB , δηλαδή μόλις το 59% του μεγέθους της εφεδρικής λύσης WebP. Σε όλες τις δοκιμές, το AVIF κατάφερε να νικήσει τη μορφή WebP όσον αφορά το μέγεθος του αρχείου με την ίδια οπτική ποιότητα.

Ποιοι είναι οι λόγοι που συνηγορούν υπέρ του AVIF αντί του WebP;

• Το AVIF μπορεί να χειριστεί διαφάνειες και εξακολουθεί να διατηρεί καλύτερη ποιότητα εικόνας με υψηλότερη συμπίεση και μικρότερο μέγεθος αρχείου.
• Το AVIF υποστηρίζεται ήδη από σχεδόν το 85% όλων των δημοφιλών προγραμμάτων περιήγησης. Και η τάση εξακολουθεί να είναι ανοδική.
• Ο ιστότοπός σας θα φορτώνει ακόμη πιο γρήγορα χάρη στο AVIF σε σύγκριση με το WebP. Αυτό είναι ένα ιδιαίτερο πλεονέκτημα για ιστότοπους με μεγάλο όγκο εικόνων, όπως ηλεκτρονικά καταστήματα με σελίδες κατηγοριών, όπου τοποθετείται μεγάλος αριθμός εικόνων προϊόντων. Ομοίως, για ιστότοπους όπου οι εικόνες πρέπει να εμφανίζονται σε υψηλή ποιότητα (ιστότοποι χαρτοφυλακίου, αναφορές κ.λπ.), μπορείτε να εξασφαλίσετε υψηλή οπτική ποιότητα με μικρό μέγεθος αρχείου.

Μια άλλη υπόδειξη είναι αυτό που γράφει το caniuse.com απευθείας στη σελίδα WebP: "Τα AVIF και JPEG XL έχουν σχεδιαστεί για να αντικαταστήσουν το WebP". Το AVIF και το JPEG XL έχουν σχεδιαστεί για να αντικαταστήσουν το WebP.

Πριν αναρωτηθείτε αν μπορεί να ποντάρετε σε λάθος άλογο με το AVIF, επειδή το JPEG XL είναι πιθανώς επίσης στην κούρσα, μπορώ να σας καθησυχάσω αμέσως. Στο 0,08%, η συμβατότητα του προγράμματος περιήγησης με το JPEG XL είναι σχεδόν ανύπαρκτη.

Μπορείτε ήδη να μετατρέψετε εικόνες σε JPEG XL στο Squoosh και αυτό έχει "μόνο" παρόμοιες τιμές με το WebP (βλ. παρακάτω εικόνα).

Το AVIF είναι και παραμένει ο νικητής του φορμάτ. Χρησιμοποιήστε το άμεσα και αξιοποιήστε όλα τα πλεονεκτήματα και για τις ιστοσελίδες σας!

Squoosh.app - το καλύτερο εργαλείο για τη μετατροπή JPG, PNG, WebP σε AVIF

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

Το Squoosh είναι ένας δωρεάν μετατροπέας εικόνων που αναπτύχθηκε από τη Google. Το εργαλείο λειτουργεί ως διαδικτυακή υπηρεσία, αλλά και τοπικά στον υπολογιστή ή τον διακομιστή σας (node.js!). Μπορεί να μετατρέψει εικόνες σε διάφορες μορφές, όπως JPEG, PNG, GIF και WebP. Και το καλύτερο από όλα, μετατρέπει επίσης τις εικόνες σας σε μορφή AVIF.

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

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

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

Μπορείτε κι εσείς να χρησιμοποιήσετε το Squoosh για τη συντήρηση περιεχομένου και την ανάπτυξη ιστοσελίδων για να μειώσετε το μέγεθος των εικόνων σας χάρη στις σύγχρονες μορφές ιστοσελίδων, όπως το WebP ή το AVIF, και να βελτιώσετε τους χρόνους φόρτωσης των ιστοσελίδων σας. Μπορείτε επίσης να μειώσετε το μέγεθος αρχείου των αρχείων JPG σας - παρόμοια με το TinyJPG - εάν θέλετε να τα ανεβάσετε στα μέσα κοινωνικής δικτύωσης, για παράδειγμα. Το πλεονέκτημα σε σχέση με το TinyJPG είναι ότι έχετε πλήρη έλεγχο της συμπίεσης και μπορείτε να πειραματιστείτε με διαφορετικές ρυθμίσεις βελτιστοποίησης για να επιτύχετε την καλύτερη ποιότητα στο μικρότερο δυνατό μέγεθος.

Ακολουθούν ορισμένα πλεονεκτήματα του Squoosh:

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

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

Μετατροπή παρτίδας από πλευράς διακομιστή σε πλαίσια PHP από εικόνες σε JPG και PNG σε AVIF και WebP

Εδώ στο TutKit.com, εμείς οι ίδιοι έχουμε μετατρέψει τις εικόνες μας που ενσωματώθηκαν στην πύλη ως αρχεία JPG και PNG - περισσότερα από 14.000 μεμονωμένα αρχεία - σε μορφή AVIF στην πλευρά του διακομιστή και επίσης σε μορφή WebP ως εφεδρική λύση για παλαιότερα προγράμματα περιήγησης. Έχουμε επίσης λύσει τεχνικά το πρόβλημα ώστε οι συντάκτες μας να μπορούν να συνεχίσουν να ανεβάζουν εικόνες στην πύλη σε μορφή JPG ή PNG, όπως συνηθίζουν να κάνουν οι σχεδιαστές μας, και να τις επισημαίνουν εκεί με μεταδεδομένα. Στη συνέχεια, το σύστημα ενσωματώνει αυτόματα τις εικόνες σε AVIF και, ως εφεδρεία για όλα τα παλαιότερα (ή μη υποστηρικτικά) προγράμματα περιήγησης, τις εμφανίζει σε WebP.

Για να διασφαλίσετε ότι λειτουργεί στην πλευρά του διακομιστή, χρησιμοποιήστε τις τελευταίες εκδόσεις λογισμικού. Οι νέες συναρτήσεις imagecreatefromavif και imageavif για τη μορφή AVIF είναι διαθέσιμες μόνο κάτω από PHP 8.1+ και εφόσον η επέκταση GD έχει κατασκευαστεί με υποστήριξη AVIF. Απαιτείται η έκδοση 0.8.2 ή υψηλότερη της libavif.

Δώστε επίσης προσοχή στη συμβατότητα των λειτουργικών συστημάτων. Το AVIF παρέχεται με τα πακέτα libavif-dev/libavif-devel στα αποθετήρια:

• από Ubuntu 21.04
• από Debian 11
• από το Alpine 3.13
• από Fedora 34

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

Αυτό που ακούγεται τόσο χνουδωτό εδώ με την ενσωμάτωση του AVIF στο πλαίσιο PHP Laravel, κατέληξε να προσθέσει πάνω από 60 εισιτήρια στο εργαλείο JIRA, τα οποία αφορούσαν τη μετατροπή και την ενσωμάτωση (συμπεριλαμβανομένης της έρευνας, της ανάπτυξης, της διόρθωσης σφαλμάτων και των δοκιμών). Έτσι, ενώ τα πρόσθετα μειώνουν σημαντικά τον φόρτο εργασίας σε ένα κλασικό CMS όπως το WordPress, μπορεί μερικές φορές να χρειαστούν τρεις εβδομάδες για εκτεταμένη προσαρμοσμένη ανάπτυξη - όπως συνέβη και σε εμάς. Τα οφέλη από τη χρήση του AVIF σίγουρα αξίζουν τον κόπο!

Παρεμπιπτόντως: Ίσως γράψω σύντομα ένα άρθρο σχετικά με το γιατί προτιμούμε να χρησιμοποιούμε ένα πλαίσιο PHP για πύλες όπως το TutKit.com αντί για το WordPress ή άλλα CMS.

Πρόσθετα για τη χρήση του AVIF στο WordPress

Από τον Σεπτέμβριο του 2023, το CMS του WordPress δεν υποστηρίζει από προεπιλογή το ανέβασμα εικόνων AVIF - σε αντίθεση με το CMS του Contao, για παράδειγμα, το οποίο υποστηρίζει το AVIF από την έκδοση 5.0.0. Ως εκ τούτου, επί του παρόντος, πρέπει ακόμη να κάνετε δύο βήματα όταν χρησιμοποιείτε το WordPress για να μπορείτε να εξάγετε τις εικόνες σας σε AVIF.

1. Δημιουργία υποστήριξης AVIF για το WordPress
2. Μετατροπή εικόνων από JPG/PNG/WEBP σε AVIF

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

• Υποστήριξη AVIF: Αυτό το πρόσθετο σας επιτρέπει να ανεβάζετε και να εμφανίζετε εικόνες AVIF σε ιστότοπους WordPress. Υποστηρίζει επίσης την αυτόματη μετατροπή εικόνων JPEG και PNG σε εικόνες AVIF.
• Μετατροπέας για πολυμέσα: Αυτό το πρόσθετο μετατρέπει όλες τις εικόνες στη βιβλιοθήκη πολυμέσων του WordPress σε εικόνες AVIF. Προσφέρει επίσης μια σειρά επιλογών για να ρυθμίσετε την ποιότητα της εικόνας και τον ρυθμό συμπίεσης.
• ShortPixel Image Optimizer: Αυτό το πρόσθετο βελτιστοποιεί τις εικόνες στη βιβλιοθήκη πολυμέσων του WordPress σας, συμπεριλαμβανομένης της μετατροπής τους σε εικόνες AVIF. Προσφέρει επίσης μια σειρά άλλων λειτουργιών για τη βελτίωση της ποιότητας και της απόδοσης των εικόνων.

Αυτά τα πρόσθετα είναι ένας πολύ καλός τρόπος για να εκμεταλλευτείτε τις εικόνες AVIF σε ιστότοπους WordPress.

Κάντε κλικ εδώ για το πρόσθετο υποστήριξης AVIF - μέχρι τώρα έχει μόνο 1.956 λήψεις και λιγότερες από 800 εγκαταστάσεις - μπορείτε να δείτε ότι το AVIF είναι ακόμα εντελώς άγνωστο στους χρήστες του WordPress.

ΕΝΗΜΕΡΩΣΗ 05.04.2024: Με το WordPress 6.5, το WordPress υποστηρίζει επιτέλους το AVIF! Αυτό σημαίνει ότι τα plugins υποστήριξης απαιτούνται μόνο για παλαιότερες εκδόσεις του WordPress. Ένας λόγος παραπάνω για να ενημερώσετε σε WordPress 6.5 και νεότερες εκδόσεις.

Το πρόσθετο Local Image Sharp για ιστότοπους Strapi

Εμείς οι ίδιοι χρησιμοποιούμε επίσης το AVIF στον ιστότοπο του πρακτορείου μας 4eck-media.de, ο οποίος χρησιμοποιεί το βασισμένο στο node.js CMS Strapi. Το πρόσθετο Local Image Sharp για το Strapi επιτρέπει τη χρήση εικόνων AVIF σε ιστότοπους Strapi. Το πρόσθετο χρησιμοποιεί την εργαλειοθήκη επεξεργασίας εικόνων Sharp για τη μετατροπή εικόνων σε εικόνες AVIF.

Το πρόσθετο Local Image Sharp σας προσφέρει μια σειρά από λειτουργίες, όπως

• Αυτόματη μετατροπή εικόνων σε εικόνες AVIF
• Ρύθμιση της ποιότητας της εικόνας και του ρυθμού συμπίεσης
• Υποστήριξη διαφόρων μορφών εικόνας

Για να εγκαταστήσετε το πρόσθετο, κατεβάστε το από το Strapi Plugin Store και εγκαταστήστε το όπως οποιοδήποτε άλλο πρόσθετο του Strapi.

Το έχουμε ρυθμίσει έτσι ώστε να συνεχίσουμε να ανεβάζουμε τις εικόνες στο σύστημα Strapi ως JPG ή PNG. Το σύστημα μετατρέπει τις εικόνες σε AVIF και WEBP σε έξι διαφορετικές αναλύσεις για να εμφανίζει τις εικόνες σωστού μεγέθους στο πρόγραμμα περιήγησης ως AVIF ανάλογα με τη συσκευή (επιφάνεια εργασίας, tablet, κινητό). Για παλαιότερα προγράμματα περιήγησης, έχουμε επίσης μια εφεδρική λύση εδώ με εικόνες WebP, οι οποίες στη συνέχεια εμφανίζονται.

Είναι καλύτερο να χρησιμοποιείτε την ετικέτα <picture> , η οποία στη συνέχεια περιέχει μια ετικέτα <source> και <img>, για να εμφανίσετε τις εικόνες σας στη σωστή διάσταση και στις δύο μορφές AVIF και WebP με πηγή JPEG ή PNG.

Μαζί με την προσωρινή αποθήκευση, οι εικόνες σε σύγχρονη μορφή web ήταν ένας από τους σημαντικότερους ενισχυτές για την εξαιρετική απόδοση του ιστότοπου του πρακτορείου μας:

Σημείωση σχετικά με τις μετα-μικρογραφίες και τα δομημένα δεδομένα

Καθώς η Google Images εξακολουθεί να μην υποστηρίζει τη μορφή AVIF, εξακολουθούμε να καθορίζουμε το σχετικό αρχείο JPG ως σήμανση σχήματος "image":. Η meta thumbnail, την οποία καθορίζουμε για κάθε σελίδα προϊόντος προκειμένου να προσφέρουμε στη Google μια εικόνα προεπισκόπησης για το snippet αναζήτησης, εξακολουθεί επίσης να περιέχει τη μορφή JPG.

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

Ως εκ τούτου, η σύστασή μου θα ήταν να χρησιμοποιείτε επίσης την πηγή JPG στα μεταδεδομένα για τις μικρογραφίες και επίσης για τα δομημένα δεδομένα.

Εργαλεία και λογισμικό για την επεξεργασία εικόνων AVIF

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

Ακολουθεί ένας κατάλογος των λογισμικών επεξεργασίας εικόνας για συμβατότητα με το AVIF (από τον Σεπτέμβριο του 2023)

• Gimp: Μπορεί να εισάγει, να επεξεργαστεί και να εξάγει AVIF από την έκδοση 2.10.22.
• Photopea: Μπορεί να εισάγει και να επεξεργαστεί AVIF, αλλά όχι να εξάγει. Η αποθήκευση στη συνέχεια είναι δυνατή σε άλλη μορφή αρχείου.
• Affinity Photo: δεν υπάρχει υποστήριξη για AVIF
• Photoshop: δεν υπάρχει υποστήριξη, αλλά ένα πρόσθετο βοηθά στην εξασφάλιση της συμβατότητας.

Πρόσθετο AVIF για το Photoshop

Εδώ μπορείτε να βρείτε ένα πρόσθετο που επιτρέπει στο Photoshop να ανοίγει αρχεία AVIF.


https://github.com/0xC0000054/avif-format Η λήψη είναι διαθέσιμη στην καρτέλα Releases της σελίδας.

Αφού κατεβάσετε το ZIP, προσθέστε το Av1Image.8bi στο φάκελο στον οποίο το Photoshop αναζητά πρόσθετα. Αυτός είναι ο φάκελος για τις τυπικές εγκαταστάσεις:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Ή αυτός ο φάκελος: C:\Program Files\Adobe\Photoshop [έκδοση]\Plug-ins

Το Photoshop πρέπει να είναι κλειστό. Στη συνέχεια, ξεκινήστε το Photoshop ώστε να μπορέσει να φορτωθεί το πρόσθετο. Στη συνέχεια, μπορείτε να ανοίξετε αρχεία AVIF απευθείας μέσω drag & drop ή μέσω του διαλόγου ανοίγματος στο Photoshop.

Εμφάνιση εικόνων AVIF στα Windows

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

Αυτό είναι εφικτό από τα Windows 10 και μετά, αλλά απαιτείται μια επέκταση. Εάν κάνετε κλικ σε ένα αρχείο AVIF, εμφανίζεται πρώτα ένα μήνυμα σφάλματος.

Το μήνυμα σφάλματος περιέχει έναν σύνδεσμο. Εάν κάνετε κλικ σε αυτόν, θα μεταφερθείτε στο Microsoft Store για την επέκταση AVIF. Κατεβάστε το. Είναι μόνο 1,61 MB.

Στη συνέχεια, μπορείτε να ανοίξετε και να εμφανίσετε εικόνες σε μορφή AVIF στο πρόγραμμα περιήγησης αρχείων των Windows.

Ενσωμάτωση κινούμενων σχεδίων AVIF σε ιστότοπους αντί για κινούμενα σχέδια GIF

Εδώ είναι ένας διαδικτυακός μετατροπέας για τη μετατροπή κινούμενων σχεδίων GIF σε κινούμενα σχέδια AVIF. https://mconverter.eu/convert/gif/avif/

Ενώ το GIF της δοκιμής μου έχει μέγεθος 787 KB, το animation AVIF μειώνεται στα 411 KB.

Το προσωπικό μου συμπέρασμα

Κατά τη γνώμη μου, το AVIF είναι η καλύτερη επιλογή για την ενσωμάτωση σύγχρονων μορφών εικόνας σε ιστότοπους. Τα πλεονεκτήματα όσον αφορά τη συμπίεση και την ποιότητα της εικόνας είναι πειστικά. Καμία άλλη μορφή εικόνας δεν συνδυάζει αυτές τις ιδιότητες και δεν ενισχύει τόσο πολύ τους χρόνους φόρτωσης. Πάρα πολύ λίγοι διαχειριστές ιστότοπων χρησιμοποιούν σήμερα τη μορφή AVIF, παρόλο που πάνω από το 85% των προγραμμάτων περιήγησης την υποστηρίζουν και δεν αποτελεί τεχνικό εμπόδιο η συνέχιση της χρήσης του WebP ως εφεδρική λύση. Το SEO αλλάζει. Φυσικά, το AVIF από μόνο του δεν αρκεί για να επιτύχετε κορυφαίες βαθμολογίες στο PageSpeed Insights- απαιτούνται και άλλοι τεχνικοί παράγοντες. Όταν πρόκειται για την ενσωμάτωση σύγχρονων μορφών εικόνας, θα μπορέσετε να επιτύχετε καλύτερα αποτελέσματα με το AVIF σε σύγκριση με το WebP.

Το βελτιστοποιημένο με λέξεις-κλειδιά περιεχόμενο από μόνο του δεν θα είναι πλέον αρκετό, επειδή η τεχνητή νοημοσύνη ουσιαστικά κατακλύζει το διαδίκτυο με περιεχόμενο, πράγμα που σημαίνει ότι πολλοί ιστότοποι ανταγωνίζονται για την online ορατότητα με τους ανταγωνιστές τους με υψηλό επίπεδο περιεχομένου. Το τεχνικό SEO και ειδικότερα η ύπαρξη των Core Web Vitals γίνονται όλο και περισσότερο ισχυρότερος παράγοντας κατάταξης και, ως εκ τούτου, κριτήριο ισοβαθμίας, επειδή η Google θέλει να προσφέρει στους χρήστες την καλύτερη δυνατή εμπειρία χρήσης. Το AVIF - μαζί με άλλους παράγοντες - αποτελεί μέρος της λύσης για την επιτάχυνση των χρόνων φόρτωσης, την αύξηση της εμπειρίας του χρήστη και τη βελτίωση της διαδικτυακής ορατότητας μακροπρόθεσμα.

Μάθετε περισσότερα για το SEO, την εμπειρία χρήστη, το σχεδιασμό και τις τεχνικές τάσεις

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

Τώρα είναι η σειρά σας

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