Πώς να σερβίρετε εικόνες μορφής WebP στο WordPress

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

Τα περισσότερα προγράμματα περιήγησης υποστηρίζουν WebP

• Σύμφωνα με τα στοιχεία της Caniuse, το WebP υποστηρίζεται επί του παρόντος στο 94% των browsers, συμπεριλαμβανομένων των Apple Safari, Google Chrome, Opera, Mozilla Firefox, Microsoft Edge και Android browsers.
• Μπορείτε ακόμα να σερβίρετε JPEG/PNG ως εναλλακτική λύση για μη υποστηριζόμενα προγράμματα περιήγησης.

Σημαντικά οφέλη από τη χρήση εικόνας μορφής WebP

• Σε σύγκριση με το μέγεθος της κανονικής εικόνας JPG ή PNG, η εικόνα WebP ίδιας διάστασης μπορεί να εξυπηρετήσει σε μικρά bytes. Ως εκ τούτου, οι εικόνες θα φορτώνονται ταχύτερα. Θα είναι χρήσιμο ειδικά για τους χρήστες κινητών τηλεφώνων.
• Εξυπηρέτηση ποιοτικών εικόνων σε λίγα bytes, εξοικονομώντας δραματικά το εύρος ζώνης.
• Διατηρήστε τον ιστότοπό σας ενημερωμένο με την τελευταία τάση. Μην χάνετε τη συνομιλία λόγω του προβλήματος αργής φόρτωσης bull-cart.
• Το WebP συνιστάται από τους προγραμματιστές της Google. Σας βοηθά να περάσετε τη σύσταση “εξυπηρέτηση εικόνων σε μορφή επόμενης γενιάς” του Google PageSpeed Insight.

Αυτός είναι ο τρόπος με τον οποίο μπορείτε να εξυπηρετήσετε το WebP για έναν ιστότοπο WordPress.

• Εάν το WordPress σας φιλοξενείται σε διακομιστή Apache μπορείτε να χρησιμοποιήσετε το .htaccess rewriting.
• Στην περίπτωση του NGINX μπορείτε να χρησιμοποιήσετε τον παρακάτω κανόνα επαναγραφής με τη βοήθεια της υποστήριξης φιλοξενίας
• Αυτό το πρόσθετο υποστηρίζεται επίσης με το πρόσθετο WP Rocket cache.

Πρώτον, προσθέστε αυτό το μπλοκ πριν από την οδηγία διακομιστή:

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

Προσθέστε αυτό το μπλοκ μέσα στην οδηγία διακομιστή:

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "<<FULL PATH OF wp-content PARENT>>";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

Η τοποθέτηση έχει σημασία. Προσθέστε την προσεκτικά.

Χρήση του WebP Express Plugin στο NGINX

• Εγκαταστήστε και ενεργοποιήστε το WebP Express, δωρεάν πρόσθετο. Ένα τεράστιο ευχαριστώ στον προγραμματιστή.
• Τρόπος λειτουργίας: Ποικίλες αποκρίσεις εικόνας.
• Πεδίο εφαρμογής: Upload μόνο.

• Εκτέλεση Μαζική μετατροπή

• Για το WordPress που φιλοξενείται σε διακομιστή Apache, δεν απαιτείται καμία ρύθμιση παραμέτρων, καθώς η .htaccess κάνει όλα τα μαγικά.
• Ο χρήστης NGINX server πρέπει να τροποποιήσει το αρχείο ρυθμίσεων με πρόσβαση root.

Για καλύτερη οργάνωση του κώδικα, θα συνιστούσα να τον τοποθετήσετε πρώτα μέσα στον κατάλογο /etc/nginx/ με το όνομα webp.conf και στη συνέχεια να τον συμπεριλάβετε στο κύριο μπλοκ του διακομιστή.

Εισάγετε την παρακάτω εντολή

cd /etc/nginx/ && nano webp.conf

• Επικολλήστε τον παρακάτω κώδικα χρησιμοποιώντας δεξί κλικ μέσα στον επεξεργαστή nano στο τερματικό SSH.

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 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
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

• Πατήστε CTRL+O και Enter για να αποθηκεύσετε.

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

cd /etc/nginx/sites-available && ls

Επεξεργαστείτε το αρχείο ρυθμίσεων και βάλτε το include webp.conf; όπως φαίνεται παρακάτω.

# General
server {
    listen         80;
    server_tokens off;
    return 301 https://$host$request_uri;
}
server {
server_tokens off;
root /var/www/html;
index index.php index.html index.htm;
server_name .gulshankumar.net;
client_max_body_size 0;

    listen [::]:443 ssl http2 ipv6only=on;
    listen 443 ssl http2;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_certificate /etc/comodo/cert.pem;
        ssl_certificate_key /etc/comodo/private.pem;
        ssl_prefer_server_ciphers on;
        ssl_session_cache   shared:SSL:20m;
        ssl_session_timeout 20m;
        ssl_ciphers 'TLS13+AESGCM+AES128:EECDH+AES128';

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;


# WebP Express rule goes here

include webp.conf;

# WebP Rule end

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

Επαναφορτώστε ή επανεκκινήστε το NGINX.

service nginx reload

Πράγματα που πρέπει να σημειωθούν

• Εάν χρησιμοποιείτε το BunnyCDN, πρέπει να ενεργοποιήσετε το Vary Cache.

• Το Cloudflare δεν υποστηρίζει Vary Cache. Δοκιμάστε την παρακάτω εναλλακτική προσέγγιση.

Χρήση WebP με χρήση Cloudflare CDN (χωρίς Plugin)

Αν είστε χρήστης του Cloudflare Pro, μπορείτε απλά να ενεργοποιήσετε το WebP με ένα κλικ από την καρτέλα Speed.

Εξυπηρέτηση WebP χρησιμοποιώντας το BunnyCDN Optimizer (χωρίς πρόσθετο)

Το BunnyCDN προσφέρει υπηρεσίες βελτιστοποίησης που συνοδεύονται από λύση εξυπηρέτησης WebP On-the-fly. Είναι λύση ενός κλικ με επιπλέον κόστος $9,5/mo.

Εξυπηρετήστε το WebP χρησιμοποιώντας το JetPack Plugin

• Απλά εγκαταστήστε και ενεργοποιήστε το πρόσθετο JetPack
• Ενεργοποιήστε τον Επιταχυντή τοποθεσίας.

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

Εξυπηρέτηση WebP χρησιμοποιώντας το Imagify

Το Imagify είναι ένα πρόσθετο βελτιστοποίησης εικόνων που προσφέρεται από την WP Media, τους ανθρώπους πίσω από το WP Rocket.

• Εγκαταστήστε και ενεργοποιήστε το πρόσθετο Imagify
• Εισάγετε το κλειδί API
• Στις ρυθμίσεις, επιλέξτε τη λειτουργία Picture tags για γρήγορη ρύθμιση.
• Εναλλακτικά, μπορείτε να χρησιμοποιήσετε κανόνα επαναγραφής με κάποιες ρυθμίσεις διακομιστή όπως περιγράφεται εδώ. Με τον Apache, η διαδικασία προσθήκης κώδικα .htaccess θα είναι αυτόματη, αλλά με το NGINX θα πρέπει να το κάνετε χειροκίνητα.

WebP σε JPG

Το WebP μπορεί να υποβαθμίσει λίγο την ποιότητα της εικόνας σε ορισμένες περιπτώσεις. Αν θέλετε να επιστρέψετε από WebP σε JPG, απλά ακολουθήστε τα παρακάτω βήματα.

• Απενεργοποιήστε και διαγράψτε το πρόσθετο που σχετίζεται με το WebP.
• Αφαιρέστε τη σχετική ρύθμιση από το αρχείο ρυθμίσεων (.htaccess)
• Μαζική διαγραφή αρχείων .webp και εξοικονόμηση χώρου στο δίσκο.

find . -type f -name "*.webp*" -delete

Αν θέλετε να μετατρέψετε το αρχείο WebP σε JPG, μπορείτε να χρησιμοποιήσετε το εργαλείο που είναι διαθέσιμο στο CloudConvert.

---

Χειροκίνητη μέθοδος χωρίς Plugin

Αυτή η ενότητα έχει μόνο ενημερωτικό χαρακτήρα.

Βήμα 1 : Προσθήκη μορφής WebP σε έγγραφο HTML

Πρώτον, πρέπει να μετατρέψετε όλες τις εικόνες σας σε WebP και να χρησιμοποιήσετε την προηγούμενη μορφή εικόνας σας ως εφεδρική λύση. Υπάρχει κάποιο πρόσθετο όπως το Optimus που μπορεί να κάνει αυτή τη δουλειά αυτόματα. Αλλά, θα σας δείξω ένα άλλο εύκολο τρόπο για να το κάνετε αυτό με το χέρι.

1. Πηγαίνετε σε αυτόν τον ιστότοπο image.online-convert.com/convert-to-webp
2. Επικολλήστε το σύνδεσμο εικόνας και κάντε κλικ στο convert. Οι εικόνες σας σε μορφή WebP θα μεταφορτωθούν
3. Τώρα επεξεργαστείτε τον ακατέργαστο κώδικα HTML όπου εμφανίζεται η κανονική εικόνα σας.

Ας πούμε ότι στην αρχή ο κώδικας HTML της εικόνας σας ήταν κάπως έτσι

<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />

Πρέπει να τυλίξετε τον παραπάνω κώδικα με λίγη περισσότερη σήμανση HTML.

<picture>
	<source srcset="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
	<img src="https://www.gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />
</picture>

Τώρα, το έγγραφό σας HTML είναι έτοιμο να εξυπηρετήσει εικόνες σε μορφή WebP.
Βήμα 2 : Διαμόρφωση των ρυθμίσεων του διακομιστή
Ένα ακόμη βήμα, θα πρέπει να διαμορφώσετε ορισμένες ρυθμίσεις του διακομιστή Web Apache μέσω του .htacccess, ώστε το πρόγραμμα περιήγησης και ο διακομιστής Web να μπορούν να το αντιμετωπίσουν σωστά όπως όλες τις άλλες εικόνες.

Ο διακομιστής σας Web Hosting μπορεί να μην γνωρίζει από ποιον τύπο mime αυτού του είδους εικόνων πρέπει να εξυπηρετήσει. Έτσι πρέπει να προσθέσετε τον κατάλληλο τύπο mime. Επίσης, θα άξιζε να ρυθμίσετε την επικεφαλίδα λήξης για προσωρινή αποθήκευση.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Σημείωση: Βεβαιωθείτε ότι χρησιμοποιείτε το WordPress 5.8 ή νεότερη έκδοση.

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

Έτσι, πρέπει να διορθώσετε αυτό το πρόβλημα προσθέτοντας αυτόν τον κώδικα στο functions.php του θέματός σας Θα ήταν χρήσιμο σε περίπτωση που θα ανεβάσετε τις εικόνες σας απευθείας από το WordPress Dashboard > Επιλογή Media.

function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Έγινε.

Αν χρειάζεστε οποιαδήποτε βοήθεια, παρακαλώ κοιτάξτε στην ενότητα Σχόλια. Θα ήταν χαρά μου να σας βοηθήσω.

Πρόσθετες σημειώσεις

• Αν είστε χρήστης της Cloudways, δεν μπορείτε να παραδώσετε WebP με επαναδιαγραφή .htaccess, επειδή χρησιμοποιούν το NGINX ειδικά για στατικά αρχεία. Σε αυτή την περίπτωση έχετε δύο επιλογές. Ζητήστε από την ομάδα φιλοξενίας να επεξεργαστεί το αρχείο ρυθμίσεων για εσάς ή χρησιμοποιήστε JavaScript ή λύση βασισμένη σε CDN 3ου μέρους, όπως το Bunny ή το CF.

Περαιτέρω αναγνώσματα
Αν είστε περίεργοι να μάθετε περισσότερα για το WebP, ανατρέξτε σε αυτούς τους συνδέσμους.

• https://developers.google.com/speed/webp/
• https://en.wikipedia.org/wiki/WebP

Ευχαριστώ.