AVIF (Μορφή αρχείου εικόνας AV1) είναι μια σύγχρονη προδιαγραφή μορφής αρχείου εικόνας για την αποθήκευση εικόνων που προσφέρουν πολύ πιο σημαντική μείωση αρχείων σε σύγκριση με άλλες μορφές όπως JPG, JPEG, PNG και WebP. Η έκδοση 1.0.0 της προδιαγραφής AVIF οριστικοποιήθηκε τον Φεβρουάριο του 2019 και κυκλοφόρησε από την Alliance for Open Media στο κοινό.

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

Γιατί να χρησιμοποιήσετε το AVIF σε JPG, PNGS, WebP και GIF;

• Συμπίεση χωρίς απώλειες και συμπίεση χωρίς απώλειες
• Το JPEG πάσχει από απαίσια ζάντα
• Το WebP είναι πολύ καλύτερο, αλλά εξακολουθεί να υπάρχει αξιοσημείωτο μπλοκάρισμα σε σύγκριση με το AVIF
• Πολλαπλός χρωματικός χώρος
• Βάθος χρώματος 8, 10, 12 bit

Προειδοποιήσεις

Ο Τζέικ Άρτσιμπαλντ, έγραψε ένα άρθρο Πριν από μερικά χρόνια σε αυτήν τη νέα μορφή εικόνας και μας βοήθησε επίσης να εντοπίσουμε ορισμένα μειονεκτήματα στη συμπίεση εικόνων, συνήθως θα πρέπει να προσέχετε αυτά τα δύο κατά τη συμπίεση σε AVIF:

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

Δείτε επίσης: Ο Addy Osmani στο Smashing Magazine προχωρά σε βάθος στη χρήση του AVIF και του WebP.

Λύσεις προγράμματος περιήγησης

Squoosh

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

Χαρακτηριστικά

• Όριο μεγέθους αρχείου: 4MB
• Ρυθμίσεις βελτιστοποίησης εικόνας (βρίσκονται στη δεξιά πλευρά)
• Στοιχεία ελέγχου λήψης – αυτό περιλαμβάνει την προβολή του μεγέθους του αρχείου που προκύπτει και το ποσοστό μείωσης από την αρχική εικόνα
• Δωρεάν για χρήση

AVIF.io

AVIF.io είναι ένα εργαλείο εικόνας που δεν απαιτεί καμία μορφή κώδικα. Το μόνο που χρειάζεται να κάνετε είναι να ανεβάσετε τις επιλεγμένες εικόνες σας σε PNG, JPG, GIF κ.λπ. και θα επιστρέψει συμπιεσμένες εκδόσεις τους.

Χαρακτηριστικά

• Ρυθμίσεις μετατροπής (βρίσκονται στην επάνω δεξιά γωνία του banner μεταφόρτωσης)
• Δωρεάν για χρήση

Μπορείτε να βρείτε απαντήσεις στις ερωτήσεις σας στο Σελίδα AVIF.io FAQ.

Λύσεις γραμμής εντολών

avif-cli

avif-cli by Λόβελ σας επιτρέπει να τραβήξετε τις εικόνες σας (PNG, JPEG, κ.λπ.) που είναι αποθηκευμένες σε ένα φάκελο και να τις μετατρέπει σε εικόνες AVIF του καθορισμένου μεγέθους μείωσης.

Εδώ είναι οι απαιτήσεις και τι πρέπει να κάνετε:

• Node.js 12.13.0+

Εγκαταστήστε το πακέτο:

npm install avif

Εκτελέστε την εντολή στο τερματικό σας:

npx avif --input="./imgs/*" --output="./output/" --verbose

• ./imgs/* – αντιπροσωπεύει τη θέση όλων των αρχείων εικόνας σας
• ./output/ – αντιπροσωπεύει τη θέση του φακέλου εξόδου σας

Χαρακτηριστικά

• Δωρεάν για χρήση
• Η ταχύτητα μετατροπής μπορεί να ρυθμιστεί

Μπορείτε να μάθετε περισσότερες εντολές μέσω του avif-cli σελίδα GitHub.

αιχμηρά

αιχμηρά είναι ένα άλλο χρήσιμο εργαλείο για τη μετατροπή μεγάλων εικόνων σε κοινές μορφές σε μικρότερες, φιλικές προς τον Ιστό εικόνες AVIF.

Εδώ είναι οι απαιτήσεις και τι πρέπει να κάνετε:

• Node.js 12.13.0+

Εγκαταστήστε το πακέτο:

npm install sharp

Δημιουργήστε ένα αρχείο JavaScript με όνομα sharp-example.js και αντιγράψτε αυτόν τον κωδικό:

const sharp = require('sharp')

const convertToAVIF = () => {
    sharp('path_to_image')
    .toFormat('avif', {palette: true})
    .toFile(__dirname + 'path_to_output_image')
}

convertToAVIF()

Πού path_to_image αντιπροσωπεύει τη διαδρομή προς την εικόνα σας με το όνομα και την επέκτασή της, π.χ.

./imgs/example.jpg

Και path_to_output_image αντιπροσωπεύει τη διαδρομή που θέλετε να αποθηκευτεί η εικόνα σας με το όνομά της και νέος επέκταση, δηλαδή:

/sharp-compressed/compressed-example.avif

Εκτελέστε την εντολή στο τερματικό σας:

node sharp-example.js

Και εκεί! Θα πρέπει να έχετε ένα συμπιεσμένο αρχείο AVIF στη θέση εξόδου σας!

Χαρακτηριστικά

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

Δείτε επίσης: άρθρο του Stanley Ulili για Τρόπος επεξεργασίας εικόνων στο Node.js με Sharp.

Συμπέρασμα

Το AVIF είναι μια τεχνολογία που θα πρέπει να λάβουν υπόψη οι προγραμματιστές front-end για τα έργα τους. Αυτά τα εργαλεία σάς επιτρέπουν να μετατρέψετε τις υπάρχουσες εικόνες JPEG και PNG σε μορφή AVIF. Όμως, όπως και με την υιοθέτηση οποιουδήποτε νέου εργαλείου στη ροή εργασίας σας, τα οφέλη και τα μειονεκτήματα θα πρέπει να αξιολογηθούν σωστά σύμφωνα με τη συγκεκριμένη περίπτωση χρήσης σας.

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