Ποια είναι η καλύτερη μορφή εικόνας για έναν ιστότοπο;

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

• Φωτογραφίες (προϊόντα, άνθρωποι, τοποθεσίες): μορφή με απώλειες. Το AVIF δίνει τα μικρότερα αρχεία, το WebP είναι η ασφαλής σύγχρονη προεπιλογή και το JPG είναι η εφεδρική μορφή που μπορεί να εμφανίσει κάθε πρόγραμμα περιήγησης.
• Λογότυπα, εικονίδια και εικονογραφήσεις: SVG. Είναι διανυσματικό γραφικό, επομένως παραμένει ευκρινές σε κάθε μέγεθος και σε κάθε οθόνη, ενώ το αρχείο είναι συνήθως πολύ μικρό. Χρησιμοποιήστε εφεδρικά μια μορφή pixel μόνο όταν μια πλατφόρμα δεν δέχεται SVG.
• Στιγμιότυπα οθόνης, γραφικά UI και οτιδήποτε έχει διαφάνεια: PNG ή WebP χωρίς απώλειες. Τα επίπεδα χρώματα και οι καθαρές ακμές είναι ακριβώς τα στοιχεία που συμπιέζουν αποτελεσματικά οι μορφές χωρίς απώλειες.
• Σύντομες κινούμενες εικόνες: κινούμενο WebP ή AVIF αντί για GIF, το οποίο περιορίζεται σε μικρή παλέτα και παράγει πολύ μεγαλύτερα αρχεία.
• Το favicon: ένα αρχείο ICO, ιδανικά μαζί με μια έκδοση SVG ή PNG· δείτε πώς να δημιουργήσετε ένα favicon από μια εικόνα.

Το κλασικό λάθος είναι μια φωτογραφία αποθηκευμένη ως PNG. Το PNG αποθηκεύει κάθε pixel χωρίς απώλειες, κάτι ιδανικό για ένα λογότυπο αλλά καταστροφικό για μια φωτογραφία: το αρχείο διογκώνεται σε πολλαπλάσιο μέγεθος από ένα JPG χωρίς ορατό όφελος.

Για τις φωτογραφίες, η επιλογή εξαρτάται από το πόσο μπορείτε να βασιστείτε στα νεότερα προγράμματα περιήγησης:

• AVIF προσφέρει την καλύτερη συμπίεση: με τυπική ποιότητα ιστού καταλήγει περίπου 50% μικρότερο από JPEG και 20–30% μικρότερο από WebP, ενώ υποστηρίζει HDR και ευρεία χρωματική γκάμα, αν τα χρειάζεστε. Τα Chrome, Firefox και Safari το εμφανίζουν όλα (το Safari από την έκδοση 16.4, το 2023). Τα μειονεκτήματα είναι η αργή κωδικοποίηση, ιδιαίτερα στις μεγάλες εικόνες, και η περιορισμένη υποστήριξη σε λογισμικό υπολογιστή και παλαιότερες συσκευές.
• WebP είναι η πρακτική προεπιλογή: 25–35% μικρότερο από JPEG με την ίδια οπτική ποιότητα, με υποστήριξη διαφάνειας και συμβατό με κάθε ευρέως χρησιμοποιούμενο πρόγραμμα περιήγησης από το 2020. Ορισμένες εφαρμογές υπολογιστή και παλαιότερα εργαλεία εξακολουθούν να μην μπορούν να το ανοίξουν, κάτι που έχει σημασία για το αρχείο που παραδίδετε σε έναν σχεδιαστή, όχι για εκείνο που παρέχετε στους επισκέπτες.
• JPG είναι η καθολική εφεδρική επιλογή. Είναι η λιγότερο αποδοτική από τις τρεις μορφές, αλλά ένα JPG αποθηκευμένο σε ποιότητα περίπου 75–82 συνήθως δεν διακρίνεται από το πρωτότυπο στην οθόνη και τίποτα στον ιστό δεν αποτυγχάνει να το εμφανίσει.

Η ισχυρότερη διαμόρφωση παρέχει AVIF στα προγράμματα περιήγησης που το κατανοούν, WebP στα υπόλοιπα και διατηρεί ένα JPG για οτιδήποτε παλαιότερο. Αν προτιμάτε να επιλέξετε μόνο μία μορφή, το WebP με εφεδρικό JPG καλύπτει σχεδόν τους πάντες. Οι άμεσες συγκρίσεις βρίσκονται στα WebP έναντι AVIF και WebP έναντι JPG· για γραφικά αντί για φωτογραφίες, δείτε PNG έναντι JPG.

Μόλις γνωρίζετε τη μορφή-στόχο, η μετατροπή γίνεται γρήγορα και η εικόνα δεν εγκαταλείπει ποτέ τη συσκευή σας. Ο μετατροπέας εικόνων EditItAll λειτουργεί εξ ολοκλήρου στο πρόγραμμα περιήγησής σας:

1. Ανοίξτε τον μετατροπέα και σύρετε μέσα τις εικόνες σας, είτε πρόκειται για ένα αρχείο είτε για ολόκληρο φάκελο. Οι παρτίδες αρχείων υποβάλλονται σε επεξεργασία μαζί.
2. Επιλέξτε τη μορφή εξόδου: WebP ή AVIF για φωτογραφίες και PNG για γραφικά που χρειάζονται διαφάνεια. Υπάρχουν άμεσες διαδρομές για τις συνηθισμένες εργασίες: JPG σε WebP, PNG σε WebP, JPG σε AVIF και PNG σε AVIF.
3. Ορίστε την ποιότητα. Δεν υπάρχει πεδίο επιθυμητού μεγέθους: το μέγεθος αποτελεί αποτέλεσμα. Κάθε αρχείο εμφανίζει το μέγεθός του πριν και μετά, ώστε να μετακινείτε λίγο το ρυθμιστικό μέχρι να σας ικανοποιούν τόσο ο αριθμός όσο και η εικόνα.
4. Κατεβάστε τα αποτελέσματα ξεχωριστά ή ως ένα ενιαίο ZIP.

Τίποτα δεν μεταφορτώνεται· μπορείτε να αποσυνδεθείτε από το διαδίκτυο αφού φορτωθεί η σελίδα και να συνεχίσετε τις μετατροπές. Επίσης, τα μεταδεδομένα EXIF και GPS αφαιρούνται από κάθε εξαγόμενη εικόνα, ώστε μια φωτογραφία προϊόντος να μην αποκαλύπτει πού τραβήχτηκε. Είναι δωρεάν, χωρίς λογαριασμό και χωρίς υδατογράφημα. Έχετε ήδη τη σωστή μορφή και απλώς χρειάζεστε μικρότερο αρχείο; Μεταβείτε απευθείας στον συμπιεστή εικόνων. Και αν μια πλατφόρμα απαιτεί έκδοση pixel ενός διανυσματικού λογοτύπου, η μετατροπή SVG σε PNG το αποδίδει σε όποιο μέγεθος επιλέξετε.

Αξίζει να επιλέξετε τη σωστή μορφή, αλλά τρεις συνήθειες εξοικονομούν περισσότερα byte από όσα θα εξοικονομούσε ποτέ η μετάβαση από JPG σε AVIF:

• Αλλάξτε το μέγεθος στις διαστάσεις που πράγματι προβάλλετε. Μια φωτογραφία από φωτογραφική μηχανή έχει πολλαπλάσιο πλάτος από τον χώρο που καταλαμβάνει σε μια σελίδα και καθένα από αυτά τα επιπλέον pixel λαμβάνεται και έπειτα απορρίπτεται. Τα εργαλεία εικόνων του EditItAll διαθέτουν προαιρετικό όριο μέγιστης διάστασης ακριβώς για αυτόν τον σκοπό.
• Συμπιέστε μία φορά, ξεκινώντας από το πρωτότυπο. Κάθε αποθήκευση με απώλειες απορρίπτει λίγη περισσότερη λεπτομέρεια. Διατηρήστε το πρωτότυπο, εξαγάγετε από αυτό το αντίγραφο για τον ιστό και μην αποθηκεύετε ξανά διαδοχικά ένα JPG ως WebP και έπειτα ως AVIF.
• Παρέχετε τις σύγχρονες μορφές μαζί με μια εφεδρική επιλογή. Προσφέρετε πρώτα AVIF ή WebP και επιτρέψτε στα παλαιότερα προγράμματα περιήγησης να χρησιμοποιούν εφεδρικά JPG ή PNG, ώστε κανένας επισκέπτης να μη βλέπει ποτέ μια κατεστραμμένη εικόνα.

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