Βελτιστοποίηση εικόνας ιστότοπου

Η βελτιστοποίηση των εικόνων είναι μία από τις πιο “ανταποδοτικές” πτυχές της απόδοσης του WordPress: για την ίδια δομή σελίδας και το ίδιο θέμα, εφόσον το μέγεθος, οι διαστάσεις, η μορφοποίηση και η παράδοση της εικόνας είναι σωστές, η εμπειρία φόρτωσης θα βελτιωθεί αμέσως.

Αλλά η βελτιστοποίηση εικόνων είναι επίσης ο ευκολότερος τρόπος να γίνει ένα χάος, όχι επειδή είναι τεχνικά πολύ δύσκολο, αλλά επειδή οι πληροφορίες είναι πολύ κατακερματισμένες:
Διαβάζετε μερικά άρθρα, ξέρετε ότι “συμπίεση”, “WebP/AVIF”, “lazy loading”, και στη συνέχεια κοιτάξτε την εισαγωγή του plugin και είπε “δωρεάν κάθε μήνα! 100 πιστώσεις ανά μήνα”, “Δωρεάν 20MB”, “1 πίστωση ανά εικόνα”, αλλά όσο περισσότερο διαβάζω, τόσο περισσότερο μπερδεύομαι... Είναι αρκετά δωρεάν; Πώς να αφαιρέσω την αμοιβή; Μήπως παρεξηγήσατε το “το ίδιο πράγμα”; Και το πιο σημαντικό:Είχε πράγματι αποτέλεσμα αφού το κάνατε ή όχι;

Αυτό το άρθρο κάνει μόνο τρία πράγματα:

1. Να σας δώσει ένα εκτελέσιμο αρχείοοδικός χάρτης (επίσης εικ.)(Τι να κάνετε πρώτα, τι να κάνετε μετά)
2. Να είστε ξεκάθαροι σχετικά με την επιλογή που θα επιλέξετε (ποια είναι η διαφορά μεταξύ δωρεάν/πληρωμένης και για ποιους είναι κατάλληλη η καθεμία).
3. Γράψτε τις πιο συνηθισμένες παγίδες από πριν (ώστε να μην χρειάζεται να ψάχνετε για να αντιμετωπίσετε τα προβλήματα όταν τελειώσετε).

1. Η βασική γραμμή: Τι περιλαμβάνει το WordPress και τι δεν περιλαμβάνει

Αν δεν καταλάβετε πρώτα τι κάνει ήδη ο πυρήνας του WordPress, είναι εύκολο να κάνετε ένα από τα δύο παρακάτω πράγματα:

• Αντί να χρησιμοποιείτε την “ελεύθερη χωρητικότητα” που θα έπρεπε να απολαμβάνετε, ξοδεύετε χρόνο/πληρώνετε χρήματα για να φτιάξετε τον τροχό ξανά και ξανά.
• Νόμιζα ότι το WordPress θα “μετατρέψει αυτόματα όλες τις παλιές εικόνες σε WebP/AVIF”, αλλά αποδεικνύεται ότι δεν το κάνει!

Ο πυρήνας του WordPress έχει ενσωματωμένες αυτές τις βασικές δυνατότητες:

• Responsive εικόνες (srcset/sizes): Από το WordPress 4.4, ο πυρήνας θα εξάγει εικόνες για το srcset 与 sizes, και χρησιμοποιεί τις εικόνες πολλαπλών μεγεθών που δημιουργούνται κατά τη φόρτωση για να επιτρέψει στο πρόγραμμα περιήγησης να επιλέξει έναν καταλληλότερο πόρο για φόρτωση ανάλογα με τις συνθήκες της οθόνης.
• Εγχώρια αργόσυρτη φόρτωση: Το WordPress από την έκδοση 5.5 και μετά επιτρέπει την εγγενή αργή φόρτωση των εικόνων από προεπιλογή, χρησιμοποιώντας τα πρότυπα HTML. loading εφαρμογή του χαρακτηριστικού.
• Υποστήριξη για φόρτωση WebP: Από το WordPress 5.8, μπορείτε να ανεβάσετε και να χρησιμοποιήσετε το WebP ως JPEG/PNG (εφόσον το περιβάλλον φιλοξενίας σας υποστηρίζει το WebP).
• Υποστήριξη για μεταφόρτωση AVIF: Από το WordPress 6.5, μπορείτε να ανεβάσετε και να χρησιμοποιήσετε το AVIF ως JPEG/PNG (εξαρτάται επίσης από την υποστήριξη της φιλοξενίας).

Αλλά δώστε προσοχή:
“Υποστήριξη μεταφόρτωσης/χρήσης” ≠ “Αυτόματη μετατροπή/αυτόματη παράδοση”.
Δηλαδή: ακόμη και αν είστε ήδη στο WP 6.5, αυτά τα JPG/PNG στη βιβλιοθήκη πολυμέσων σας δεν θα μετατραπούν σε WebP/AVIF από μόνα τους- δεν θα έχετε αυτόματα την πλήρη σύνδεση “παραγωγή AVIF/WebP σύμφωνα με τις δυνατότητες του προγράμματος περιήγησης και επαναφορά στην αρχική εικόνα για μη υποστηριζόμενα προγράμματα περιήγησης”! --αυτό το μέρος πρέπει συνήθως να επιδιορθωθεί από ένα πρόσθετο ή μια υπηρεσία.

2. Χάρτης πορείας: Βελτιστοποίηση εικόνας σε 5 βήματα

Τι πρέπει να κάνετε, γιατί, τι πρέπει να κάνετε για να προκριθείτε και τι είναι ένα τυπικό pit.

2.1 Πρώτα το σωστό “μέγεθος” (το πιο παραγνωρισμένο, αλλά και το πιο αποδοτικό)

Πολλοί σταθμοί είναι αργοί όχι επειδή δεν γίνεται η συμπίεση, αλλά ηΛήψη μιας μεγάλης εικόνας που εκτείνεται πολύ πέρα από την περιοχή προβολής：
Για παράδειγμα, αν η σελίδα έχει πλάτος μόνο 900px και ζητάτε από τον επισκέπτη να κατεβάσει την αρχική εικόνα των 3000px, το πρόγραμμα περιήγησης απλώς “τη μεταφορτώνει και μετά τη συρρικνώνει”. Αυτό σπαταλάει εύρος ζώνης, αυξάνει το χρόνο αποκωδικοποίησης και επιβραδύνει την πρώτη οθόνη.

WordPress 4.4+Ανταποκρινόμενος μηχανισμός εικόνας（srcset/sizes) έχει σχεδιαστεί για να αντιμετωπίσει αυτό ακριβώς το ζήτημα.

Κάντε αυτό που μετράει ως πάσα:

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

Οι πιο συνηθισμένες παγίδες:

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

---

2.2 Συμπίεση (μειώστε το KB, αλλά μην “συνθλίψετε” την ποιότητα)

Ο πυρήνας της συμπίεσης δεν είναι “όσο μικρότερο τόσο το καλύτερο”, αλλά “η διαφορά είναι ελάχιστα ορατή με γυμνό μάτι, αλλά η μείωση του όγκου είναι προφανής”.

Οι κανόνες έχουν ως εξής:

• Φωτογραφίες / ζωντανές λήψεις (άνθρωποι, προϊόντα, τοπία): Προτεραιότητα συμπίεσης με απώλειες (μέγιστο κέρδος)
• Στιγμιότυπα της διεπαφής/εικόνες με βαρύ κείμενο: Η συμπίεση θα πρέπει να είναι πιο συντηρητική για την αποφυγή ασαφούς κειμένου
• Λογότυπο/εικονίδιο: Προτεραιότητα SVG ή διακριτικό lossless (το lossy είναι εύκολο να επικολληθεί στην άκρη)

Κάντε αυτό που μετράει ως πάσα:

• Σημαντική μείωση του μεγέθους της εικόνας στις περισσότερες σελίδες
• Δεν υπάρχει ορατός θόρυβος, θολές άκρες, σπασίματα χρωμάτων, θολό κείμενο

---

2.3 WebP / AVIF (στρατηγική μορφοποίησης: μικρότερη για ίση ευκρίνεια)

Το WordPress υποστηρίζει ήδη τη μεταφόρτωση WebP (5,8) έναντι AVIF (6,5)。
Αλλά για να λειτουργήσει πραγματικά το Next Generation Format, πρέπει συνήθως να επιλυθούν δύο πράγματα:

1. Πώς να μετατρέψετε με παρτίδα ιστορικές βιβλιοθήκες πολυμέσων(Διαφορετικά, βελτιστοποιείτε μόνο για “νέες εικόνες που μεταφορτώνονται αργότερα”)
2. Αν θα δημιουργηθεί αντίγραφο ή θα αντικατασταθεί η αρχική εικόνα(Αυτή είναι μια επικίνδυνη λεκάνη απορροής- θα επικεντρωθούμε στην “Αντικατάσταση και διαγραφή αρχικής εικόνας” του Plus WebP αργότερα)

Συνιστώμενο στυλ γραφής:

• WebP: γενικά προτιμάται ως προεπιλογή (πιο σταθερή συμβατότητα)
• AVIF: μια περαιτέρω κατεύθυνση συμπίεσης, κατάλληλη για μεγάλες εικόνες/μεγάλες εικόνες πρώτης οθόνης/εικόνες λευκώματος (αλλά περισσότεροΕξάρτηση από την περιβαλλοντική στήριξη）

---

2.4 Η χαλαρή φόρτωση πρέπει να χρησιμοποιείται σωστά (όχι ένα μέγεθος για όλους)

WordPress 5.5 και μετάΠροεπιλεγμένη νωθρή φόρτωσηΕικόνα.
Μειώνει τη χρήση εύρους ζώνης κατά την αρχική απόδοση:

• Lazy loading για “πόρους εκτός οθόνης”
• Η πιο κρίσιμη μεγάλη εικόνα στην πρώτη οθόνη (και σε πολλές περιπτώσεις η βασική εικόνα στην πρώτη οθόνη) είναι συχνά ακατάλληλη για καθυστερημένη φόρτωση.

---

2.5 Στρώμα παράδοσης: CDN / Φωτογραφία CDN

Η συμπίεση, το μέγεθος και η μορφοποίηση λύνουν το πρόβλημα των “μικρότερων αρχείων που χωράνε”.
Ωστόσο, αν οι εικόνες λαμβάνονται πάντα από απόσταση από την πηγή, η καθυστέρηση του δικτύου θα επηρεάσει σημαντικά την εμπειρία. Σε αυτό το σημείο έρχεται η λύση του “επιπέδου παράδοσης” (CDN/εικόνα CDN).

Δύο τυπικές κατευθύνσεις:

• Cloudflare Πολωνικά：Τεκμηρίωση CloudflareΠαρουσιάζονται οι πολωνικές μέθοδοι συμπίεσης (lossless/lossy/WebP) και αναφέρεται ότι η συμπίεση με το format=auto Επιτρέπεται η μορφή WebP/AVIF.
• Επιταχυντής ιστότοπου Jetpack：Τεκμηρίωση JetpackΕξηγήστε ότι θα βελτιστοποιεί εικόνες και θα τις διανέμει μέσω του δικτύου του μαζί με στατικούς πόρους.

Η βελτιστοποίηση εικόνων είναι υπεύθυνη για το να γίνουν μικρότερες και πιο κατάλληλες.CDN Υπεύθυνος για την παροχή στενότερων και σταθερότερων

3. Επιλογή: μόνο δύο κύριες διαδρομές

Η πιο συνηθισμένη αποτυχία στη βελτιστοποίηση εικόνων δεν είναι το “όχι πρόσθετα”, αλλά τα πάρα πολλά πρόσθετα που οδηγούν σε διπλή επεξεργασία:
Ο Α συμπιέζει, ο Β συμπιέζει, ο Α μετατρέπει σε WebP/AVIF, ο Β μετατρέπει, ο Α αλλάζει τις διευθύνσεις URL, ο Β ξαναγράφει - δεν μπορείτε καν να καταλάβετε τι συμβαίνει στο σταθμό.

Κανόνες:

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

• Διαδρομή Α (όλα δωρεάν τοπικά):Συν WebP ή AVIF + EWWW Image Optimizer(ή μόνο ένα)
• Διαδρομή Β (τριπλή επιλογή συμπίεσης νέφους):ShortPixel / Imagify / TinyPNG

---

3.1 Διαδρομή A: Πλήρης δωρεάν τοπική (συν WebP ή AVIF ή EWWW)

Η διαδρομή αυτή χαρακτηρίζεται από:

• Δεν βασίζεστε σε υπηρεσίες συμπίεσης τρίτων “ανά μήνα/ανά φύλλο” (αν και ορισμένα χαρακτηριστικά μπορεί να προσφέρονται ως προαιρετικές υπηρεσίες).
• Το κόστος: η επεξεργασία παρτίδων μπορεί να είναι πιο απαιτητική για τους διακομιστές σε CPU/IO, απαιτώντας να δώσετε μεγαλύτερη προσοχή στη “στρατηγική και τον κίνδυνο”.”

3.1.1 Συν WebP ή AVIF: ο πυρήνας είναι η “δημιουργία/αντικατάσταση”, δεν είναι το παραδοσιακό “εργαλείο συμπίεσης”.”

• Κατά τη δημιουργία εικόνων πλήρους όγκου:Το αρχικό αναγνωριστικό αρχείου εικόνας αντικαθίσταται από το WebP/AVIF, το αρχικό αρχείο διαγράφεται και η διεύθυνση URL στο περιεχόμενο αντικαθίσταται.。
• Το πρόσθετο παρέχει εντολές WP-CLI και υπενθυμίζει: Το WP-CLI είναι πιο αξιόπιστο όταν υπάρχουν πολλά αρχεία.

Αυτό σημαίνει ότι αντί να “δημιουργείται αθόρυβα ένα WebP για εσάς”, θα μπορούσε να είναι έναΜετανάστευση περιουσιακών στοιχείων(Ειδικά αν ενεργοποιήσετε την επιλογή “Αντικατάσταση και διαγραφή αρχικής εικόνας”).

Διαφορές μεταξύ των δύο μοντέλων

Λειτουργία 1: Διατήρηση της αρχικής εικόνας + δημιουργία αντιγράφου WebP/AVIF (πιο σταθερό)

• Πλεονεκτήματα: Ευκολότερη επαναφορά σε περίπτωση προβλημάτων συμβατότητας
• Κόστος: Η χρήση του δίσκου θα αυξηθεί (αρχική εικόνα + νέα μορφή + μικρογραφίες πολλαπλών μεγεθών)

Λειτουργία 2: Αντικατάσταση και διαγραφή της αρχικής εικόνας (πιο επιθετική)

• Πλεονεκτήματα: οι δίσκοι δεν επεκτείνονται τόσο γρήγορα- οι αναφορές των σταθμών πηγαίνουν απευθείας στη νέα μορφή
• Κίνδυνος: “Αλλάζετε περιουσιακά στοιχεία + αλλάζετε αναφορές”, γεγονός που καθιστά πιο δαπανηρή την αντιμετώπιση προβλημάτων συμβατότητας (ειδικά αν κάποια εξωτερικά συστήματα ή λογικές θεμάτων εξαρτώνται από το αρχικό όνομα αρχείου/μονοπάτι/μορφή).

Τυπικές παγίδες των Plus WebP ή AVIF

1. Μετά την αντικατάσταση ολόκληρης της βιβλιοθήκης, ορισμένες εικόνες σελίδων εμφανίζονται ανώμαλα.
   Ο λόγος συνήθως δεν είναι ότι η εικόνα είναι “σπασμένη”, αλλά ότι κάποιος κρίκος στην αλυσίδα της αντικατάστασης της διεύθυνσης URL, της προσωρινής αποθήκευσης, της πολιτικής μικρογραφιών κ.λπ. δεν είναι σωστός.
2. Όσο μεγαλύτερος είναι ο αριθμός των μικρογραφιών, τόσο μεγαλύτερη είναι η εμβέλεια της αλλαγής.
   Το WordPress δημιουργεί πολλαπλά μεγέθη για τη μεταφόρτωση μιας εικόνας- τα θέματα/plugins μπορούν επίσης να προσθέσουν περισσότερα μεγέθη. Η πλήρης αντικατάσταση σημαίνει ότι μπορεί να αλλάξετε μια πολύ μεγάλη συλλογή αρχείων.
3. Η απλή πραγματοποίηση μιας μετεγκατάστασης μορφής δεν σημαίνει απαραίτητα ότι ο τόμος είναι πάντα ο μικρότερος
   Το WebP/AVIF είναι γενικά μικρότερο, αλλά η “στρατηγική μεγέθους” και η “στρατηγική συμπίεσης” εξακολουθούν να είναι κρίσιμες. Μην θεωρείτε το Plus WebP ως “ένα κλικ πιο γρήγορο”.

---

3.1.2 EWWW Image Optimizer: εκπρόσωπος της ελεύθερης τοπικής συμπίεσης

Η σελίδα του πρόσθετου EWWW είναι πολύ καλά τοποθετημένη:

• Μπορεί να βελτιστοποιηθεί στον διακομιστή σας χρησιμοποιώντας μια σειρά εργαλείων (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, κ.λπ.)
• Μπορείτε επίσης να εκφορτώσετε την επεξεργασία που καταναλώνει CPU στον διακομιστή του (προαιρετικά), εάν χρειάζεστε υψηλότερη συμπίεση ή μεγαλύτερη εξοικονόμηση CPU.

Ποιος πρέπει να είναι ο ρόλος του EWWW στη διαδρομή Α;

Αν χρησιμοποιείτε το Plus WebP ως “στρατηγική μετάβασης/αντικατάστασης μορφής”, τότε το EWWW είναι καλύτερο:

• Συμπίεση και βελτιστοποίηση όγκου(ιδίως μείωση του βάρους των ακατέργαστων πόρων, όπως JPG/PNG)
• Βελτιστοποίηση παρτίδας της ιστορικής βιβλιοθήκης πολυμέσων(με στόχο τη “μείωση του όγκου” και όχι την “αντικατάσταση της διεύθυνσης URL”)

Τυπικός λάκκος του EWWW

1. Αυξημένο φορτίο διακομιστή κατά τη βελτιστοποίηση παρτίδων
   Επειδή η τοπική συμπίεση τρώει CPU/IO, η λύση δεν είναι “μην τη χρησιμοποιείτε”, αλλά “παρτίδα, χαμηλή αιχμή, δυνατότητα εκφόρτωσης/επιλογή cloud αν χρειαστεί”.
2. “Δημιουργείται ένα WebP” δεν σημαίνει ότι το frontend πρέπει να παράγει ένα WebP.
   Πολλά plugins πάσχουν από αυτή την παρεξήγηση: άλλο πράγμα είναι η παραγωγή και άλλο οι στρατηγικές παράδοσης (επανεγγραφές, ετικέτες εικόνων, χτυπήματα στην προσωρινή μνήμη κ.λπ.).
3. Κάνοντας το ίδιο πράγμα ξανά και ξανά με άλλα πρόσθετα
   Αν επιλέξετε τη διαδρομή Α, προσπαθήστε να μην επικαλύψετε τη συμπίεση σύννεφου τύπου ShortPixel/Imagify/TinyPNG- αν επιλέξετε τη διαδρομή Β, μην ενεργοποιήσετε τη λογική αντικατάστασης Plus WebP. Βασική αρχή:Μια διαδρομή προς το τέλος.

---

3.2 Διαδρομή Β: Τριπλή επιλογή συμπίεσης cloud (ShortPixel / Imagify / TinyPNG)

Αυτή η διαδρομή είναι κατάλληλη για άτομα που “θέλουν να εξοικονομήσουν πόρους του διακομιστή, θέλουν να κάνουν batch με λιγότερη προσπάθεια και δέχονται χρέωση ανά πίστωση/ανά όγκο”.
Αλλά το πιο παραπλανητικό σημείο σχετικά με τη συμπίεση νέφους είναι:Οι δωρεάν πιστώσεις δεν είναι τόσο απλές όσο τα “δωρεάν φύλλα”!.. Ο αριθμός των μεγεθών μικρογραφιών, το αν παράγεται ή όχι WebP/AVIF και το αν γίνεται επανειλημμένη εκ νέου συμπίεση ή όχι μπορούν να επηρεάσουν σημαντικά την κατανάλωση.

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

---

3.2.1 ShortPixel100 δωρεάν πιστώσεις/μήνα, αλλά οι πιστώσεις καταναλώνονται από μικρογραφίες και μεγεθύνσεις WebP/AVIF.

Τι συμβαίνει με το δωρεάν/πληρωμένο

Η περιγραφή του πρόσθετου ShortPixel αναφέρει σαφώς:

• 100 δωρεάν μονάδες ανά μήνα
• Υπάρχουν επίσης “Επιπλέον απεριόριστες μηνιαίες μονάδες” (η σελίδα του πρόσθετου δίνει πληροφορίες για τις αντίστοιχες τιμές).
• Διατίθενται επίσης ως “πακέτα πιστωτικών μονάδων μιας χρήσης που δεν λήγουν ποτέ” (με πληροφορίες για την αρχική τιμή).

Συμβουλή:

• Δωρεάν: δώστε ένα ορισμένο ποσό πιστώσεων ανά μήνα για ελαφριές τοποθεσίες ή δοκιμές
• Πακέτα μίας χρήσης: κατάλληλα για ιστότοπους με μεγάλες βιβλιοθήκες πολυμέσων που θέλουν να ξεφορτωθούν το απόθεμά τους με μία φορά (αγοράστε το μία φορά και χρησιμοποιήστε το, συνήθως δεν λήγει).
• Μηνιαίο/Απεριόριστο: κατάλληλο για ιστότοπους με συνεχώς ενημερωμένες εικόνες και μακροπρόθεσμη σταθερή βελτιστοποίηση

Το επίσημο KB του ShortPixel έχει επίσης δώσει μια ενημέρωση σχετικά με το “One Time Pack vs Unlimited Monthly”.ρητή εξήγηση: Απεριόριστα μηνιαία είναι μια μηνιαία (ή ετήσια) πληρωμή που προσφέρει απεριόριστες πιστώσεις με ένα σταθερό ποσό CDN.Οι εφάπαξ πιστώσεις δεν λήγουν, δίνοντάς σας μεγαλύτερο έλεγχο για να τις χρησιμοποιείτε ανάλογα με τις ανάγκες σας.

Το συμπέρασμα: πώς υπολογίζονται οι πιστώσεις ShortPixel;

Επίσημη τεκμηρίωση του ShortPixel Ο KB ήταν πολύ ωμός:

• Το WordPress δημιουργεί πολλαπλές μικρογραφίες όταν ανεβάζετε μια εικόνα,
• Κάθε βελτιστοποίηση μικρογραφίας μετράει ως πίστωση；
• Εάν επιλέξετε να δημιουργήσετε ένα WebP ή AVIF, τοΚάθε έκδοση WebP/AVIF της αρχικής εικόνας και της μικρογραφίας καταναλώνει μια επιπλέον πίστωση.；
• Μπορείτε να αποκλείσετε ορισμένες μικρογραφίες από τη βελτιστοποίηση για να μειώσετε την κατανάλωση πιστώσεων.

Μονάδες Παράδειγμα：

Ας πούμε ότι ανεβάζετε 1 εικόνα και το θέμα/πρόσθετο πρόγραμμα δημιουργεί 8 μικρογραφίες:

• Βελτιστοποίηση μόνο της αρχικής εικόνας + μικρογραφίες: 1 (αρχική) + 8 (μικρογραφίες) = 9 μονάδες
• Αν θέλετε επίσης να δημιουργήσετε WebP/AVIF: μία ακόμη έκδοση επόμενης γενιάς για κάθε μία από τις 9 παραπάνω → +9 μονάδες.
  Με άλλα λόγια, αυτό που νομίζετε ότι είναι “1 εικόνα” μπορεί στην πραγματικότητα να καταναλώνει σχεδόν “2ψήφιες μονάδες”.

Λοιπόν:“Το ”δωρεάν 100 μονάδες“ δεν είναι το ίδιο με το ”δωρεάν 100 εικόνες".

Οι πιο συνηθισμένες παγίδες του ShortPixel

1. Δωρεάν 100 πιστώσεις τελειώνουν γρήγορα
   Βασική αιτία: πολλές μικρογραφίες + επιπλέον πιστώσεις για τη δημιουργία WebP/AVIF.
   πρόταση：

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

2. Στοίβαξη άλλων plug-ins μετατροπέα ταυτόχρονα
   Αν έχετε αντικαταστάσεις Plus WebP και ShortPixel που δημιουργούν/εισάγουν ετικέτες επόμενης γενιάς, η λογική συσσωρεύεται και γίνεται πιο δύσκολη η αντιμετώπιση προβλημάτων. Για τη διαδρομή Β, αφήστε το ShortPixel να το κάνει μόνο του.
3. Νόμιζα ότι αν το εγκαθιστούσα, θα ήταν “WebP/AVIF στο προσκήνιο”.”
   ShortPixel plugin σελίδαΑνέφερε ότι μετατρέπει WebP/AVIF και μπορεί να προσθέσει εικόνες επόμενης γενιάς στην πρώτη σελίδα (π.χ. με ετικέτες).
   Ωστόσο, εξακολουθεί να είναι σημαντικό να επαληθεύσετε τα αποτελέσματα μετά από αυτό.

---

3.2.2 ImagifyΔωρεάν: 20MB/μήνα, η ποσόστωση αφαιρείται σύμφωνα με το “μέγεθος της αρχικής εικόνας + αριθμός μικρογραφιών”, θα γίνονται επανειλημμένες αφαιρέσεις για εκ νέου συμπίεση.

Ελεύθερο ποσό και τοποθέτηση

Επίσημη σελίδα τιμών ImagifyΗ γραφή είναι σαφής:Δωρεάν λογαριασμός Μηνιαία ποσόστωση 20MB。
Η σελίδα του πρόσθετου καθιστά επίσης σαφές ότι μπορεί να συμπιέσει, να αλλάξει μέγεθος και να μετατρέψει WebP/AVIF.

Πώς αφαιρείται η ποσόστωση;

Επίσημη τεκμηρίωση Imagify “Η ενότητα ”Πώς υπολογίζεται η χρήση ποσόστωσης;" αναλύει με μεγάλη σαφήνεια τον μηχανισμό αφαίρεσης:

• Ο αριθμός των μικρογραφιών επηρεάζει την κατανάλωσηΓια παράδειγμα, αν έχετε 10 μεγέθη μικρογραφιών, η βελτιστοποίηση 1 εικόνας γίνεται βελτιστοποίηση 11 εικόνων (αρχική + 10 μικρογραφίες), οι οποίες συμβάλλουν στην κατανάλωση ποσοστού.
• Αφαίρεση ποσόστωσης ανάλογα με το μέγεθος του πρωτότυπου εγγράφου: Για παράδειγμα, αν στείλετε μια εικόνα 100KB στο Imagify, 100KB θα αφαιρεθούν από την ποσόστωση.
• Η αλλαγή του επιπέδου συμπίεσης και η εκ νέου βελτιστοποίηση θα καταναλώσουν ξανά την ποσόστωση。
• Το ίδιο κλειδί API μπορεί να χρησιμοποιηθεί για πολλές τοποθεσίες, αλλά οι ποσοστώσεις μοιράζονται μεταξύ τους.

Αυτός είναι ο “βασικός τρόπος κατανόησης” του Imagify:
Μοιάζει περισσότερο με ένα πακέτο κίνησης: αφαιρεί όσα στέλνετε- όσο περισσότερες μικρογραφίες έχετε, τόσο περισσότερο αφαιρεί- και θα επαναλάβετε την αφαίρεση αν το πατήσετε επανειλημμένα.

Εύκολο στην ανάγνωση παράδειγμα ποσόστωσης Imagify

Ας πούμε ότι ανεβάζετε μια αρχική εικόνα 800KB και ο ιστότοπος δημιουργεί 8 μικρογραφίες.

• Το Imagify βελτιστοποιεί για να συμπεριλάβει την “αρχική εικόνα + 8 μικρογραφίες” (αν επιλέξετε να βελτιστοποιήσετε όλες αυτές τις εικόνες), πράγμα που σημαίνει ότι αυτή η μεμονωμένη ενέργεια καταναλώνει μια ποσόστωση κοντά στο “αρχικό μέγεθος όλων αυτών των αρχείων μαζί”.
  Αυτός είναι ο λόγος για τον οποίο ορισμένοι ιστότοποι αισθάνονται ότι “το 20MB εξαντλείται γρήγορα”: δεν είναι ότι το Imagify δεν είναι αρκετό, αλλά ότι ανεβάζετε πάρα πολλές εικόνες ταυτόχρονα, πάρα πολλές μικρογραφίες και πιθανώς δοκιμάζετε τα επίπεδα συμπίεσης ξανά και ξανά.

Οι πιο συνηθισμένες παγίδες του Imagify

1. Δωρεάν 20MB Δεν αρκεί για να γίνει “πλήρης απογραφή ιστορικού χώρου”
   Το 20MB είναι συνήθως καταλληλότερο για δοκιμές με ελαφρές ενημερώσεις.Αν η βιβλιοθήκη πολυμέσων σας είναι ήδη μεγάλη, μια εφάπαξ εκκαθάριση είναι πιθανό να απαιτεί αναβάθμιση.
2. Η επανειλημμένη προσαρμογή των επιπέδων συμπίεσης οδηγεί σε διπλή κατανάλωση ποσόστωσης
   Το Imagify καθιστά σαφές ότιΗ εκ νέου βελτιστοποίηση θα καταναλώσει ξανά την ποσόστωση.
   Προτείνω να ξεκαθαρίσετε τη “στρατηγική” σε αυτή τη σελίδα:

• Ξεκινήστε με έναν μικρό αριθμό εικόνων για να καθορίσετε το επίπεδο συμπίεσης και την εμφάνιση και την αίσθηση
• Καθορίστε τη στρατηγική και, στη συνέχεια, εκτελέστε την μαζικά
  Αποφύγετε επανειλημμένες δοκιμές και λάθη στην πλήρη βιβλιοθήκη

3. Πολλαπλές τοποθεσίες που μοιράζονται το κλειδί API οδηγεί σε “ανεξήγητη μείωση της ποσόστωσης”.”
   Εάν χρησιμοποιείτε το ίδιο κλειδί API για περισσότερους από έναν σταθμούς, η ποσόστωση μοιράζεται.
   Έτσι, σε σενάρια ομάδας/πολλών σταθμών, είναι καλύτερο να είναι σαφές: ποιοι σταθμοί χρησιμοποιούνται από κοινού και ποιοι μεμονωμένα, ώστε να αποφεύγονται ανεξέλεγκτοι προϋπολογισμοί.

---

3.2.3 TinyPNG(Tiny Compress Images): δωρεάν 500 πιστώσεις/μήνα- η μετάβαση σε WebP/AVIF θα “αφαιρέσει 1 πίστωση ανά μέγεθος”.”

Δωρεάν πιστώσεις και ιδέες χρέωσης

Η σελίδα του πρόσθετου WordPress του TinyPNG είναι πολύ σαφής:

• 500 μονάδες ανά μήνα δωρεάν
• Στη “Γενική εγκατάσταση WordPress”, μπορείτε πιθανώς να συμπιέσετε το Περίπου 100 εικόνες/μήνα
• Ωστόσο, εάν είναι ενεργοποιημένη η μετατροπή AVIF ή WebP:Κάθε μέγεθος εικόνας καταναλώνει μια επιπλέον πίστωσηΈτσι, κατά πάσα πιθανότητα μπορεί να συμπιεστεί και να μετατραπεί μόνο Περίπου 50 εικόνες/μήνα(ανάλογα με το πόσα μεγέθη μικρογραφιών έχετε).

Εν τω μεταξύ, η Tinify (οι προγραμματιστές του TinyPNG/TinyJPG) έχουν επίσης κάνει τις Σελίδα τιμολόγησης APIΠεριγραφή: Εγγραφείτε και λάβετε 500 δωρεάν συμπιέσεις ανά μήνα- μετά από αυτό, θα χρεώνεστε με βάση τον αριθμό των επιτυχημένων συμπιέσεων, χωρίς υποχρεωτική συνδρομή.

Συνοψίστε τον τρόπο με τον οποίο γίνεται κατανοητό το TinyPNG σε μία πρόταση:
Όσο περισσότερα μεγέθη μικρογραφιών έχετε και όσο περισσότερα WebP/AVIF έχετε ενεργοποιήσει, τόσο πιο γρήγορα καταναλώνονται οι πιστώσεις.

Εύκολα αναγνώσιμα παραδείγματα πιστώσεων TinyPNG

Ας υποθέσουμε ότι ο ιστότοπός σας παράγει 8 μεγέθη μικρογραφιών για κάθε εικόνα:

• Μόνο συμπίεση: πρωτότυπο + 8 μικρογραφίες → απαιτούνται 9 μονάδες
• Εάν η μετατροπή WebP/AVIF είναι ενεργοποιημένη: μία επιπλέον μονάδα ανά μέγεθος → πιθανώς σχεδόν διπλάσια!
  Αυτό αντιστοιχεί στην περιγραφή στη σελίδα του πρόσθετου: μετά την ενεργοποίηση, το δωρεάν ποσό αλλάζει από περίπου “100 κάρτες/μήνα” σε “50 κάρτες/μήνα”.

Οι πιο συνηθισμένες παγίδες του TinyPNG

1. Σκέφτηκα 500 μονάδες = 500 εικόνες
   Δεν είναι. Καταναλώνεται από το “μέγεθος εικόνας/παραλλαγή”. Η σελίδα του πρόσθετου προειδοποιεί σαφώς ότι “Οι μετατροπές αφαιρούν επιπλέον 1 πίστωση για κάθε μέγεθος εικόνας”.
2. Τα θεματικά/εμπορικά plugins δημιουργούν πάρα πολλά μεγέθη και οι δωρεάν πιστώσεις μειώνονται σημαντικά
   Όσο περισσότερα μεγέθη υπάρχουν, τόσο πιο εύκολο είναι να κλιμακωθούν και να καταναλωθούν οι πιστώσεις.
3. Αφού ενεργοποιήσετε τη μετατροπή, διαπιστώνετε ότι οι πιστώσεις είναι ξαφνικά αχρησιμοποίητες.
   Δεν είναι σφάλμα, είναι ο μηχανισμός χρέωσης.
   Συμβουλές στρατηγικής:

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

4. Σύσταση υποσενάριων: πώς να επιλέγονται διαφορετικοί τύποι χώρων

Επίσης το WordPress, οι ιστότοποι περιεχομένου, οι ιστότοποι ηλεκτρονικού εμπορίου, τα χαρτοφυλάκια και οι ιστότοποι μελών δεν έχουν τα ίδια “σημεία πίεσης” για εικόνες.

4.1 Ιστοσελίδες/blogs περιεχομένου (πολλά γραφικά άρθρα, μέτρια συχνότητα ενημερώσεων)

Συστάσεις προτεραιότητας:

1. Στρατηγική διαστασιολόγησης (Βήμα 1)
2. Συμπίεση (Βήμα 2)
3. WebP (Βήμα 3)

Μια πιο κατάλληλη διαδρομή:

• Θέλετε να αποθηκεύσετε: Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Αν θέλετε να πάτε δωρεάν: Διαδρομή Α (Plus WebP + EWWW), αλλά συνιστάται να ξεκινήσετε με τη “συντηρητική λειτουργία (χωρίς διαγραφή της αρχικής εικόνας)” για να αξιολογήσετε τον κίνδυνο.

Τυπικός λάκκος:

• Η πρώτη εικόνα της σελίδας του άρθρου είναι πολύ μεγάλη, ακατάλληλη στρατηγική τεμπέλικης φόρτωσηςΕπιβραδύνει την πρώτη οθόνη

4.2 Ιστοσελίδα ηλεκτρονικού εμπορίου/προϊόντων (πολλές μικρογραφίες, πολλές παραλλαγές εικόνων, πρώτα η σταθερότητα)

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

Συστάσεις προτεραιότητας:

1. Πρώτα η σταθερότητα: συντηρητική στρατηγική συμπίεσης, μην κάνετε αμέσως πλήρη αντικατάσταση της βιβλιοθήκης
2. Αξιολόγηση των μεγεθών μικρογραφιών: τα θέματα ηλεκτρονικού εμπορίου συνήθως δημιουργούν περισσότερα μεγέθη και η κατανάλωση ποσού μεγεθύνεται (το ShortPixel/TinyPNG είναι ιδιαίτερα αισθητό)
3. Κάντε επικύρωση σε μικρή κλίμακα πριν από την παρτίδα (πολύ κρίσιμη)

Μια πιο κατάλληλη διαδρομή:

• Η διαδρομή Β τείνει να είναι πιο εύκολη: το ShortPixel/Imagify/TinyPNG μπορεί να κάνει batch και είναι σημαντικό να κατανοήσετε τον μηχανισμό ποσόστωσης και να εκτιμήσετε το κόστος εκ των προτέρων.
• Η διαδρομή Α είναι μια χαρά, αλλά να είστε πιο προσεκτικοί με τη συμπεριφορά “αντικατάσταση αναγνωριστικών/διαγραφή αρχικών εικόνων/αντικατάσταση διευθύνσεων URL” της Plus WebP: πρόκειται για μια μεταφορά περιουσιακών στοιχείων και δεν συνιστάται να αντικαταστήσετε το σύνολο αμέσως.

4.3 Χαρτοφυλάκιο/φωτογραφικός σταθμός (ευαίσθητη ποιότητα μεμονωμένης εικόνας, μεγάλες εικόνες, υψηλές απαιτήσεις προβολής)

Συστάσεις προτεραιότητας:

1. Στρατηγική μεγέθους (έλεγχος περιοχής εμφάνισης)
2. Στρατηγική συμπίεσης (καλύτερα να είσαι μεγαλύτερος παρά να συνθλίψεις τις λεπτομέρειες)
3. WebP/AVIF (τα κέρδη από τη σκηνή της μεγάλης εικόνας είναι προφανή, αλλά επαληθεύστε την προβολή)

Μια πιο κατάλληλη διαδρομή:

• Imagify: Αφαιρέστε την ποσόστωση ανάλογα με το “μέγεθος της αρχικής εικόνας”, αυτό το είδος του ιστότοπου είναι πιο εύκολο να γίνει “ελεγχόμενος προϋπολογισμός” (ξέρετε πόσο πρέπει να αφαιρέσετε για κάθε μεγάλη εικόνα), αλλά αποφύγετε τις επαναλαμβανόμενες καταστολές.
• ShortPixel: Αν το μέγεθος της μικρογραφίας δεν είναι μεγάλο, οι πιστώσεις είναι επίσης πολύ διαισθητικές- αλλά αν δημιουργήσετε πολλά μεγέθη +next-gen, η κατανάλωση πιστώσεων θα μεγεθυνθεί και θα πρέπει να προγραμματίσετε εκ των προτέρων.

5. Σύγκριση ποσόστωσης/χρέωσης: βάζοντας σε προοπτική το “δωρεάν δεν είναι αρκετό”

Ποια είναι η καλύτερη προσφορά και πόσο καιρό θα διαρκέσει η δωρεάν προσφορά;

5.1 Τρία μοντέλα χρεώσεων

• ShortPixel(πιστώσεις): Οι πιστώσεις υπολογίζονται ως “αρχική εικόνα + αριθμός μικρογραφιών”- επιπλέον πιστώσεις αφαιρούνται για κάθε αντίστοιχη έκδοση WebP/AVIF που δημιουργείται.
• Imagify(ποσόστωση MB): Αφαίρεση της ποσόστωσης ανάλογα με το “αρχικό μέγεθος αρχείου”, όσο περισσότερες μικρογραφίες, τόσο περισσότερες αφαιρέσεις, ενώ η εκ νέου συμπίεση θα αφαιρέσει ξανά.
• TinyPNG(πιστώσεις): 500 μονάδες ανά μήνα- η ενεργοποίηση της μετατροπής WebP/AVIF αφαιρεί επιπλέον μονάδες για κάθε μέγεθος εικόνας.

5.2 Μέθοδοι ταχείας εκτίμησης

Μπορείτε να το υπολογίσετε ως εξής:

1. Βρείτε μια τυχαία “αρχική εικόνα που συχνά ανεβάζετε” και δείτε πόσο μεγάλη είναι (π.χ. 300KB / 1MB / 3MB).
2. Ανάλογα με το πόσα μεγέθη μικρογραφιών παράγει ο ιστότοπός σας (π.χ. 5 / 10 / 20)
3. Αποφασίστε αν θέλετε να δημιουργήσετε WebP/AVIF (ναι/όχι)

Στη συνέχεια, χρησιμοποιήστε τα ακόλουθα “νοητικά μαθηματικά” για να κατανοήσετε την κατανάλωση:

• ShortPixel: ≈ (1 + αριθμός μικρογραφιών) πιστώσεις ανά εικόνα- αν δημιουργείτε WebP/AVIF, ≈ διπλασιάζεται ξανά (αφού η έκδοση επόμενης γενιάς παίρνει επίσης πιστώσεις)
• Imagify: Κάθε εικόνα ≈ (αρχικό μέγεθος + κάθε μέγεθος μικρογραφίας) αφαιρεί ποσόστωση, αλλάζοντας επίπεδο συμπίεσης και επανασυμπίεση θα αφαιρεί και πάλι ποσόστωση.
• TinyPNG: 500 μονάδες δωρεάν- εάν ο ιστότοπός σας παράγει πολλά μεγέθη ανά εικόνα και η μετατροπή είναι ενεργοποιημένη, ο αριθμός των δωρεάν μονάδων μειώνεται σημαντικά (η σελίδα του πρόσθετου δίνει μια οπτική προσδοκία “~100 μονάδες/μήνα” έναντι “~50 μονάδες/μήνα”)

6. Προειδοποιήσεις κινδύνου

Κίνδυνος 1: Μην αφήνετε πολλαπλά plugins να κάνουν το ίδιο πράγμα ξανά και ξανά

Είναι η πιο συνηθισμένη “πηγή καταστροφής”.”

• Διαδρομή Α:Συν WebP ή AVIF + EWWW(Μοιράστε την εργασία μεταξύ των δύο, μην κάνετε ταυτόχρονες μετατροπές και παραδόσεις, ή εγκαταστήστε μόνο ένα από αυτά.)
• Διαδρομή Β: ShortPixel / Imagify / TinyPNG επιλέξτε τρία(επιλέξτε ένα για συμπίεση και next-gen)

Κίνδυνος 2: Η λειτουργία “Αντικατάσταση ID / Διαγραφή αρχικής εικόνας / Αντικατάσταση URL” του WebP είναι μια μετακίνηση περιουσιακών στοιχείων.

Η έμφαση προστίθεται:Συν WebP Η περιγραφή αναφέρει σαφώς ότι η πλήρης δημιουργία αντικαθιστά το αρχικό αναγνωριστικό εικόνας, διαγράφει το αρχικό αρχείο και αντικαθιστά τη διεύθυνση URL περιεχομένου.
Αυτό σημαίνει ότι δεν πρόκειται για μια “μικρή ρύθμιση που μπορεί να αποσυρθεί ανά πάσα στιγμή”, αλλά για μια αλλαγή σε επίπεδο περιουσιακών στοιχείων.

Η προτεινόμενη στρατηγική θα πρέπει να είναι:

• Μικρή δοκιμή πρώτα (μερικές δεκάδες έως μερικές εκατοντάδες)
• Επιβεβαιώστε ότι η προβολή του frontend, οι μικρογραφίες και οι ενημερώσεις της προσωρινής μνήμης cache λειτουργούν σωστά.
• Επανεξέταση της πλήρους επεξεργασίας της βιβλιοθήκης

Κίνδυνος 3: Η πραγματική κατανάλωση “δωρεάν πιστώσεων” συμπίεσης cloud εξαρτάται από τον αριθμό των μικρογραφιών και την επιλογή next-gen.

• ShortPixel: Οι μικρογραφίες και το next-gen επηρεάζουν σημαντικά τις πιστώσεις.
• TinyPNG: Η ενεργοποίηση του WebP/AVIF αφαιρεί μια επιπλέον πίστωση για κάθε μέγεθος εικόνας.
• Imagify: αφαιρείται ανάλογα με το μέγεθος της αρχικής εικόνας, όσο περισσότερες μικρογραφίες αφαιρούνται περισσότερο, η έντονη πίεση θα επαναλάβει την αφαίρεση!

Κίνδυνος 4: “WebP/AVIF generated” δεν σημαίνει “WebP/AVIF παραδίδεται από το front office”.”

Πολλοί άνθρωποι αισθάνονται ότι “δεν είναι πιο γρήγοροι” μετά τη μετατροπή, επειδή το frontend εξακολουθεί να παράγει JPG/PNG (η προσωρινή αποθήκευση/επανεγγραφή/ετικέτες/διαπραγμάτευση του προγράμματος περιήγησης δεν είναι στη σωστή θέση).

7. Πώς να επαληθεύσετε ότι έχει τεθεί σε ισχύ αφού έχει γίνει

4 πολύ απλά σημεία επικύρωσης:

1. Εάν η ίδια σελίδα ανανεώνεται για δεύτερη φορά και φορτώνει με μεγαλύτερη συνέπεια και ταχύτητα(Προσωρινή αποθήκευση και βελτιστοποίηση της φυσικής αίσθησης για το αν λειτουργεί)
2. Διαφέρουν σημαντικά τα μεγέθη των εικόνων που φορτώνονται σε κινητά τηλέφωνα και επιτραπέζιους υπολογιστές;(ανταποκρίνεται) srcset/sizes (είτε λειτουργούν είτε όχι)
3. Επιτόπιος έλεγχος μερικών εικόνων: αν υπάρχουν αρχεία/πηγές WebP ή AVIF(Χρησιμοποιεί ο ιστότοπος πραγματικά επόμενης γενιάς）
4. Δείγμα μερικών εικόνων: μεγεθύνετε για να δείτε αν είναι εμφανώς θολές, αν το κείμενο είναι θολό.(η συμπιεσμένη μάζα δεν είναι υπερβολική)

Εάν και τα τέσσερα αυτά στοιχεία ταιριάζουν, η διαδρομή που επιλέξατε έχει εκτελεστεί. Επόμενος σταθμός. CDN “Στρώμα παράδοσης”, το σύνολο θα είναι πιο σταθερό.

8. Συστάσεις για δράση

1. Επιλέξτε πρώτα τη διαδρομή σας:

• Προσπαθώ να είμαι όσο το δυνατόν πιο ελεύθερος.: Plus WebP ή AVIF + EWWW (ή μόνο ένα από αυτά)
• Θέλετε να εξοικονομήσετε πόρους του διακομιστή, πληρώστε ανά πίστωση για περισσότερη ασφάλεια: ShortPixel / Imagify / TinyPNG - επιλέξτε ένα!

2. Κάντε πρώτα μια μικρή δοκιμή (μερικές δεκάδες)
3. Βεβαιωθείτε ότι είναι εντάξει πριν την παρτίδα
4. Απαιτούνται περαιτέρω βελτιώσεις στη σταθερότητα της παράδοσης:διαβάστε CDN Επιτάχυνση

κοινά προβλήματα

1. Πόσα πρόσθετα πρέπει να εγκαταστήσω; Μπορώ να τα εγκαταστήσω όλα;

Προσπαθήστε να ακολουθήσετε μόνο μία διαδρομή.

• Διαδρομή A: Συν WebP ή AVIF + EWWW Image Optimizer (ή μόνο ένα από αυτά)
• Διαδρομή Β: ShortPixel / Imagify / TinyPNG - επιλέξτε ένα!
  Στον ίδιο σταθμό την ίδια στιγμή αφήστε περισσότερα από ένα plug-in να κάνουν “συμπίεση / μεταφορά WebP / AVIF / αλλαγή URL / επαναδιατύπωση παράδοσης”, το πιο πιθανό να γίνει όλο και πιο χαοτικό, αλλά και το πιο δύσκολο να ελεγχθεί.

2. Το WordPress δεν υποστηρίζει ήδη το WebP/AVIF; Χρειάζομαι ακόμα ένα πρόσθετο;

Πρέπει να διαχωριστεί:
“Υποστήριξη μεταφόρτωσης/χρήσης” ≠ “Αυτόματη μετατροπή/αυτόματη παράδοση”.
Το WordPress 6.5 επίσης δεν μετατρέπει αυτόματα τα παλιά JPG/PNG σε WebP/AVIF, ούτε κάνει αυτόματα το όλο θέμα “εξαγωγή AVIF/WebP σε πρόγραμμα περιήγησης ικανό και fallback” για εσάς. Συνήθως χρειάζεται ένα πρόσθετο ή μια υπηρεσία για να λειτουργήσει η ιστορική βιβλιοθήκη πολυμέσων.

3. Ποιο είναι το πιο “ανταποδοτικό” βήμα στη βελτιστοποίηση της εικόνας;

Συνήθως είναι Προσαρμόστε πρώτα τα “μεγέθη” σωστά (srcset/sizes).。
Πολλοί ιστότοποι είναι αργοί όχι επειδή δεν έχουν συμπίεση, αλλά επειδή η σελίδα είναι μόνο 900px και ο χρήστης καλείται να κατεβάσει μια εικόνα 3000px. Η συμπίεση εξοικονομεί KBs, αλλά το “λάθος μέγεθος” θα σας κάνει να κατεβάσετε αρκετές φορές περισσότερα δεδομένα για το τίποτα.

4. Πώς μπορώ να είμαι σίγουρος ότι φορτώνω τη “μικρότερη” και όχι την αρχική εικόνα για πάντα;

Κοιτάξτε δύο φαινόμενα:

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

5. Το “WebP/AVIF generated” σημαίνει ότι το frontend πρέπει να παράγει WebP/AVIF;

Δεν είναι ίσοι.
Η δημιουργία είναι μόνο το “επίπεδο αρχείου” που έχει γίνει- το αν το frontend παραδίδει πραγματικά WebP/AVIF εξαρτάται από τις επανεγγραφές, τις πολιτικές επισήμανσης εικόνων, τα χτυπήματα στη μνήμη cache, τη διαπραγμάτευση του προγράμματος περιήγησης που ισχύει και ούτω καθεξής. Όταν τελειώσετε, φροντίστε να “ελέγξετε δειγματοληπτικά μερικές εικόνες για τύπους πόρων”.

6. Plus Τι είναι τόσο επικίνδυνο με το WebP ή το AVIF; Μπορώ να εκτελέσω ολόκληρη τη βιβλιοθήκη με ένα κλικ;

Το σημείο κινδύνου του δεν είναι η “συμπίεση”, είναιΜεταβολές στα επίπεδα μετανάστευσης περιουσιακών στοιχείων：

• Η πλήρης δημιουργία μπορεί να αντικαταστήσει το αρχικό αναγνωριστικό του αρχείου εικόνας, να διαγράψει το αρχικό αρχείο και να αντικαταστήσει τη διεύθυνση URL στο περιεχόμενο.
  ο λόγος για τον οποίοΔεν συνιστάται η αντικατάσταση ολόκληρης της βιβλιοθήκης αμέσως.: Δοκιμάστε σε μικρή κλίμακα (δεκάδες έως εκατοντάδες) + έχετε διαθέσιμα αντίγραφα ασφαλείας προτού εξετάσετε το ενδεχόμενο πλήρους επεξεργασίας της βιβλιοθήκης.

7. Ποια είναι η επιλογή μεταξύ των δύο τρόπων λειτουργίας του Plus WebP: διατήρηση της αρχικής εικόνας έναντι της αντικατάστασης και διαγραφής της αρχικής εικόνας;

Απλό στην κατανόηση:

• Λειτουργία 1: Διατήρηση της αρχικής εικόνας + δημιουργία αντιγράφου WebP/AVIF (πιο σταθερό): Βολικό για επαναφορές, αλλά ο δίσκος αυξάνεται (αρχική εικόνα + νέα μορφή + μικρογραφίες πολλαπλών μεγεθών).
• Λειτουργία 2: Αντικατάσταση και διαγραφή της αρχικής εικόνας (πιο επιθετική): Οι δίσκοι είναι λιγότερο επιρρεπείς σε διόγκωση, αλλά “αλλάζετε περιουσιακά στοιχεία + αλλάζετε αναφορές”, γεγονός που καθιστά πιο δαπανηρή την αντιμετώπιση προβλημάτων συμβατότητας.
  Όσο πιο πολύπλοκος είναι ο ιστότοπος (ηλεκτρονικό εμπόριο/πολλαπλά πρόσθετα/πολλαπλό μέγεθος), τόσο περισσότερο συνιστάται να ξεκινήσετε με ένα πιο σταθερό μοντέλο.

8. Είναι αρκετή η δωρεάν τοπική συμπίεση EWWW Image Optimizer; Θα υπερφορτώσει τον διακομιστή;

Το EWWW είναι περισσότερο ένας “τοπικός συμπιεστής”: τρώει CPU/IO.
Είναι σύνηθες το φορτίο να αυξάνεται κατά τη διάρκεια της βελτιστοποίησης παρτίδας, πράγμα που δεν σημαίνει ότι “δεν λειτουργεί”, αλλά μάλλον ότι η στρατηγική πρέπει να είναι σωστή: παρτίδα, χαμηλές αιχμές και επιλογές εκφόρτωσης / cloud, αν είναι απαραίτητο.
Αν ψάχνετε για εξοικονόμηση πόρων ή αν έχετε περιορισμένους πόρους διακομιστή, η διαδρομή Β είναι πιο φιλική προς τον διακομιστή.

9. Οι 100 δωρεάν πιστώσεις/μήνα του ShortPixel, γιατί νιώθω ότι χάθηκαν σε λίγες εικόνες;

λόγω οι πιστώσεις δεν είναι “αριθμός εικόνων”.”Η επόμενη γενιά θα μεγεθυνθεί με μια μικρογραφία με την επόμενη γενιά:

• Η αρχική εικόνα + κάθε μικρογραφία μετράει ως πίστωση
• Εάν δημιουργηθεί ένα WebP/AVIF, καταναλώνεται μια επιπλέον πίστωση για κάθε αντίστοιχη έκδοση.
  Έτσι, αυτό που νομίζετε ότι είναι “1 εικόνα” μπορεί στην πραγματικότητα να καταναλώνει κοντά σε “2ψήφιες μονάδες”. shortPixel

10. Το δωρεάν 20MB/μήνα του Imagify, γιατί εξαντλείται επίσης γρήγορα;

Το Imagify είναι περισσότερο σαν ένα “πακέτο κυκλοφορίας”:

• Όπως το στείλατε.Αρχικό μέγεθος αρχείουαφαίρεση ποσοστώσεων
• Όσο περισσότερες μικρογραφίες έχετε, τόσο περισσότερο καταναλώνετε
• Η αλλαγή του επιπέδου συμπίεσης για την εκ νέου βελτιστοποίηση θα καταναλώσει ξανά την ποσόστωση
• Ίδιο κλειδί API για πολλαπλές τοποθεσίες, κοινή χρήση ποσόστωσης
  Έτσι, το “20MB θα εξαντληθεί σύντομα” προκαλείται συχνά από πολύ μεγάλες εικόνες, πάρα πολλές μικρογραφίες ή επανειλημμένες δοκιμές και λάθη.

11. Το TinyPNG είναι δωρεάν για 500 πιστώσεις/μήνα, γιατί το πρόσθετο λέει ότι είναι μόνο περίπου 100 πιστώσεις/μήνα και στη συνέχεια 50 πιστώσεις/μήνα με το WebP/AVIF;

Επειδή οι πιστώσεις TinyPNG μεγεθύνονται επίσης με το “size/variant”:

• Μια κανονική εγκατάσταση WordPress πιθανώς συμπιέζει περίπου 100 φύλλα/μήνα.
• Ενεργοποίηση της μετατροπής AVIF ή WebP:Κάθε μέγεθος εικόνας καταναλώνει μια επιπλέον πίστωσηΈτσι, μπορείτε πιθανώς να συμπιέσετε και να μετατρέψετε μόνο περίπου 50 εικόνες/μήνα (ανάλογα με τον αριθμό των μεγεθών των μικρογραφιών).
  Έτσι, 500 μονάδες ≠ 500 εικόνες.

12. Πόσες μικρογραφίες υπάρχουν στον ιστότοπό μου; Γιατί έχει τόση σημασία;

Το WordPress δημιουργεί πολλαπλά μεγέθη για τη μεταφόρτωση μιας εικόνας.Τα θέματα/plugins (ειδικά για το ηλεκτρονικό εμπόριο) μπορεί να προσθέσουν περισσότερα μεγέθη.
Οι πιστώσεις/ποσότητες συμπίεσης σύννεφου είναι συνήθως “πρωτότυπο + μικρογραφίες μαζί”, οπότε όσο περισσότερες μικρογραφίες έχετε, τόσο λιγότερες ελεύθερες πιστώσεις έχετε να χρησιμοποιήσετε.

13. Είναι η νωχελική φόρτωση πάντα ταχύτερη; Γιατί κάποιοι λένε ότι η τεμπέλικη φόρτωση επιβραδύνει τα πράγματα;

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

14. Ταξιδεύω με τη διαδρομή Α ή Β. Πότε χρειάζομαι το CDN / Εικόνα CDN;

Η συμπίεση, το μέγεθος και η μορφοποίηση λύνουν το πρόβλημα των “μικρότερων αρχείων που χωράνε”,
CDN Η λύση είναι να παρέχουμε πιο στενές και σταθερές。
Όταν οι εικόνες αντλούνται από απόσταση από την τοποθεσία προέλευσης με αποτέλεσμα σημαντική καθυστέρηση, τότε η συμπλήρωση του CDN/εικόνες με CDN (π.χ. Cloudflare Polish / Jetpack Site Accelerator) θα είναι συνολικά πιο σταθερή, διαβάστε Επιτάχυνση WordPress CDN。

15. Ποιος είναι ο ευκολότερος τρόπος για να επαληθεύσω ότι “λειτουργεί πραγματικά” όταν τελειώσω;

Η πιο αποδοτική σε χρόνο μέθοδος επαλήθευσης:

• Εάν η ίδια σελίδα ανανεώνεται για δεύτερη φορά και φορτώνει με μεγαλύτερη συνέπεια και ταχύτητα
• Διαφέρουν αισθητά τα μεγέθη των εικόνων που φορτώνονται σε κινητά τηλέφωνα και επιτραπέζιους υπολογιστές (παίζουν ρόλο το srcset/sizes);
• Επιτόπιος έλεγχος μερικών εικόνων: αν υπάρχουν αρχεία/πηγές WebP ή AVIF
• Δείγμα μερικών εικόνων: μεγεθύνετε για να δείτε αν είναι εμφανώς θολές, αν το κείμενο είναι θολό.