Ωστόσο, η παράδοση εικόνων μέσω WebP δεν είναι εύκολη. Εξαρτάται από τον διακομιστή ιστού του διακομιστή σας, το επιλεγμένο cdn, το θέμα, τις προσθήκες προσωρινής αποθήκευσης κ.λπ.
Αυτός ο οδηγός θα σας βοηθήσει να παραδώσετε εικόνες WebP στο WordPress με τρεις τρόπους.
Τι είναι το WebP;
Νέα μορφή εικόνας για τον Ιστό
από την Google
Το WebP είναι μια μορφή εικόνας (όπως png και jpg) που αναπτύχθηκε από την Google. Οι εικόνες WebP (.webp) τείνουν να είναι πολύ μικρότερες, γεγονός που επιταχύνει τους ιστότοπους και χρησιμοποιεί λιγότερο εύρος ζώνης.
Ανάλογα με την εικόνα, μπορείτε να μειώσετε το μέγεθος από 25% σε 70%.
Τα JPEG, PNG, GIF κ.λπ. έχουν τα θετικά και τα αρνητικά τους. Ο παρακάτω πίνακας θα σας δώσει μια ιδέα:
| JPG | GIF | PNG | SVG | |
| Διάνυσμα | ❌ | ❌ | ❌ | ✅ |
| Ράστερ | ✅ | ✅ | ✅ | ❌ |
| Διαφάνεια | ❌ | ✅ | ✅ | ✅ |
| Κινουμένων σχεδίων | ❌ | ✅ | ✅ | ✅ |
| Χαμένος | ✅ | ❌ | ❌ | ❌ |
Το WebP έχει σχεδόν όλα τα χαρακτηριστικά που αναφέρθηκαν παραπάνω! Τότε γιατί δεν μπορούμε να χρησιμοποιήσουμε το WebP παντού;
Γιατί να μην χρησιμοποιείτε το WebP παντού;
Όπως μπορείτε να δείτε, μόνο το 80% των συσκευών υποστηρίζει μόνο WebP. Όχι μόνο τα προγράμματα περιήγησης παλαιού τύπου, το Safari/iOS Safari εξακολουθεί να μην υποστηρίζει το WebP.
Γιατί είναι τόσο δύσκολη η εξυπηρέτηση του WebP;
Όπως παρατηρήσατε, παραδίδουμε εικόνες σύμφωνα με το πρόγραμμα περιήγησης. Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει WebP, πρέπει να τους παρέχουμε την αρχική εικόνα (jpg/png/gif).
Υπάρχουν δύο κύριοι τρόποι εξυπηρέτησης του WebP:
Χρησιμοποιώντας την ετικέτα εικόνας
Μπορούμε να χρησιμοποιήσουμεεικόναετικέτα για να πείτε στο πρόγραμμα περιήγησης ότι έχουμε μια μορφή WebP. Εάν το υποστηρίζει το πρόγραμμα περιήγησης, θα φορτωθεί η κανονική/εναλλακτική εικόνα.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Με διαφορετική απάντηση
Σε διαφορετική απάντηση, ως συνήθως, έχετε ένα αρχείο. Ακριβώς:
<img src="img.jpg" />Ένα URL εικόνας υποστηρίζει την παράδοση αρχείων jpg και webp. Αυτό κάνει ο διακομιστής.
Παρόλο που πρόκειται για επέκταση αρχείου .jpg, εάν το πρόγραμμα περιήγησης υποστηρίζει WebP, τότε η απάντηση θα είναι WebP. Ονομάζεται επίσης "διαφορετική απόκριση".
Ετικέτα εικόνας έναντι διαφορετικής απόκρισης
Το καθένα έχει τα υπέρ και τα κατά του. Εδώ είναι ένας συγκριτικός πίνακας:
| ετικέτα εικόνας | Διαφορετική ανταπόκριση | |
|---|---|---|
| Λειτουργεί με εικόνες φόντου | ❌ | ✅ |
| Φιλικό προς το CDN | ✅ | ✅ (μόνο λίγα) |
| Ο διακομιστής πρέπει να ρυθμιστεί | ❌ | ✅ (nginx) |
| Λειτουργεί με αργή φόρτωση | ✅ | ✅ |
Πώς να προβάλετε εικόνες στο WebP στο WordPress;
Μέθοδος #1 - Χρησιμοποιήστε το CDN μόνο με μετατροπή fly WebP
Αυτή είναι ίσως η απλούστερη λύση. Ορισμένοι πάροχοι CDN υποστηρίζουν επί του παρόντος τη μετατροπή εικόνας σε WebP κατά τη διάρκεια της πτήσης μαζί με βελτιστοποίηση εικόνας.
Εδώ είναι μερικά:
- BunnyCDN
- Cloudflare με Πολωνικά (Pro Plan)
- Συννεφιασμένος
- Προσαρμοστικές εικόνες ShortPixel (χρησιμοποιεί το StackPath CDN)
- Συμπίεση WP
Μπορείτε επίσης να εξοικονομήσετε χώρο στο δίσκο χρησιμοποιώντας αυτήν τη μέθοδο, καθώς δεν χρειάζεται να αποθηκεύετε τόσο κανονικές όσο και μετατρεπόμενες εικόνες WebP.
BunnyCDN
Το BunnyCDN συνοδεύεται από το Bunny Optimizer, το οποίο μπορεί να συμπιέζει εικόνες και να τις μετατρέπει σε WebP αμέσως.
Μέθοδος #2 - Χρήση διαφοροποιημένης απόκρισης + CDN
Όπως περιγράφηκε παραπάνω, μια "απάντηση ποικιλίας" θα έχει ένα URL εικόνας που μπορεί να εξυπηρετεί εικόνες WebP και μη, ανάλογα με το πρόγραμμα περιήγησης που ζητήθηκε.
Πρέπει επίσης να επιλέξουμε το σωστό CDN που υποστηρίζει τις κεφαλίδες αιτημάτων WebP ως κλειδί κρυφής μνήμης. Διαφορετικά, μόλις αποθηκευτεί προσωρινά η εικόνα WebP στον διακομιστή, θα παραδοθεί σε προγράμματα περιήγησης που δεν υποστηρίζουν WebP.
Προσαρμογή ποικίλης απόκρισης στο WordPress
Ο ευκολότερος τρόπος για να ρυθμίσετε μια πλούσια απόκριση για το WebP στο WordPress είναι να χρησιμοποιήσετε την προσθήκη WebP Express. Απλώς εγκαταστήστε το πρόσθετο και κάντε κλικ στο "Αποθήκευση ρυθμίσεων και επιβολή νέων κανόνων .htaccess".
Το WebP Express θα διαμορφώσει τον μετατροπέα WebP και θα αντικαταστήσει τους κανόνες έτσι ώστε όταν λαμβάνει ένα αίτημα, θα μετατρέπει τις εικόνες σε WebP αμέσως και εάν το πρόγραμμα περιήγησης δεν υποστηρίζει WebP, θα παραδοθεί η προεπιλεγμένη εικόνα.
Εάν βρίσκεστε στο Nginx
Το WebP Express προσθέτει τους απαραίτητους κανόνες επανεγγραφής «.htaccess», αλλά λειτουργεί μόνο σε διακομιστή Apache, LiteSpeed ή OpenLiteSpeed. Εάν χρησιμοποιείτε Nginx, πρέπει να κάνετε επεξεργασίαnginx.configκαι προσθέστε τον ακόλουθο κώδικα:
# Κανόνες WebP Express# --------------------location ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Διαφέρει Accept;λήγει 365d;if ($http_accept !~* "webp"){break;}try_files/wp-content/webp-express/webp-images/doc-root/$uri.webp$uri.webp/wp-content /plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content;}# Αιτήματα δρομολόγησης για μη υπάρχοντα webps στην τοποθεσία του μετατροπέα ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ----------------- (Οι κανόνες WebP Express τελειώνουν εδώ)Ο παραπάνω κώδικας προσθέτει τις απαιτούμενες κεφαλίδες απόκρισης (η διαχείριση της προσωρινής μνήμης ποικίλλει επίσης) και επιχειρεί να παραδώσει το WebP εάν υπάρχει, διαφορετικά να το ανακατευθύνει στον μετατροπέα (με βάση την υποστήριξη του προγράμματος περιήγησης)
Πάροχοι CDN που υποστηρίζουν Diverse Response
Εάν ο πάροχος CDN δεν υποστηρίζει το WebP ως κλειδί προσωρινής αποθήκευσης, τα αρχεία WebP θα παραδοθούν σε προγράμματα περιήγησης που δεν υποστηρίζουν WebP. Ομοίως, υπάρχει πιθανότητα οι εικόνες που δεν είναι webp να παραδοθούν σε υποστηριζόμενα προγράμματα περιήγησης.
BunnyCDN , Κλειδί CDN , Google CDN και πολλοί άλλοι πάροχοι CDN υποστηρίζουν το WebP ως κλειδί κρυφής μνήμης. Βεβαιωθείτε ότι τα έχετε ενεργοποιήσει στις ρυθμίσεις.
VBunnyCDN :
VΚλειδί CDN :
Χρησιμοποιείτε το δωρεάν πρόγραμμα της Cloudflare;
Δυστυχώς, το δωρεάν πρόγραμμα του Cloudflare δεν υποστηρίζει το WebP ως κλειδί κρυφής μνήμης. Είτε χρησιμοποιήστε ένα CDN όπως το BunnCDN είτε κάντε αναβάθμιση στο επαγγελματικό τους σχέδιο.
Ρυθμίστε μια ποικιλία απόκρισης + CDN με δημοφιλείς παρόχους φιλοξενίας
Βεβαιωθείτε ότι το WebP Express είναι εγκατεστημένο.
- Kinsta ή WP Engine - επικοινωνήστε με την ομάδα υποστήριξής τους για να προσθέσετε την παραπάνω διαμόρφωση Nginx και να συμπεριλάβετε το κλειδί προσωρινής αποθήκευσης WebP στο CDN τους (KeyCDN).
- Cloudways - απλώς εγκαταστήστε το WebP Express και αποθηκεύστε τις ρυθμίσεις χρησιμοποιώντας .htacess. Επειδή το Cloudways χρησιμοποιεί μια υβριδική προσέγγιση Apache + Nginx, λειτουργεί ασυνήθιστα.
- SiteGound - Επικοινωνήστε με την υποστήριξη για να προσθέσετε τη διαμόρφωση Nginx. Χρησιμοποιήστε ένα υποστηριζόμενο CDN όπως παραπάνω.
- Διακομιστής LiteSpeed / OpenLiteSpeed / Apache - απλώς εγκαταστήστε το WebP Express και αποθηκεύστε τις ρυθμίσεις με το '.htacess'. Χρησιμοποιήστε επίσης ένα υποστηριζόμενο CDN όπως παραπάνω.
- Προσαρμοσμένο VPS με Nginx (Στοίβα LEMP) - Ρύθμιση
nginx.confκαι χρησιμοποιήστε ένα υποστηριζόμενο CDN όπως παραπάνω.
Μέθοδος #3 - Χρήση ετικέτας εικόνας
Εάν και οι δύο παραπάνω μέθοδοι δεν λειτουργούν για εσάς, μπορείτε να χρησιμοποιήσετε την ετικέτα εικόνας. Δεν απαιτεί διαμόρφωση διακομιστή (επεξεργασία nginx.conf) και υποστηρίζει όλους τους παρόχους CDN.
Η χρήση αυτής της μεθόδου θα αλλάξει το HTML για την παράδοση WebP. Δεν θα λειτουργήσει με εικόνες φόντου, δεν είναι συμβατό με ορισμένα θέματα, προσθήκες προσωρινής αποθήκευσης, πρόσθετα αργής φόρτωσης κ.λπ.
Εάν χρησιμοποιείτε αυτήν τη μέθοδο, όλες οι ετικέτες img θα μετατραπούν ως εξής:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Εάν το πρόγραμμα περιήγησης υποστηρίζει WebP, παραδίδεται το αντίστοιχο αρχείο, διαφορετικά, παραδίδεται μια κανονική εικόνα.
Προσαρμογή μιας ετικέτας εικόνας για το WebP στο WordPress
Ο ευκολότερος τρόπος για να ρυθμίσετε μια ετικέτα εικόνας είναι μέσω του WebP Express.
Ρυθμίστε τον τρόπο λειτουργίας σε "CDN friendly" και ενεργοποιήστε το "Alter HTML".
Συμπέρασμα
Μακάρι να έρθει η μέρα που όλα τα προγράμματα περιήγησης υποστηρίζουν το WebP!
Εάν μπορείτε να ξοδεύετε μερικά δολάρια το μήνα, τότε ο ευκολότερος και πιο αποτελεσματικός τρόπος είναι να χρησιμοποιήσετε ένα CDN όπως το BunnyCDN, το οποίο θα μετατρέπει τις εικόνες σε WebP αμέσως. Διαφορετικά, μείνετε στη μέθοδο #2 που ανέφερα παραπάνω.
